Rut Shah

Posted on Jan 27

PropFlow: A VSCode Extension to Visualize React Prop Drilling

#react #typescript #webdev #vscode

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.