Skip to content

Surface specific changed prop/state/hook keys in profiling outputΒ #18

@piotrski

Description

@piotrski

Problem

During profiling, the ChangeDescription from React DevTools contains the specific prop names, state keys, and hook indices that changed per commit. But describeCauses() in profiler.ts collapses this into generic labels like "props-changed" or "state-changed", discarding the useful detail.

What we have (in ChangeDescription)

props: ["onClick", "className"]   // which prop names changed
state: ["isOpen", "count"]        // which state key names changed
hooks: [0, 2]                     // which hook indices changed

What we currently output

causes: props-changed, state-changed

What we should output

@c5 [fn] "TodoItem"  2.1ms  props: onClick, className
@c8 [fn] "Counter"   0.3ms  state: count  hooks: #0

Proposed solution

  1. Extend RenderCause or add a parallel field to carry the specific keys alongside the cause type
  2. Update describeCauses() to preserve key names and hook indices
  3. Update formatters (formatProfileReport, formatSlowest, formatRerenders, formatCommitDetail) to display the specific keys
  4. Keep the data compact β€” just key names, not values (values aren't available from the profiling protocol)

Files to change

  • src/types.ts β€” extend ChangeDescription flow or ComponentRenderReport to carry key details
  • src/profiler.ts β€” update describeCauses() and report generation
  • src/formatters.ts β€” update profiling formatters to show key names
  • src/__tests__/profiler.test.ts β€” update tests
  • src/__tests__/formatters.test.ts β€” update tests

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions