DEV Community: Rut Shah

How to Debug React Prop Drilling with PropFlow

Rut Shah — Thu, 05 Feb 2026 09:43:28 +0000

The Problem

You're debugging a React application. A button's theme color is wrong. You need to find where type is coming from.

You search your codebase. 47 results. 😫

You start tracing manually:

NotificationBanner receives it from WelcomeCard
WelcomeCard receives it from MainContent
MainContent receives it from Dashboard

And so on...

20 minutes later, you find the issue.

There has to be a better way.

Introducing PropFlow

PropFlow is a VS Code extension that traces React props instantly.

Hover over any prop → see its complete journey from source to usage.

Features

🔍 Instant Prop Tracing

Place your cursor on any prop and run "PropFlow: Show PropFlow Lineage" (or use the CodeLens button).

PropFlow analyzes your component tree and shows you:

🟢 SOURCE: Where the prop originates
🔵 USAGE: Components passing it through
🟣 DEFINITION: Where you're currently viewing it

🗺️ Visual Flowcharts

Hover over any prop to see an inline ASCII flowchart:

🟢 App (SOURCE)
└─ prop: "notificationVariant"
↓
🔵 Dashboard (USAGE)
└─ prop: "alertType"
...
↓
🟣 NotificationBanner (DEFINITION)
└─ prop: "type"

🔗 Click-to-Navigate

Every component in the chain is clickable. Jump directly to the file and line where it's defined.

⚡ Real-Time Updates

As you edit your code, PropFlow updates instantly. No need to save files.

📊 PropFlow Lineage Panel

View the complete prop chain in a dedicated sidebar panel. Click any component to navigate.

Installation

Open VS Code
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Search for "PropFlow"
Click Install

Or install from the [VS Code Marketplace] - https://marketplace.visualstudio.com/items?itemName=rutpshah.propflow

Usage

Method 1: Command Palette

Place cursor on a prop name
Press Ctrl+Shift+P (Cmd+Shift+P on Mac)
Type "PropFlow: Show Prop Lineage"
View results in PropFlow Lineage panel

Method 2: CodeLens

Look for "⬆ Trace Props" above component definitions
Click it
Select prop from dropdown
View trace

Method 3: Hover

Hover over any prop in your component
See inline flowchart
Click components to navigate

How It Works

PropFlow uses TypeScript's Compiler API (ts-morph) to:

Parse React components into Abstract Syntax Trees
Extract prop definitions from function parameters
Search workspace for JSX usages
Build complete prop lineage chains

All processing happens locally. Your code never leaves your machine.

Use Cases

🐛 Debugging

Quickly find where a prop value is set or why it's the wrong value.

📚 Understanding Codebases

New to a project? Trace props to understand component relationships.

♻️ Refactoring

See all components affected by a prop before making changes.

🎓 Learning

Understand how data flows through React applications.

Supported Features

✅ Function components

✅ Arrow function components

✅ TypeScript & JavaScript

✅ JSX & TSX files

✅ Props destructuring

✅ Interface/Type definitions

✅ Spread operators (marked as ambiguous)

Roadmap

[ ] Server Component awareness
[ ] Multi-prop tracing
[ ] Context API support
[ ] Redux/Zustand state tracing
[ ] Export flow diagrams
[ ] Graph visualization mode
[ ] Full-stack data flow visualization

Try It Out

PropFlow is completely free and open source.

VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=rutpshah.propflow
GitHub: https://github.com/rutpshah/propflow
License: MIT

If you find it useful, a ⭐ on GitHub helps!

Feedback

What would make PropFlow more useful for you?

Leave a comment below or open an issue on GitHub.

Happy prop tracing! 🚀

PropFlow: Visual Prop Tracing for React, Next.js & Remix

Rut Shah — Wed, 04 Feb 2026 09:48:27 +0000

The Problem

You're debugging a React application. A button's theme color is wrong. You need to find where type is coming from.

You search your codebase. 47 results. 😫

You start tracing manually:

NotificationBanner receives it from WelcomeCard
WelcomeCard receives it from MainContent
MainContent receives it from Dashboard

And so on...

20 minutes later, you find the issue.

There has to be a better way.

Introducing PropFlow

PropFlow is a VS Code extension that traces React props instantly.

Hover over any prop → see its complete journey from source to usage.

Features

🔍 Instant Prop Tracing

Place your cursor on any prop and run "PropFlow: Show PropFlow Lineage" (or use the CodeLens button).

PropFlow analyzes your component tree and shows you:

🟢 SOURCE: Where the prop originates
🔵 USAGE: Components passing it through
🟣 DEFINITION: Where you're currently viewing it

🗺️ Visual Flowcharts

Hover over any prop to see an inline ASCII flowchart:

🟢 App (SOURCE)
└─ prop: "notificationVariant"
↓
🔵 Dashboard (USAGE)
└─ prop: "alertType"
...
↓
🟣 NotificationBanner (DEFINITION)
└─ prop: "type"

🔗 Click-to-Navigate

Every component in the chain is clickable. Jump directly to the file and line where it's defined.

⚡ Real-Time Updates

As you edit your code, PropFlow updates instantly. No need to save files.

📊 PropFlow Lineage Panel

View the complete prop chain in a dedicated sidebar panel. Click any component to navigate.

Installation

Open VS Code
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Search for "PropFlow"
Click Install

Or install from the [VS Code Marketplace] - https://marketplace.visualstudio.com/items?itemName=rutpshah.propflow

Usage

Method 1: Command Palette

Place cursor on a prop name
Press Ctrl+Shift+P (Cmd+Shift+P on Mac)
Type "PropFlow: Show Prop Lineage"
View results in PropFlow Lineage panel

Method 2: CodeLens

Look for "⬆ Trace Props" above component definitions
Click it
Select prop from dropdown
View trace

Method 3: Hover

Hover over any prop in your component
See inline flowchart
Click components to navigate

How It Works

PropFlow uses TypeScript's Compiler API (ts-morph) to:

Parse React components into Abstract Syntax Trees
Extract prop definitions from function parameters
Search workspace for JSX usages
Build complete prop lineage chains

All processing happens locally. Your code never leaves your machine.

Use Cases

🐛 Debugging

Quickly find where a prop value is set or why it's the wrong value.

📚 Understanding Codebases

New to a project? Trace props to understand component relationships.

♻️ Refactoring

See all components affected by a prop before making changes.

🎓 Learning

Understand how data flows through React applications.

Supported Features

Roadmap

[ ] Server Component awareness
[ ] Multi-prop tracing
[ ] Context API support
[ ] Redux/Zustand state tracing
[ ] Export flow diagrams
[ ] Graph visualization mode
[ ] Full-stack data flow visualization

Try It Out

PropFlow is completely free and open source.

VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=rutpshah.propflow
GitHub: https://github.com/rutpshah/propflow
License: MIT

If you find it useful, a ⭐ on GitHub helps!

Feedback

What would make PropFlow more useful for you?

Leave a comment below or open an issue on GitHub.

Happy prop tracing! 🚀

PropFlow: A VSCode Extension to Visualize React Prop Drilling

Rut Shah — Tue, 27 Jan 2026 15:56:00 +0000

PropFlow: End the Prop Drilling Detective Work

The Problem: The 10-File Treasure Hunt

You're debugging a React app. A prop has the wrong value. You know where it's used, but not where it comes from.

So you start clicking:

<Button> receives variant → Check parent
<Card> passes variant={variant} → Check its parent
<Dashboard> passes variant={type} → Wait, it's renamed! Check its parent
<App> passes type="primary" → Finally found it!

10 minutes later, you've mentally reconstructed a component tree just to trace one prop.

There had to be a better way.

The Solution: Hover and See

PropFlow is a VS Code extension that shows you the complete propflow lineage in a hover tooltip:

🟢 App (SOURCE)
    └─ prop: "primary"
        ↓
    🔵 Dashboard  
        └─ prop: "type" → renamed to "variant"
            ↓
    🔵 Card
        └─ prop: "variant" (passed through)
            ↓
    🟣 Button
        └─ prop: "variant" (CURRENT)

One hover. Complete visibility.

Features

1. Instant Prop Tracing

Hover over any prop in a React component to see:

Where it originates (the SOURCE)
Every component in the chain
How it's renamed or transformed
Which components just pass it through

2. Visual Flowchart

Color-coded nodes make it obvious:

🟢 SOURCE = Where the data originates (literal value)
🔵 USAGE = Pass-through component
🟣 DEFINITION = Current component receiving the prop

3. Click-to-Navigate

Each component in the flowchart is clickable. Jump directly to the file and line where the prop is passed.

4. Handles Edge Cases

✅ Prop renaming: <Child title={props.name} />
✅ Spread operators: <Child {...props} />
✅ Destructured props: function Button({ label, onClick })
✅ Default exports, named exports, aliases

5. Sidebar Tree View

For deeper analysis, open the PropFlow Lineage sidebar to see the full tree structure with expand/collapse.

How It Works

PropFlow uses static analysis to trace props:

AST Parsing with ts-morph to understand component structure
Workspace Search to find JSX usages: <ComponentName prop={...} />
Graph Building to construct the parent → child chain recursively
VS Code APIs for hover providers, tree views, and navigation

No runtime overhead. It only analyzes when you hover or request a trace.

Installation

From Marketplace

Search for "PropFlow" in the Extensions panel.
Visit: https://marketplace.visualstudio.com/items?itemName=rutpshah.propflow

Usage

Method 1: Hover (Fastest)

Open a React component file
Hover over any prop in the function parameters
See the complete flow instantly

Method 2: Command Palette

Place cursor on a prop
Ctrl+Shift+P → "PropFlow: Show Lineage"
View the tree in the sidebar

Method 3: CodeLens

Click the "⬆ Trace Props" link that appears above component definitions.

Example

File: Button.tsx

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

File: Card.tsx

import { Button } from './Button';

function Card({ title, buttonLabel }) {
  return (
    <div>
      <h2>{title}</h2>
      <Button label={buttonLabel} onClick={() => {}} />
    </div>
  );
}

File: App.tsx

import { Card } from './Card';

function App() {
  return <Card title="Welcome" buttonLabel="Click Me" />;
}

Hover over label in Button.tsx:

🟢 App (SOURCE)
    └─ prop: "Click Me"
        ↓
    🔵 Card
        └─ prop: "buttonLabel" → renamed to "label"
            ↓
    🟣 Button
        └─ prop: "label" (CURRENT)

Performance

PropFlow is designed for large codebases:

⚡ Sub-second tracing for chains up to 5 levels deep
🔋 Pull-based model (only analyzes on demand)
🎯 Leverages VS Code's native language server for fast lookups
📦 Minimal memory footprint (~2-3 MB)

Tested on projects with 10,000+ files.

Known Limitations (v1.0)

PropFlow currently does not trace:

Context API (useContext)
Redux/Zustand store connections
Class components (function components only)
Dynamic/runtime prop values
Props from external libraries (stops at the boundary)

These are on the roadmap for future releases!

Tech Stack

TypeScript for type safety
ts-morph for AST parsing
VS Code Extension API for IDE integration
Mocha for testing

Contributing

PropFlow is open source (MIT License) and welcomes contributions!

GitHub: https://github.com/rutpshah/propflow

Ideas for Contribution:

Add Context API tracing
Support Vue/Angular components
Add "Find all usages of this prop" command
Improve spread operator detection
Add configuration options

Roadmap

v1.1

[ ] Context API support
[ ] Redux store tracing
[ ] Performance improvements for monorepos
[ ] Customizable color schemes

v1.2

[ ] Class component support
[ ] Prop documentation in hover
[ ] Export flow diagrams as images
[ ] Multi-root workspace support

v2.0

[ ] Vue.js support
[ ] Angular component tracing
[ ] Real-time collaboration features

Why I Built This

After 16+ years in frontend development, I've spent countless hours tracing props through component trees. Every team I've worked with has faced this challenge.

Most solutions require external tools, browser extensions, or runtime instrumentation. I wanted something native to VS Code, zero-configuration, and instant.

PropFlow is my attempt to save every React developer those frustrating 10-minute debugging sessions.

Try It Today

If you've ever:

Lost time tracing prop drilling
Wished you could see data flow at a glance
Struggled onboarding to a large React codebase

Give PropFlow a try. I'd love your feedback!

Install: https://marketplace.visualstudio.com/items?itemName=rutpshah.propflow
Source: https://github.com/rutpshah/propflow
Issues/Feature Requests: https://github.com/rutpshah/propflow/issues

What's your biggest pain point with React component data flow? Let me know in the comments!