Effect Pitfalls Common Effect Pitfalls
Last updated: 2026-11-02
Effect Pitfalls Common Effect Pitfalls
The pitfalls of useEffect cluster around the dependency array: a missing dependency reads a stale value, calling setState inside an Effect that also depends on that state causes an infinite loop, an object or function dependency is a fresh reference on every render, and forgetting the cleanup stacks duplicate listeners. Recognize these four classes of problem and most Effects become safe, because the Effect body finally does only what its name promises.
| Group | Routing & State Mgmt |
|---|---|
| Kind | Pattern |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
useEffect(() => {
document.title = 'Current ' + count + ' times' // ① if you use count, declare it as a dependency
}, [count]) // ② dependency array: re-run only when it changes
useEffect(() => {
const id = setInterval(tick, 1000)
return () => clearInterval(id) // ③ clean up on unmount to avoid stacking
}, [])Returns：No return value; this is a coding pattern rather than a callable API.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
The list updates as you type, and the Effect run counter only increments when query changes; below it spells out the consequences of the three big pitfalls: a missing dependency, an infinite loop and an object dependency.💡 Key Points
🏷️ More Routing & State
💡 Related Cases
📚 Related Tutorials
❓ FAQ
