With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request:
./src/components/BusinessesList.js
Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array react-hooks/exhaustive-deps
I've been unable to find a solution that stops the infinite loop. I want to stay away from using useReducer()
. I did find this discussion [ESLint] Feedback for 'exhaustive-deps' lint rule #14920 where a possible solution is You can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing.
I'm not confident in what I'm doing, so I haven't tried implementing it just yet.
I have this current setup, React hook useEffect runs continuously forever/infinite loop and the only comment is about useCallback()
which I'm not familiar with.
How I'm currently using useEffect()
(which I only want to run once in the beginning similar to componentDidMount()
):
useEffect(() => {
fetchBusinesses();
}, []);
const fetchBusinesses = () => {
return fetch("theURL", {method: "GET"}
)
.then(res => normalizeResponseErrors(res))
.then(res => {
return res.json();
})
.then(rcvdBusinesses => {
// some stuff
})
.catch(err => {
// some error handling
});
};
Best Answer
If you aren't using fetchBusinesses method anywhere apart from the effect, you could simply move it into the effect and avoid the warning
If however you are using fetchBusinesses outside of render, you must note two things
fetchBusinesses
as a method when it's used during mount with its enclosing closure?To sum it up I would say that if you are using
fetchBusinesses
outside ofuseEffect
you can disable the rule using// eslint-disable-next-line react-hooks/exhaustive-deps
otherwise you can move the method inside of useEffectTo disable the rule you would write it like