react-frontend

# React Frontend ## 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 | Call onChange in event handler, or fully controlled component | | Chain of state updates | Calculate all next state in one event handler | | Sync with external system | Effect with cleanup | **Effect rules:** - Ne...