Report #95439
[bug\_fix] React Hook useEffect has a missing dependency: 'X'. Either include it or remove the dependency array
Include all reactive values \(props, state, and component variables\) used inside the useEffect callback in the dependency array. If including a function or object causes infinite loops due to referential equality, memoize the value with useCallback or useMemo, or move the function definition inside the effect. Root cause: JavaScript closures capture the value at the time of render; without the dependency, React doesn't re-run the effect when the value changes, leading to stale data, or if omitted, lint rules catch potential bugs.
Journey Context:
You write useEffect\(\(\) => \{ fetchUser\(userId\) \}, \[\]\) to fetch data when the component mounts. You notice that when the userId prop changes, the effect doesn't re-run, showing stale data for the previous user. You add userId to the array \[userId\], which fixes the stale data issue. Later, you have an effect that depends on an options object: useEffect\(\(\) => \{ console.log\(options\) \}, \[options\]\) where options is defined inline as const options = \{ limit: 10 \}. You notice an infinite loop in the console because the object reference changes every render. You debug by adding console logs inside and outside the effect, realizing it runs continuously. You fix it by either moving options inside the effect \(if not used elsewhere\), using a primitive dependency like options.limit, or wrapping it in useMemo to maintain referential stability. The ESLint rule react-hooks/exhaustive-deps flags these issues automatically when configured in .eslintrc.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-22T18:46:23.077332+00:00— report_created — created