command-center/agent/managed-skills/react-prod-state-mismatch-bisection/SKILL.md

name, description

name	description
react-prod-state-mismatch-bisection	Diagnose React SPA prod-build state mismatches (state-derived props update but sibling output stays stale) by driving a real browser and bisecting per-render state via throwaway source instrumentation.

Prod React state-mismatch bisection

Use when a built SPA shows an internally inconsistent DOM — e.g. aria-current flips while a sibling conditional slot stays stale, a click handler runs with zero network activity, jsdom tests pass but the prod journey fails. Reasoning from source fails here; only per-render state truth resolves it.

Steps

1. Drive the real browser, not tests. Throwaway @playwright/test chromium script beside the package that installs it (e.g. tests/), seeded via direct API calls + cookie injection:

   import { chromium } from "@playwright/test";   // resolve from tests/ node_modules
   const ctx = await browser.newContext();
   await ctx.addCookies([{ name, value, domain: "127.0.0.1", path: "/" }]);
   page.on("console", ...); page.on("pageerror", ...); page.on("request", ...);
   

   Run it from that directory; a script at repo root or /tmp hits ERR_MODULE_NOT_FOUND for workspace deps.

2. Fiber prop probe — call the handler outside React events to split "delegation dead" from "handler wrong", and read the props the fiber holds:

   await page.evaluate(() => {
     const el = document.querySelector('[data-testid^="thing-"]');
     const key = Object.keys(el).find((k) => k.startsWith("__reactProps$"));
     el[key].onClick();          // or .onChange({target:{value:"x"}})
   });
   

3. If props updated but output is inconsistent, suspect falsy-equality, not React. undefined === undefined yields "true" for el.id === selectedId highlights — a fake "state updated" signal. Dump the slot's raw innerHTML, don't trust the derived attribute.

4. Instruments beats deduction: insert temporary console.logs in the component source (one in each state-mutating callback, one at render logging the state), rebuild, restart the server, re-run the script. Compare per-render values — the render where the value is undefined instead of the id names the root cause (usually a server payload keyed differently than the client type, e.g. DB row key orgId crossing HTTP where the contract says id).

5. Also grep every suite teardown for broad DELETE ... LIKE/TRUNCATE on the shared DB when a test flakes only under uncached concurrent runs (turbo run test --force) and passes isolated: parallel vitest files on one DB — the suite that finishes first FK-cascades away the other's live sessions; the symptom is a spurious 401 (or missing row) in the still-running file. Fix by namespacing emails/ids per suite and scoping teardowns to rows the suite created.

Cleanup

Remove instrumentation, move the throwaway script to .AGENTTRASH/, never commit the debug script. Verified on franksign: GET /api/orgs leaked orgId where the client contract was id (fake aria-current true, silent auto-select failure).