mir-frontend-reactlisted

# /mir-frontend-react · Make It Right (React reactivity tier) Middle tier. `mir-frontend` decides **what is correct** (any reactive UI); this owns **React's reactivity model**, shared by all React meta-frameworks; the framework module knows the library's mechanics. Load order: `mir-frontend` → `mir-frontend-react` → `<framework module>`. **Runtime assumed:** React 19.2 + React Compiler 1.0 GA available. These footguns apply equally to Next.js 16, React Router 7 (Framework Mode), TanStack Start 1.0, and a Vite SPA. Framework-specific wiring (RSC boundary, Server Actions, hydration, file-based routing, framework caching) lives in the framework module — not here. ## The React reactivity footguns AI walks into (framework-agnostic) ### 1. Rules of Hooks — call order is the identity React ties hook state to **call-site position** in the render sequence. Violating this corrupts state silently or throws at runtime. - Never call hooks **inside conditions, loops, or nested functions** — they must fire in the same order every render. - Never call hooks from a plain (non-component, non-custom-hook) function. - Custom hooks **must start with `use`** — React's linter and the Compiler both treat this as the hook boundary signal. ```tsx // BAD — conditional hook; breaks call order if (isAdmin) { const [x, setX] = useState(0) } // GOOD — always call, branch on result const [x, setX] = useState(0) const visible = isAdmin ? x : null ``` ### 2. Derived state in useState — the #1 React foo