react-typescript-patterns

# React + TypeScript Patterns ## Overview The compiler is your first test. The recurring defects are `any`/`as` casts that hide type errors, `useEffect` used where a derived value or event handler belongs, and state that should have been derived. **Core principle:** Type at the source, derive over effect, functional components only. ## Rules - **Functional components with hooks** — no class components. - **Explicit, exported props interfaces** next to the component. Never `any`; avoid `as` casts — fix the type at the source. - **Named exports** for pages/components; colocate feature code under `web/src`. - **Derive state** where possible; `useState` for genuinely local state; lift to a hook only when multiple components need it. - **Effects are a last resort.** Prefer event handlers and derived values. Every `useEffect` has a correct dependency array and a cleanup when it subscribes/allocates. - **Type all API responses** with interfaces matching the backend JSON — the compiler is your contract test. ## Worked Example ```tsx // ❌ effect + state to compute something derivable; `any` hides the shape const [fullName, setFullName] = useState(""); useEffect(() => { setFullName(user.first + " " + user.last); }, [user]); // ✅ derived value, typed interface Props { user: User } export function UserBadge({ user }: Props) { const fullName = `${user.first} ${user.last}`; // derived, no state, no effect return <span>{fullName}</span>; } ``` The derived version has no effec...