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

- **ID:** `react/missing-dependency-array-useEffect`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 85%

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

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| React 16.8+ | active | — | — |
| React 17.x | active | — | — |
| React 18.x | active | — | — |
| ESLint plugin react-hooks v4.x | active | — | — |

## Workarounds

1. **Add the missing variable to the dependency array. Example: useEffect(() => { console.log(data); }, [data]);** (90% success)
   ```
   Add the missing variable to the dependency array. Example: useEffect(() => { console.log(data); }, [data]);
   ```
2. **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]);** (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]);
   ```
3. **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); }, []);** (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); }, []);
   ```

## Dead Ends

- **Adding // eslint-disable-next-line react-hooks/exhaustive-deps to suppress the warning without fixing the dependency.** — Suppressing the warning can lead to stale data in effects, causing bugs that are hard to trace, especially in complex state logic. (80% fail)
- **Removing the dependency array entirely (useEffect(() => { ... })) to run the effect on every render.** — This can cause performance issues and infinite loops if the effect triggers state updates, and it may not be the intended behavior. (70% fail)
- **Moving the variable outside the component to make it a constant (if it's not meant to change).** — 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. (60% fail)