react-useeffect

Use useEffect only for synchronizing React components with external systems, such as subscriptions, analytics side effects, or data fetching. Most other logic like derived state or responding to user events belongs in render or event handlers.

Calculate derived state directly during the render phase instead of using useEffect. Compute values from existing props and state on the fly, or wrap expensive computations in useMemo to prevent unnecessary recalculations on every render cycle.

Reset component state on prop changes by passing a key prop to the component rather than using useEffect. When the key changes, React automatically unmounts and remounts the component, discarding old state cleanly without effect chains.

useEffect causes infinite re-renders when it updates state that triggers the effect again, creating a loop. Break the cycle by removing the effect, using derived render values, or notifying parent components directly from event handlers instead of effects.

Handle user events directly in event handlers rather than useEffect. Effects run after render commits, making them unsuitable for responding to immediate interactions; event handlers execute synchronously and keep logic tied to the specific user action.

useSyncExternalStore replaces useEffect for subscribing to external stores. It handles subscription setup, cleanup, and tearing prevention natively, ensuring components read external data sources consistently without manual effect management.