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

- **ID:** `react/missing-exhaustive-deps`
- **Domain:** react
- **Category:** build_error
- **Verification:** ai_generated
- **Fix Rate:** 90%

## 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.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| eslint-plugin-react-hooks 4.6.0 | active | — | — |
| React 18.2.0 | active | — | — |

## Workarounds

1. **Add the missing variable to the dependency array. If the variable is a function, wrap it in useCallback first.** (90% success)
   ```
   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.** (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.
   ```

## Dead Ends

- **Adding // eslint-disable-next-line react-hooks/exhaustive-deps without understanding the dependency** — Suppressing the warning does not fix the underlying stale closure bug; it only hides the lint error. (80% fail)
- **Removing the dependency array entirely ([] to undefined)** — Without a dependency array, the effect runs after every render, which can cause performance issues and infinite loops if it updates state. (70% fail)
- **Using useRef to store the variable and reading from ref inside the effect** — This works but is often unnecessary and can be confusing; it also bypasses the reactive nature of the variable. (40% fail)