How to fix "React Hook useEffect has a missing dependency. Either include it or remove the dependency array" problem?

Question

I want to use useEffect, but when I add getUpperGroup method, I get warning:

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

My code is:

useEffect(() => {
  getUpperGroups();
  setContentData(contentGroupData);
}, [contentGroupData]);


const [contentData, setContentData] = useState<Fundation[]>([] as Fundation[]);
const [upperGroups, setUpperGroups] = useState({});

const getUpperGroups = () => {

   let newUpperGroups = upperGroups;

   contentGroupData.forEach(content=>{
     newUpperGroups = {...newUpperGroups, [content.id]: content.title};
   })

   setUpperGroups(newUpperGroups);
}

You can move the definition of `getUpperGroups` into `useEffect`. — norbitrial, Oct 23 '20 at 11:44

score 10 · Accepted Answer · edited May 17 '21 at 10:52

You have two mistakes.

1- You defined getUpperGroups after useEffect, so you can't add it to the list of useEffect dependencies.

2- if you add getUpperGroups to list of useEffect dependencies, useEffect will run on every re-render and you give a loop of re-render error.

So there is two solutions.

1- Add getUpperGroups into useEffect

const [contentData, setContentData] = useState<Fundation[]>([] as Fundation[]);
const [upperGroups, setUpperGroups] = useState({});


useEffect(() => {
  
  const getUpperGroups = () => {

   let newUpperGroups = upperGroups;

   contentGroupData.forEach(content=>{
     newUpperGroups = {...newUpperGroups, [content.id]: content.title};
   })

   setUpperGroups(newUpperGroups);
  }

  getUpperGroups();
}, [contentGroupData]);

2- Disable eslint

useEffect(() => {
  getUpperGroups();
  setContentData(contentGroupData);

  // eslint-disable-line react-hooks/exhaustive-deps
}, [contentGroupData]);


const [contentData, setContentData] = useState<Fundation[]>([] as Fundation[]);
const [upperGroups, setUpperGroups] = useState({});

const getUpperGroups = () => {

   let newUpperGroups = upperGroups;

   contentGroupData.forEach(content=>{
     newUpperGroups = {...newUpperGroups, [content.id]: content.title};
   })

   setUpperGroups(newUpperGroups);
}

score 2 · Answer 2 · answered Oct 23 '20 at 12:30

2

You can either:

Suppress that rule for the entire project: Go to .eslintrc file and change 'react-hooks/exhaustive-deps': 'error' to 'react-hooks/exhaustive-deps': 'warn' or 'react-hooks/exhaustive-deps': 'off'
Supress the rule only in this instance:

useEffect(() => {
    getUpperGroups();
    setContentData(contentGroupData);
}, [contentGroupData]);


const [contentData, setContentData] = useState<Fundation[]>([] as Fundation[]);
const [upperGroups, setUpperGroups] = useState({});

const getUpperGroups = () => {

    let newUpperGroups = upperGroups;

    contentGroupData.forEach(content=>{
        newUpperGroups = {...newUpperGroups, [content.id]: content.title};
    })

    setUpperGroups(newUpperGroups);
} // eslint-disable-line react-hooks/exhaustive-deps

answered Oct 23 '20 at 12:30

JeannotMn

184
1
9

I don't understand. You fix the error by turning off the message? This is what it sounds like for me, unless you can explain that what's happening is not actually a valid warning? Can you please clarify. – Daniel Tkach Sep 10 '21 at 20:41
1

That is an eslint warning, so it is trying to tell you that this is not "good practice" or this is not recommended as there might be some unexpected/undesired behavior as a result. You can read more here [https://stackoverflow.com/questions/58866796/understanding-the-react-hooks-exhaustive-deps-lint-rule]. I hope that clarifies. – JeannotMn Sep 11 '21 at 16:39

score 2 · Answer 3 · answered Oct 06 '21 at 10:16

2

This one worked for me.

Just add this comment at the last line of useEffect:

//eslint-disable-next-line

useEffect(() => {
  getUpperGroups();
  setContentData(contentGroupData);
  //eslint-disable-next-line
}, [contentGroupData]);

answered Oct 06 '21 at 10:16

Riyasaat Ahmed Rahul

166
6

norbitrial · Answer 4 · 2020-10-23T11:55:47.777

0

Probably I would try to move the definition of getUpperGroups into useEffect. Also you can use .map() and the previous state of your groups state.

Try as the following:

useEffect(() => {
  const getUpperGroups = () => {
     setUpperGroups(prevUpperGroups => contentGroupData.map((content) => ({
        ...prevUpperGroups,
        [content.id]: content.title
     })))
  }

  getUpperGroups();
  setContentData(contentGroupData);
}, [contentGroupData]);

edited Oct 23 '20 at 11:55

answered Oct 23 '20 at 11:50

norbitrial

14,716
7
32
59

Now, i got error: React Hook useEffect has a missing dependency: 'upperGroups'. :( – Samet Sunman Oct 23 '20 at 11:52
@SametSunman Also I've modified now to use `.map()` instead and the previous state of your `upperGroups` which eliminates this issue. – norbitrial Oct 23 '20 at 11:56

How to fix "React Hook useEffect has a missing dependency. Either include it or remove the dependency array" problem?

4 Answers4

Linked