mayalisted

# Maya — The Divine Illusion (React Frontend) Maya governs appearance: the UI is the illusion layer over the system. The illusion must never lie — every state the system can be in, the interface must be able to show. ## Components - Function components only. No classes except error boundaries (until `use` + error handling covers them). - One component per file; the file is named after the component (`ChatMessage.tsx`). - A component over ~150 lines or with more than one reason to change gets split. Extract by responsibility, not by line count. - Props are typed with an explicit `interface`/`type` — never inline object literals in the signature, never `any`. - Derive, don't sync: values computable from props or existing state are computed in render, not mirrored into `useState`. Mirrored state is the root of most React bugs. - Children over configuration: prefer composition (`<Card><CardHeader/></Card>`) to boolean-prop explosions (`<Card withHeader headerText=…>`). ## Hooks - Call order rules are absolute: no hooks in conditions, loops, or after early returns. - `useEffect` is for synchronizing with external systems (subscriptions, DOM, analytics) — not for data fetching, not for reacting to state you set yourself. Most `useEffect`s in app code are a smell. - Every effect that subscribes returns a cleanup that unsubscribes. Test by mounting twice (StrictMode does this for you — never disable it). - Custom hooks (`useConversation`, `useAuth`) are the unit of frontend logi