you-might-not-need-an-effect

Remove unnecessary useEffect hooks by replacing them with render-time state derivation, moving logic to event handlers, or using keyed subtree resets to eliminate redundant state and prevent stale updates.

Use useMemo instead of useEffect for derived data when performing expensive pure calculations, allowing you to cache computed values during render without triggering unnecessary state updates or side effects.

Reset React component state on prop change using keyed subtree resets rather than useEffect, which clears state cleanly by remounting the component with a new key tied to the specific prop.

Subscribe to an external store in React without useEffect by using useSyncExternalStore, which provides a safer and simpler pattern for external synchronization than manual effect-based subscriptions.

You can move fetch data logic out of useEffect by relocating it into event handlers or using guarded fetch cleanup, ensuring network requests are tied directly to user inputs rather than component renders.

useEffect causes stale state updates when it mirrors props or objects into state; replace this pattern by storing IDs instead of mirrored objects or deriving values directly during render.