React best practices

Use when writing or reviewing React components (especially React 19), hooks, and client/server boundaries.

Components and state

• Prefer composition over deep prop drilling; use context sparingly and only for stable, narrow data.
• Colocate state where it’s used; lift only when multiple children need read/write.
• Derived state: compute from props/state in render instead of mirroring in useState + useEffect.
• Keys: stable ids for lists; avoid array index as key when order or content changes.

Effects

• useEffect is for synchronization with the outside world, not for “do this when X changes” that could be event-driven or derived.
• Specify correct dependency arrays; eslint exhaustive-deps is a signal, not noise.
• Cleanup subscriptions, listeners, and timers in the effect return.

Performance