How to fix React Hook useEffect has missing dependencies: 'count'. Either include it or remove the dependency array. in React

What this error means

The "React Hook useEffect has a missing dependency" warning is triggered by ESLint's react-hooks/exhaustive-deps rule, not by React itself. This rule analyzes your useEffect hooks and compares the variables, props, state, and functions referenced inside the effect against the dependency array you provided. When you use a value inside useEffect that can change over time (like props, state, or functions defined in the component), React needs to know about it through the dependency array. This tells React when to re-run the effect. If you omit a dependency, the effect will continue using the old value from when it first ran, even after the value has changed. This can lead to subtle bugs where your UI doesn't update correctly, API calls use stale parameters, or event handlers reference old state. The ESLint rule exists to catch these issues before they become runtime bugs.

Typical symptoms

• Yellow or orange ESLint warning in your code editor under the useEffect hook
• Effect continues using old/stale values even after props or state have changed
• Component doesn't re-render or update when expected after state changes
• API calls or side effects run with outdated parameters
• Event handlers or callbacks inside useEffect reference old state values
• Console shows the specific warning message naming which dependencies are missing
• Build warnings during CI/CD pipeline execution with ESLint configured

Common causes

1. Referencing component props inside useEffect without including them in the dependency array
2. Using state variables (from useState) inside the effect but not listing them as dependencies
3. Calling functions defined in the component scope that reference props or state
4. Accessing object properties or array elements that can change between renders
5. Using values from context (useContext) without including the context value in dependencies
6. Referencing variables from parent component scope that aren't stable across renders
7. Destructuring props or state before useEffect and only including partial dependencies
8. Intentionally using an empty dependency array [] to run effect only once, but the effect uses dynamic values

How to fix "React Hook useEffect has missing dependencies: 'count'. Either include it or remove the dependency array."

function MyComponent({ userId, onUpdate }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    // userId, onUpdate, and fetchData are dependencies
    fetchData(userId).then(result => {
      setData(result);
      onUpdate(result);
    });
  }, []); // ❌ Missing dependencies!
}

function MyComponent({ userId, onUpdate }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData(userId).then(result => {
      setData(result);
      onUpdate(result);
    });
  }, [userId, onUpdate]); // ✅ Dependencies added
}

// Before: external calculation creates dependency
function MyComponent({ user }) {
  const userName = user.firstName + ' ' + user.lastName;

  useEffect(() => {
    console.log(userName);
  }, [userName]); // userName recreated every render
}

// After: calculation inside effect
function MyComponent({ user }) {
  useEffect(() => {
    const userName = user.firstName + ' ' + user.lastName;
    console.log(userName);
  }, [user]); // Only depend on user object
}

function MyComponent({ userId }) {
  const [data, setData] = useState(null);

  // Without useCallback: function recreated every render
  const loadData = useCallback(async () => {
    const result = await fetchData(userId);
    setData(result);
  }, [userId]); // loadData only changes when userId changes

  useEffect(() => {
    loadData();
  }, [loadData]); // ✅ Safe dependency
}

// Move constants outside
const API_ENDPOINT = 'https://api.example.com';
const DEFAULT_OPTIONS = { timeout: 5000 };

function MyComponent({ userId }) {
  useEffect(() => {
    fetch(`${API_ENDPOINT}/users/${userId}`, DEFAULT_OPTIONS);
  }, [userId]); // Only userId is a dependency
}

function Counter({ increment }) {
  const [count, setCount] = useState(0);

  // Before: depends on count
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + increment);
    }, 1000);
    return () => clearInterval(timer);
  }, [count, increment]); // Resets timer every second!

  // After: no count dependency needed
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + increment);
    }, 1000);
    return () => clearInterval(timer);
  }, [increment]); // ✅ Only increment is needed
}

# Run ESLint to check for warnings
npm run lint

# Or build the project
npm run build

Advanced notes

useEffect(() => {
  // I want this to run only on mount, using initial props
  logAnalytics(initialUserId);
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const config = useMemo(() => ({
  apiKey: key,
  timeout: 3000
}), [key]);

useEffect(() => {
  initializeAPI(config);
}, [config]);

{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/exhaustive-deps": "warn"
  }
}

Frequently asked questions

What does "React Hook useEffect has missing dependencies: 'count'. Either include" mean?

The "React Hook useEffect has a missing dependency" warning is triggered by ESLint's react-hooks/exhaustive-deps rule, not by React itself. This rule analyzes your useEffect hooks and compares the variables, props, state, and functions referenced inside the effect against the dependency array you provided. When you use a value inside useEffect that can change over time (like props, state, or functions defined in the component), React needs to know about it through the dependency array.

How do I fix "React Hook useEffect has missing dependencies: 'count'. Either include"?

This ESLint warning occurs when your useEffect hook references variables, props, or state that are not included in its dependency array. When dependencies are missing, your effect may run with stale values or fail to re-run when those values change, leading to bugs and unexpected behavior.

What causes "React Hook useEffect has missing dependencies: 'count'. Either include"?

Referencing component props inside useEffect without including them in the dependency array Using state variables (from useState) inside the effect but not listing them as dependencies Calling functions defined in the component scope that reference props or state

Is the "React Hook useEffect has missing dependencies: 'count'. Either include" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• useId is not available in this React build

  How to fix "useId is not available in this React build" in React

  MEDIUM

• Warning: useEffect received a final argument that is not an array (instead, received `[type]`). When specified, the final argument must be an array.

  How to fix "useEffect invalid second argument" in React

  MEDIUM

• useImperativeHandle dependencies changed, handle object will be recreated

  How to fix "useImperativeHandle dependencies changed, handle object will be recreated" in React

  LOW

• useEffect received a final argument of type `object` instead of an array

  How to fix "useEffect received a final argument of type `object` instead of an array" in React

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  React Docs: exhaustive-deps ESLint Rule(Official Docs)
• 📖
  React Docs: Removing Effect Dependencies(Official Docs)
• Kinsta: How To Fix the "React Hook useEffect Has a Missing Dependency" Error
• LogRocket: Understanding the React exhaustive-deps linting warning
• BobbyHadz: React Hook useEffect has a missing dependency error [Fixed]