react-best-practices

Use React useEffect as an escape hatch to synchronize with external systems like data fetching, subscriptions, or event listeners, not for core component logic. Effects manage external integrations and cleanup, keeping reactive logic separate from rendering.

Avoid stale closures in React hooks by maintaining strict dependency discipline, using updater patterns for state changes, and applying useEffectEvent to stabilize non-reactive logic. Proper dependency arrays ensure effects capture current values without recreating objects.

Common React anti-patterns include deriving state during render, chaining excessive effects, and recreating objects inside effects. These pitfalls cause unnecessary re-renders and bugs; use composition and focused custom hooks to avoid them.

Stabilize non-reactive event handlers in React using useEffectEvent to isolate logic from reactive dependencies. This technique ensures callback stability across renders without adding variables to dependency arrays, preventing unnecessary effect executions.

Yes, apply these React patterns when refactoring functional .tsx or .jsx components. The guidelines support everyday development tasks including building, reviewing, and refactoring component code to reduce bugs and enforce proper hooks, refs, and memoization usage.

Structure custom hooks as focused, reusable functions to promote composition over prop drilling. This pattern enforces controlled versus uncontrolled component designs and ensures effects, refs, and memoization integrate cleanly without anti-patterns.