react-codelisted

# React Code Write and edit React components, pages, routes, hooks, and forms following project conventions. ## Pre-Flight Gates Most hook bugs come from misidentifying the type of problem being solved. Before writing or editing hooks, run through these gate, it only applies when the relevant pattern is present in your changes. ### Gate 1: Hook Check **Before writing `useEffect`:** 1. Can I calculate this during render? → Derive inline or `useMemo`, no Effect needed. 2. Does this respond to a user action? → Put it in the event handler, no Effect needed. 3. Am I syncing state to other state? → Derive it; remove the redundant state, no Effect needed. 4. Am I notifying a parent of a state change? → Call both setters in the handler, no Effect needed. 5. Do I need to reset child state when a prop changes? → Use `key`, no Effect needed. 6. Am I synchronizing with an external system (browser API, third-party widget, network)? → Effect is appropriate here. Add cleanup. For data fetching, include an `ignore` flag. **Before writing `useCallback`:** Only use when the function is: 1. Passed as a prop to a `memo`-wrapped component 2. A dependency of `useEffect`, `useMemo`, or another `useCallback` 3. Passed to a child that uses it in a hook dependency array If none apply, skip `useCallback`, it adds indirection without benefit. **`useState` type inference:** Omit explicit type when inferable from the default value. Only add types for `null` initial values, unions, or complex ob