Compare the following two ponents:

Child.js

import React, { useEffect } from "react";

function Child({ count, setCount }) { // Note: Has parameter
  useEffect(() => {
    setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
  }, []);

  return <div>{count}</div>;
}

export default Child;

Child2.js

import React, { useEffect, useState } from "react";

function Child2() { // Note: No parameter
  const [count, setCount] = useState(0); // State variable assigned in ponent

  useEffect(() => {
    setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
  }, []);

  return <div>{count}</div>;
}

export default Child2;

They are essentially the same. The difference between the two is that Child.js gets the state variable count and its setter setCount passed in from its parent, while Child2.js sets that state variable itself.

They both work fine, but Child.js (and only Child.js) plains about "a missing dependency: 'setCount'." Adding setCount to the dependencies array makes the warning go away, but I'm trying to figure out why that's necessary. Why is the dependency required in Child but not Child2?

I have working examples at .

Compare the following two ponents:

Child.js

import React, { useEffect } from "react";

function Child({ count, setCount }) { // Note: Has parameter
  useEffect(() => {
    setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
  }, []);

  return <div>{count}</div>;
}

export default Child;

Child2.js

import React, { useEffect, useState } from "react";

function Child2() { // Note: No parameter
  const [count, setCount] = useState(0); // State variable assigned in ponent

  useEffect(() => {
    setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
  }, []);

  return <div>{count}</div>;
}

export default Child2;

They are essentially the same. The difference between the two is that Child.js gets the state variable count and its setter setCount passed in from its parent, while Child2.js sets that state variable itself.

They both work fine, but Child.js (and only Child.js) plains about "a missing dependency: 'setCount'." Adding setCount to the dependencies array makes the warning go away, but I'm trying to figure out why that's necessary. Why is the dependency required in Child but not Child2?

I have working examples at https://codesandbox.io/s/react-use-effect-dependencies-z8ukl.

• javascript
• reactjs
• use-effect

• 1 The setter function ing from the prop could change and bee stale, and due to closures, the wrong setter function may be called by the useEffect. The Child2 ponent doesnt plain because the setter function is declared inside the ponent, and so the setter function is stable and cannot bee stale. This is why Child2 doesn't plain, but Child does. – JMadelaine Commented Apr 3, 2020 at 6:42

1 Answer 1

The ESLint rule is not extremely intelligent to determine what may or maynot change and thus prompts you to pass every variable that is being used within the useEffect function callback so that you don't miss those changes accidently.

Since hooks are heavily dependent on closure, and beginner programmers find it difficult to debug problems related to closures, eslint warning here serves as a good help to avoid such cases.

Now since state updater is directly returned from useState and doesn't change during the course of your ponent Lifecycle you can avoid passing it as a dependency and disable the warning like

useEffect(() => {
   setInterval(() => {
      setCount(prevCount => prevCount + 1);
   }, 1000);
   // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])