React best practices

These rules are for browser (client) rendering. Apply them when writing or changing React that runs in the browser. They are not for server-side rendering. Do not apply them to Next.js or other SSR stacks (React Server Components, server actions, server-only data fetching, or server-rendered pages).

Prefer project conventions when they conflict; discover them first (package.json, ESLint/Biome React plugins, React Compiler config, existing components).

Defaults

1. Prefer function components and hooks. Do not introduce class components unless the codebase already requires them.
2. Keep components small and focused — one clear responsibility per component.
3. Prefer composition over inheritance and over deep prop drilling when context or a shared hook fits better.
4. Colocate state with the nearest consumer; lift state only when siblings must share it.
5. Match the project's React version APIs and patterns (Compiler, router, data library).

Components & JSX