React useEffect Misuse: 5 Patterns That Break UI
Patch components to eliminate derived state, split overloaded effects, add missing dependencies, compute values during render, and enable React 18 Strict Mode for early detection.
Refactor components to compute derived values during render, split effects by responsibility, add missing dependency arrays, remove unnecessary useEffect calls, and enable React 18 Strict Mode to catch bugs early.
Summary
React's useEffect hook is often misused, leading to subtle bugs that surface only under rapid navigation.
The article identifies five common patterns responsible for 90% of these issues: deriving state inside useEffect, overloading a single effect with unrelated logic, missing or suppressed dependencies, unstructured fetches, and unnecessary use of useEffect when a value can be computed directly. It explains how each pattern causes extra renders, stale data flashes, or hidden coupling between unrelated concerns. The author demonstrates a refactor that splits a monolithic effect into three focused effects, adds proper dependency arrays, and removes derived state by computing values during render. React 18's Strict Mode is highlighted as a tool that can surface many of these bugs in development by double‑mounting components. The article also provides a concise checklist for developers to audit their components for these patterns. By following the suggested refactor, developers can eliminate data flashes, reduce render cycles, and improve component reliability. The piece concludes with a mental model that encourages treating useEffect as a synchronization primitive rather than a general‑purpose utility.
Key changes
- Derived state inside useEffect causes extra renders
- Overloading a single effect with unrelated logic leads to hidden coupling
- Missing or suppressed dependencies prevent updates
- Unstructured fetches create stale data flashes
- Unnecessary useEffect calls can be replaced with direct computation