ia-react-frontendlisted

# React Frontend **Verify before implementing**: For App Router patterns, React 19 APIs, or version-specific behavior, look up current docs via Context7 (`query-docs`) before writing code. Training data may lag current releases. ## Component TypeScript - Extend native elements with `ComponentPropsWithoutRef<'button'>`, add custom props via intersection - Use `React.ReactNode` for children, `React.ReactElement` for single element, render prop `(data: T) => ReactNode` - Discriminated unions for variant props -- TypeScript narrows automatically in branches - Generic components: `<T>` with `keyof T` for column keys, `T extends { id: string }` for constraints - Event types: `React.MouseEvent<HTMLButtonElement>`, `FormEvent<HTMLFormElement>`, `ChangeEvent<HTMLInputElement>` - `as const` for custom hook tuple returns - `useRef<HTMLInputElement>(null)` for DOM (use `?.`), `useRef<number>(0)` for mutable values - Explicit `useState<User | null>(null)` for unions/null - useReducer actions as discriminated unions: `{ type: 'set'; payload: number } | { type: 'reset' }` - useContext null guard: throw in custom `useX()` hook if context is null ## Effects Decision Tree Effects are escape hatches -- most logic should NOT use effects. | Need | Solution | |------|----------| | Derived value from props/state | Calculate during render (useMemo if expensive) | | Reset state on prop change | `key` prop on component | | Respond to user event | Event handler | | Notify parent of state change |