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.