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 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:
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
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]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With