React Hooks Best Practices

Practical rules for using hooks in React applications and designing custom hooks across three lenses: DX, optimization, and logic.

When to Apply

Reference these guidelines when:

• Writing React components that use hooks
• Creating or refactoring custom hooks
• Designing hook APIs that are ergonomic and composable
• Reviewing dependencies, effects, refs, state, callbacks, and memoization
• Reviewing hook APIs for unnecessary re-renders
• Reviewing hook internals for stale closures, cleanup, SSR, and lifecycle correctness
• Designing custom hooks that subscribe to high-frequency updates
• Consuming hooks that expose snapshot, callback, and watch() APIs
• Refactoring hooks that update React state on every browser event
• Moving DOM-adjacent work out of React render state