INP and Re-Render Forensics from Profiler Artifacts

Tier: Advanced · Workflow area: Performance & debugging

This playbook is the interaction-latency counterpart to pb-34's load-time loop: capture the profile, have AI interpret it, fix the top pathology, and re-profile to prove the interaction got faster.

When to use

• •
  Field INP fails (over 200ms) or specific interactions visibly lag: typing, filtering, opening panels, switching tabs.
• •
  The pb-34 trace showed input delay or long tasks clustered around interactions rather than load.
• •
  A React screen re-renders far more than its state changes justify, and you need to find the storm's source.
• •
  You are reviewing an AI-generated feature (pb-28's render-performance lane) and need to quantify a suspected re-render problem.

Skip it when the slowness is network-bound (the artifact will show waiting, not work) — fix data fetching first.

Prerequisites

• •
  The app running locally in production-mode profiling build (react-dom/profiling or your framework's profile mode). Dev builds exaggerate and distort render costs.
• •
  Chrome DevTools Performance panel and React DevTools Profiler installed and working; CPU throttling (4x) available to simulate the devices where INP fails.
• •
  One or two specific interactions named as targets, with a repeatable script: "focus search, type 'headphones' at normal speed", not "use the app".
• •
  A way to export or screenshot the artifacts — the Performance panel's trace JSON or screenshots of the flame chart, and the Profiler's ranked/flamegraph commit views.

The workflow

1. 1.

   Capture both artifacts for one scripted interaction. With 4x CPU throttle: record a Performance-panel trace while executing the interaction script, then repeat with the React Profiler recording. From the Performance trace note the interaction's INP breakdown — input delay, processing duration, presentation delay — and the long tasks (>50ms) inside it. From the Profiler note commit count, duration of the worst commits, and which components rendered in them.

2. 2.

   Have AI turn the artifacts into a causal chain. Multimodal models read flame-chart and profiler screenshots well; the trace JSON summary or the Profiler's "why did this render" data is even better input:

   Copy

   Attached: (1) the Performance-panel view of one keystroke in our search
   filter — processing duration 380ms, one 290ms task; (2) React Profiler
   flamegraph for the same keystroke — 3 commits, worst 240ms, 412
   components rendered, top self-times listed below.
   Produce a causal chain: event -> state update(s) -> which subtrees
   re-rendered and why (new props? context? parent render?) -> what work
   dominated (render vs effects vs layout). Then name the single highest-
   leverage fix and what artifact evidence would confirm it worked.
   

   Demand the chain reference the artifacts ("the 290ms task is dominated by ProductGrid self-time across 300 rows") and reject free-floating advice.

3. 3.

   Classify the pathology — the fix follows from the class.

   • •
     Wide invalidation — a keystroke re-renders hundreds of components: state lives too high, or a context value is recreated per render. Fix: move state down, split contexts, memoize the provider value.
   • •
     Expensive render — few components, huge self-time: unvirtualized long lists, heavy per-row computation. Fix: useMemo the computation, virtualize with TanStack Virtual, paginate.
   • •
     Synchronous urgency — everything re-renders at input priority: filtering 10k rows on every keystroke. Fix: useTransition/useDeferredValue so typing stays responsive while results lag gracefully.
   • •
     Effect storms — commits trigger effects that set state that trigger commits: object/array deps recreated each render, effect chains. Fix: correct deps, derive instead of syncing state, collapse the chain.
   • •
     Layout thrash / presentation delay — the JS is fine but style recalc and layout dominate, or useLayoutEffect reads force sync layout. Fix: batch reads/writes, CSS containment, move work off the layout path.
4. 4.

   Apply one fix and re-profile the same script. Same throttle, same interaction, both artifacts again. The claim "memoizing ProductRow fixed it" is confirmed by the Profiler showing rows skipped and the Performance panel showing processing duration under 100ms — not by the code looking right. Memoization that "should work" often doesn't because one prop is still a fresh object; the artifact catches that immediately.

5. 5.

   Guard the interaction. Add a regression tripwire: a Playwright test asserting the interaction's responsiveness budget where feasible, React.Profiler onRender logging in development for the hot subtree, and an INP field-data watch. Note the pathology class in the PR so the pattern (not just the instance) enters the team's review vocabulary — pb-28 reviewers should now catch this class in diffs.

Tool variants

• React DevTools Profiler: the invalidation-scope instrument — enable "record why each component rendered" and the model's job gets dramatically easier.
• Chrome DevTools Performance panel + AI assistance: the panel's own AI can explain selected tasks and events in place; use it for "what is this 300ms task" and a chat model for the cross-artifact synthesis.
• chrome-devtools-mcp (pb-34's loop): lets the agent record interaction traces itself — strong for the capture-and-summarize half; the React Profiler half stays manual since it lives in the extension.
• React Compiler: where adopted, it removes much manual-memoization work; this playbook still applies for state placement, transitions, virtualization, and effect storms, which no compiler fixes.
• Non-React equivalents: the pathology taxonomy maps — Vue's reactivity tracking, Compose recomposition counts, SwiftUI's _printChanges — with the same artifact-first discipline.

Verification

• •
  Before/after artifact pairs exist for the scripted interaction under identical throttle; processing duration and commit counts both improved.
• •
  The confirmed causal chain names artifact evidence at each link, and the fix targeted that link.
• •
  INP (lab, then field) crosses under 200ms for the target interaction, without a new pathology appearing in the after-artifacts.
• •
  The regression tripwire is in place and the pathology class is written into the PR.

Pitfalls

• Profiling dev builds. Dev-mode React double-renders and unminified code fabricate pathologies you will "fix" to no effect. Profiling production build, always.
• Memoizing on faith.React.memo with an inline-object prop is a no-op that reads like a fix. The Profiler's "why did this render" answer is the only receipt.
• Sprinkling memoization everywhere. Blanket useMemo/useCallback adds cost and noise; fix the class the artifact identified — often that is moving one piece of state down, worth fifty memos.
• Reaching for transitions to hide expensive work.useTransition restores responsiveness but the work still burns CPU and battery. If the artifact shows avoidable work, avoid it first, then defer what remains.
• Trusting AI's reading of a screenshot too far. Models misread scales and mistake self-time for total time. Verify the numbers it cites against the panel before acting on the chain.
• One unrepresentative capture. A single fast run on an M-series laptop with no throttle says nothing about the Moto G where INP fails. Throttle to the field.

Restricted-environment variant

Profiling artifacts can contain user data (search terms, rendered content in screenshots) and proprietary component names.

• Local capture, summarized sharing: run the app with synthetic data; share component names, timings, and commit counts as text with an in-tenant model rather than raw screenshots where policy requires.
• In-tenant multimodal models: full workflow via Bedrock/Azure endpoints for screenshot-based reading.
• No model: the pathology taxonomy in step 3 is the manual diagnostic key — Profiler's "why did this render" plus the five classes gets a careful engineer to the same chain, more slowly.

Success criteria

• •
  The target interactions meet their budgets under field-representative throttling, confirmed by artifact pairs in the PR.
• •
  Field INP for the affected pages passes and holds through subsequent releases.
• •
  The team diagnoses by artifact reflexively — "show me the commit view" has replaced speculation in performance discussions.
• •
  Review now catches the recurring pathology classes in diffs (inline objects into memoized children, state placed too high) before they ship.