Warning: React hook useEffect has a missing dependency

Educational use only. Content explains errors and defensive fixes for systems you own or are authorised to test. Do not use any technique here to access data, accounts, or networks without permission.

Root Cause

This warning is generated by the `eslint-plugin-react-hooks` linter. It occurs when variables, props, or functions defined outside the `useEffect` hook are used inside it, but are not included in the dependency array (the second argument of `useEffect`). React relies on this array to know when to re-run the effect. If a dependency is missing, the effect might capture a 'stale' closure, meaning it will use an outdated version of the variable, leading to subtle bugs where the UI does not reflect the current state.

Fix / Solution

The best practice is to always include all variables used inside the effect in the dependency array. If adding a function causes infinite loops, wrap that function definition in `useCallback`. If adding an object causes loops, wrap its creation in `useMemo`. Never simply ignore the warning by removing the dependency array, as that will cause the effect to run on every single render.

Code Snippet

// ❌ Linter warning: missing dependency 'userId'
useEffect(() => {
  fetchData(userId);
}, []); // Empty array means run once

// ✅ Fixed: userId is included
useEffect(() => {
  fetchData(userId);
}, [userId]);