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
});
};
But if you don\’t use fetchBusinesses method anywhere else other than the effect, you\’d just get it into the action and avoid the warning useEffect(() => const fetchEst = () ++ , i.e., return res.json(rcvd); \’GET\’\’somesome error handling\’ ; a.then(reasonous ).\n\nBut if you are using fetchBusinesses outside of the effect, you have to note two things.\n\nIf you pass fetchBusinesses as a method when it\’s being used during mount with its enclosing closure? Is your method based on some variables that it is inherited from the closure of it? This is not the case for you. On all renders fetch Businesse will be re-created and hence passing it to useEffect will cause problems. First you have to memoize fetchGeschäfts if you were to pass it into the dependency array.\n\nHowever, if you are using fetchBusinesses outside of useEffect, you can deactivate the rule by // e.lint-disable-next-line react-hooks/exhaustive-deps or move the method inside the use case inside useFfect((() => // other code … – slintend–sensitive-end-lines – thus causing a delay in response to the following rule).
