# TypeScript + React Code Review

Review {{input}} for code quality, correctness, and best practices.

## TypeScript
- Avoid `any`; use explicit prop types and enable `strict: true`
- Type component props with `interface`; use discriminated unions for variant components
- Avoid `as` assertions in event handlers and data-fetching code without runtime checks

## React Correctness
- `useEffect` dependency arrays must be complete — missing deps cause stale closure bugs
- Never mutate state directly; always return new objects/arrays from state updaters
- Avoid setting state in render; derive values with `useMemo` where appropriate
- Keys in lists must be stable and unique — never use array index as key in dynamic lists

## Performance
- Wrap expensive pure computations in `useMemo`; stable callbacks passed as props in `useCallback`
- Split large components; avoid re-rendering large subtrees on unrelated state changes
- Lazy-load routes and heavy components with `React.lazy` + `Suspense`
- Avoid creating objects/arrays/functions inline in JSX props (creates new refs every render)

## Accessibility
- Interactive elements must be keyboard-navigable and have accessible labels (`aria-label` or visible text)
- Images need descriptive `alt` text; decorative images use `alt=""`
- Avoid using `div`/`span` as buttons — use `<button>` or `role="button"` with keyboard handlers

## Security
- Never use `dangerouslySetInnerHTML` with unsanitised content
- Validate and sanitise all user inputs before sending to the server
- No secrets or API keys in client-side code

## Code Quality
- Components should do one thing; extract custom hooks for stateful logic
- Co-locate state as close as possible to where it's used; lift only when necessary
- Tests with React Testing Library; test behaviour not implementation

---
List findings as **Critical** (security/data loss/crashes) -> **Major** (bugs/accessibility failures/broken hooks) -> **Minor** (performance/style). Cite each location and suggest the concrete fix.