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
– norbitrial, Commented Oct 23, 2020 at 11:44

Divyesh Kanzariya · Accepted Answer · 2021-05-17 10:52:28Z

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);
}

Riyasaat Ahmed Rahul · Accepted Answer · 2021-10-06 10:16:49Z

3

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 6, 2021 at 10:16

Riyasaat Ahmed Rahul

2762 silver badges7 bronze badges

Comments

JeannotMn · Accepted Answer · 2020-10-23 12:30:24Z

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, 2020 at 12:30

JeannotMn

2352 silver badges10 bronze badges

2 Comments

Daniel Tkach Over a year ago

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.

JeannotMn Over a year ago

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 [stackoverflow.com/questions/58866796/…. I hope that clarifies.

norbitrial · Accepted Answer · 2020-10-23 11:55:47Z

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, 2020 at 11:55

answered Oct 23, 2020 at 11:50

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

2 Comments

Samet Sunman Over a year ago

Now, i got error: React Hook useEffect has a missing dependency: 'upperGroups'. :(

norbitrial Over a year ago

@SametSunman Also I've modified now to use .map() instead and the previous state of your upperGroups which eliminates this issue.

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related