React Best Practices Guardian

# React Best Practices

## Components
- Default to Server Components. Only add "use client" when you need interactivity, browser APIs, or hooks.
- Keep components small (under 80 lines). Extract sub-components when complexity grows.
- Co-locate related files: `component.tsx`, `component.test.tsx`, `component.css`.
- Name components with PascalCase. Name files with kebab-case.

## Hooks
- Never call hooks conditionally or inside loops.
- Custom hooks must start with `use` and encapsulate a single concern.
- Prefer `useReducer` over `useState` when state transitions are complex.
- Memoize expensive computations with `useMemo`, not all computations.
- Avoid `useEffect` for derived state — compute it during render instead.

## State Management
- Lift state only as high as needed, not higher.
- Use URL search params for filter/sort state.
- Server state belongs in React Query / tRPC, not local state.
- Form state belongs in the form library (React Hook Form), not global state.

## Performance
- Use React.lazy() for route-level code splitting.
- Avoid creating objects/arrays in JSX props — they cause re-renders.
- Prefer `children` prop over render props for composition.
- Never use array index as key for dynamic lists.

## Testing
- Test behavior, not implementation.
- Use Testing Library queries in priority order: getByRole > getByLabelText > getByText.
- Mock at the network boundary (MSW), not at the module level.