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

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

You can either:

1. 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'

2. 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

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