react hook_warning ai_generated true

React Hook useEffect has a missing dependency

ID: react/useeffect-missing-dependency

Also available as: JSON · Markdown
85%Fix Rate
88%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

ESLint exhaustive-deps rule warning. Tricky — blindly adding deps can cause infinite loops.

generic

Workarounds

  1. 90% success Memoize object/array deps with useMemo, or move them inside useEffect 
    // Option 1: Memoize the dep
const options = useMemo(() => ({ url, method }), [url, method]);
useEffect(() => { fetch(options); }, [options]);
// Option 2: Move inside useEffect
useEffect(() => { const opts = { url, method }; fetch(opts); }, [url, method]);

    Sources: https://react.dev/reference/react/useMemo

  2. 85% success Extract the function used in useEffect to useCallback if it's a dep 
    const fetchData = useCallback(async () => {
  const res = await fetch(`/api/${id}`);
  setData(await res.json());
}, [id]);
useEffect(() => { fetchData(); }, [fetchData]);

    Sources: https://react.dev/reference/react/useCallback

Dead Ends

Common approaches that don't work:

  1. Disable the ESLint rule 65% fail

    Hides real bugs — stale closures cause subtle issues

  2. Add all listed deps immediately 55% fail

    Can cause infinite re-render if dep is object/array created in render

Error Chain

Frequently confused with: