react build_error ai_generated true

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

ID: react/missing-exhaustive-deps

Also available as: JSON · Markdown · 中文
90%Fix Rate
85%Confidence
1Evidence
2023-04-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
eslint-plugin-react-hooks 4.6.0 active — — —
React 18.2.0 active — — —

Root Cause

The exhaustive-deps ESLint rule detects that a variable used inside useEffect is not listed in its dependency array, potentially leading to stale closures or missed updates.

generic

中文

exhaustive-deps ESLint规则检测到在useEffect内部使用的变量未在其依赖项数组中列出，可能导致过时闭包或错过更新。

Official Documentation

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

Workarounds

  1. 90% success Add the missing variable to the dependency array. If the variable is a function, wrap it in useCallback first. 
    Add the missing variable to the dependency array. If the variable is a function, wrap it in useCallback first.
  2. 85% success If the variable is not meant to be reactive (e.g., a stable reference), use useRef to store it and access via .current. 
    If the variable is not meant to be reactive (e.g., a stable reference), use useRef to store it and access via .current.

中文步骤

  1. Add the missing variable to the dependency array. If the variable is a function, wrap it in useCallback first.
  2. If the variable is not meant to be reactive (e.g., a stable reference), use useRef to store it and access via .current.

Dead Ends

Common approaches that don't work:

  1. Adding // eslint-disable-next-line react-hooks/exhaustive-deps without understanding the dependency 80% fail

    Suppressing the warning does not fix the underlying stale closure bug; it only hides the lint error.

  2. Removing the dependency array entirely ([] to undefined) 70% fail

    Without a dependency array, the effect runs after every render, which can cause performance issues and infinite loops if it updates state.

  3. Using useRef to store the variable and reading from ref inside the effect 40% fail

    This works but is often unnecessary and can be confusing; it also bypasses the reactive nature of the variable.