react-patterns

Use useEffect for external synchronization like API calls and subscriptions, compute derived values directly in render, and handle user actions in event handlers to maintain React render purity and avoid anti-patterns.

React renders must be pure, meaning no side effects should occur during render. Move external interactions into useEffect, compute derived values directly, and handle user actions in event handlers to fix impure renders.

Use useMemo and useCallback to stabilize values and functions across React renders, which helps avoid unnecessary re-renders and improves performance. Apply these hooks when passing stable references to child components is necessary for optimization.

Properly clean up external subscriptions in React useEffect by returning a cleanup function from the effect. This ensures that when the component unmounts or updates, listeners are removed and resources are released, preventing memory leaks.

Avoid deriving state inside React effects by computing values directly during render. If the derived value is expensive, use useMemo. Reserve useEffect for external synchronization, not for calculating state from other state variables.

The right React hook for managing a mutable value that doesn't trigger re-renders is useRef. It allows you to persist values across renders without causing the component to update when the value changes, ideal for DOM interactions.