Optimize renders

1. Create a clean window

npx @genie-react/cli call react_clear_renders '{}'

Drive one exact interaction in the browser and wait for its visible success condition. Use a named session so the read and the action target the same app.

2. Rank the work

npx @genie-react/cli call react_get_renders \
  '{"sort":"selfTime","limit":10}'

Selected response fields, with illustrative IDs and timings:

{
  "commits": 4,
  "summary": { "totalRenders": 24, "totalUpdates": 24 },
  "components": [
    {
      "id": 81,
      "name": "Button",
      "renders": 4,
      "updates": 4,
      "selfTime": 0.2,
      "cumulativeSelfTime": 0.6
    }
  ]
}

selfTime ranks the slowest single render. Compare cumulativeSelfTime when repeated small renders are the larger cost. Read coverage and omittedByLimit before drawing conclusions from the list.

3. Read the cause

npx @genie-react/cli call react_render_causes \
  '{"component":"Button","limit":20}' --json

Look for an exact prop, state, Context, Query, Router, child, or mount cause. Treat an inferred parent cause as a lead, not proof.

4. Check the whole cohort

For every mounted Button instance:

npx @genie-react/cli call react_component_cohort \
  '{"component":"Button","exact":true,"limit":100}' --json

This separates updated, mounted-idle, unmounted, and absent instances. Check omittedByLimit before calling the list complete.

5. Make the smallest fix

Examples:

Move a changing Context value closer to its consumers.
Stop recreating a callback or object when the exact changed path proves it matters.
Narrow a Query or Router subscription.
Remove a state write that repeats the same value.

Choose a fix only after the observed changed input explains the cost.

6. Verify behavior and cost

Run the same browser flow. Check visible output, DOM, ARIA, focus, URL, requests, and transitions. Then use repeated captures to prove the runtime change.

Finish with the component and source location, observed cause and confidence, before/after evidence, and the visible behavior check. If coverage is incomplete, state which claim it prevents.