react runtime_error ai_generated true

React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array.

ID: react/missing-dependency-array-useEffect

Also available as: JSON · Markdown · 中文
85%Fix Rate
87%Confidence
1Evidence
2023-03-10First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
React 16.8+ active — — —
React 17.x active — — —
React 18.x active — — —
ESLint plugin react-hooks v4.x active — — —

Root Cause

The useEffect callback references a variable (e.g., 'data') that is not listed in its dependency array, causing stale closures or missing updates.

generic

中文

useEffect 回调引用了变量（例如 'data'），但该变量未列在其依赖数组中，导致闭包过时或更新缺失。

Official Documentation

https://react.dev/reference/react/useEffect#specifying-reactive-dependencies

Workarounds

  1. 90% success Add the missing variable to the dependency array. Example: useEffect(() => { console.log(data); }, [data]); 
    Add the missing variable to the dependency array. Example: useEffect(() => { console.log(data); }, [data]);
  2. 85% success If the variable is a function or object that shouldn't trigger re-runs, wrap it in useCallback or useMemo and include the stable reference. Example: const stableFn = useCallback(() => { ... }, []); useEffect(() => { stableFn(); }, [stableFn]); 
    If the variable is a function or object that shouldn't trigger re-runs, wrap it in useCallback or useMemo and include the stable reference. Example: const stableFn = useCallback(() => { ... }, []); useEffect(() => { stableFn(); }, [stableFn]);
  3. 80% success If the effect should only run once (on mount), ensure it doesn't reference any external variables, or use refs to access current values without re-running. Example: const dataRef = useRef(data); dataRef.current = data; useEffect(() => { console.log(dataRef.current); }, []); 
    If the effect should only run once (on mount), ensure it doesn't reference any external variables, or use refs to access current values without re-running. Example: const dataRef = useRef(data); dataRef.current = data; useEffect(() => { console.log(dataRef.current); }, []);

中文步骤

  1. 将缺少的变量添加到依赖数组中。示例：useEffect(() => { console.log(data); }, [data]);
  2. 如果变量是函数或对象，不应触发重新运行，请将其包装在 useCallback 或 useMemo 中，并包含稳定引用。示例：const stableFn = useCallback(() => { ... }, []); useEffect(() => { stableFn(); }, [stableFn]);
  3. 如果 effect 应仅运行一次（挂载时），确保它不引用任何外部变量，或使用 refs 访问当前值而不重新运行。示例：const dataRef = useRef(data); dataRef.current = data; useEffect(() => { console.log(dataRef.current); }, []);

Dead Ends

Common approaches that don't work:

  1. Adding // eslint-disable-next-line react-hooks/exhaustive-deps to suppress the warning without fixing the dependency. 80% fail

    Suppressing the warning can lead to stale data in effects, causing bugs that are hard to trace, especially in complex state logic.

  2. Removing the dependency array entirely (useEffect(() => { ... })) to run the effect on every render. 70% fail

    This can cause performance issues and infinite loops if the effect triggers state updates, and it may not be the intended behavior.

  3. Moving the variable outside the component to make it a constant (if it's not meant to change). 60% fail

    If the variable is supposed to be dynamic (e.g., from props or state), moving it outside defeats the purpose and can cause incorrect behavior.