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 https://github.com/facebook/react/issues/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
});
};
This question is related to
reactjs
eslint
create-react-app
react-hooks
If you aren't using fetchBusinesses method anywhere apart from the effect, you could simply move it into the effect and avoid the warning
useEffect(() => {
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
});
};
fetchBusinesses();
}, []);
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 of useEffect
you can disable the rule using // eslint-disable-next-line react-hooks/exhaustive-deps
otherwise you can move the method inside of useEffect
To disable the rule you would write it like
useEffect(() => {
// other code
...
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
These warnings are very helpful for finding components that do not update consistently: https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies.
However, If you want to remove the warnings throughout your project, you can add this to your eslint config:
{
"plugins": ["react-hooks"],
"rules": {
"react-hooks/exhaustive-deps": 0
}
}
Actually the warnings are very useful when you develop with hooks. but in some cases, it can needle you. especially when you do not need to listen for dependencies change.
If you don't want to put fetchBusinesses
inside the hook's dependencies, you can simply pass it as an argument to the hook's callback and set the main fetchBusinesses
as the default value for it like this
useEffect((fetchBusinesses = fetchBusinesses) => {
fetchBusinesses();
}, []);
It's not best practice but it could be useful in some cases.
Also as Shubnam wrote, you can add below code to tell ESLint to ignore the checking for your hook.
// eslint-disable-next-line react-hooks/exhaustive-deps
You can set it directly as the useEffect
callback:
useEffect(fetchBusinesses, [])
It will trigger only once, so make sure all the function's dependencies are correctly set (same as using componentDidMount/componentWillMount...
)
Edit 02/21/2020
Just for completeness:
useEffect
callback (as above)useEffect(fetchBusinesses, [])
useEffect()
useEffect(() => {
function fetchBusinesses() {
...
}
fetchBusinesses()
}, [])
useCallback()
In this case, if you have dependencies in your function, you will have to include them in the useCallback
dependencies array and this will trigger the useEffect
again if the function's params change. Besides, it is a lot of boilerplate... So just pass the function directly to useEffect
as in 1. useEffect(fetchBusinesses, [])
.
const fetchBusinesses = useCallback(() => {
...
}, [])
useEffect(() => {
fetchBusinesses()
}, [fetchBusinesses])
useEffect(() => {
fetchBusinesses()
}, []) // eslint-disable-line react-hooks/exhaustive-deps
Just pass the function as the argument in the array of useEffect...
useEffect(() => {
functionName()
}, [functionName])
./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
It's not JS/React error but eslint (eslint-plugin-react-hooks) warning.
It's telling you that hook depends on function fetchBusinesses
, so you should pass it as dependency.
useEffect(() => {
fetchBusinesses();
}, [fetchBusinesses]);
It could result in invoking function every render if function is declared in component like:
const Component = () => {
/*...*/
//new function declaration every render
const fetchBusinesses = () => {
fetch('/api/businesses/')
.then(...)
}
useEffect(() => {
fetchBusinesses();
}, [fetchBusinesses]);
/*...*/
}
because every time function is redeclared with new reference
Correct way of doing this stuff is:
const Component = () => {
/*...*/
// keep function reference
const fetchBusinesses = useCallback(() => {
fetch('/api/businesses/')
.then(...)
}, [/* additional dependencies */])
useEffect(() => {
fetchBusinesses();
}, [fetchBusinesses]);
/*...*/
}
or just defining function in useEffect
const [mount, setMount] = useState(false)
const fetchBusinesses = () => {
//function defination
}
useEffect(() => {
if(!mount) {
setMount(true);
fetchBusinesses();
}
},[fetchBusinesses]);
This is solution is pretty simple and you don't need to override es-lint warnings. Just maintain a flag to check whether component is mounted or not.
You can remove the 2nd argument type array []
but the fetchBusinesses()
will also be called every update. You can add an IF
statement into the fetchBusinesses()
implementation if you like.
React.useEffect(() => {
fetchBusinesses();
});
The other one is to implement the fetchBusinesses()
function outside your component. Just don't forget to pass any dependency arguments to your fetchBusinesses(dependency)
call, if any.
function fetchBusinesses (fetch) {
return fetch("theURL", { method: "GET" })
.then(res => normalizeResponseErrors(res))
.then(res => res.json())
.then(rcvdBusinesses => {
// some stuff
})
.catch(err => {
// some error handling
});
}
function YourComponent (props) {
const { fetch } = props;
React.useEffect(() => {
fetchBusinesses(fetch);
}, [fetch]);
// ...
}
Add this comment on the top of your file to disable warning.
/* eslint-disable react-hooks/exhaustive-deps */
just disable eslint for the next line;
useEffect(() => {
fetchBusinesses();
// eslint-disable-next-line
}, []);
in this way you are using it just like a component did mount (called once)
updated
or
const fetchBusinesses = useCallback(() => {
// your logic in here
}, [someDeps])
useEffect(() => {
fetchBusinesses();
// no need to skip eslint warning
}, [fetchBusinesses]);
fetchBusinesses will be called everytime someDeps will change
The solution is also given by react, they advice you use useCallback
which will return a memoize version of your function :
The 'fetchBusinesses' function makes the dependencies of useEffect Hook (at line NN) change on every render. To fix this, wrap the 'fetchBusinesses' definition into its own useCallback() Hook react-hooks/exhaustive-deps
useCallback
is simple to use as it has the same signature as useEffect
the difference is that useCallback returns a function.
It would look like this :
const fetchBusinesses = useCallback( () => {
return fetch("theURL", {method: "GET"}
)
.then(() => { /* some stuff */ })
.catch(() => { /* some error handling */ })
}, [/* deps */])
// We have a first effect thant uses fetchBusinesses
useEffect(() => {
// do things and then fetchBusinesses
fetchBusinesses();
}, [fetchBusinesses]);
// We can have many effect thant uses fetchBusinesses
useEffect(() => {
// do other things and then fetchBusinesses
fetchBusinesses();
}, [fetchBusinesses]);
This article is a good primer on fetching data with hooks: https://www.robinwieruch.de/react-hooks-fetch-data/
Essentially, include the fetch function definition inside useEffect
:
useEffect(() => {
const fetchBusinesses = () => {
return fetch("theUrl"...
// ...your fetch implementation
);
}
fetchBusinesses();
}, []);
Well if you want to look into this differently, you just need to know what are options does the React has that non exhaustive-deps
? One of the reason you should not use a closure function inside the effect is on every render, it will be re-created/destroy again.
So there are multiple React methods in hooks that is considered stable and non-exhausted where you do not have to apply to the useEffect
dependencies, and in turn will not break the rules engagement of react-hooks/exhaustive-deps
. For example the second return variable of useReducer
or useState
which is a function.
const [,dispatch] = useReducer(reducer, {});
useEffect(() => {
dispatch(); // non-exhausted, eslint won't nag about this
}, []);
So in turn you can have all your external dependencies together with your current dependencies coexist together within your reducer function.
const [,dispatch] = useReducer((current, update) => {
const { foobar } = update;
// logic
return { ...current, ...update };
}), {});
const [foobar, setFoobar] = useState(false);
useEffect(() => {
dispatch({ foobar }); // non-exhausted `dispatch` function
}, [foobar]);
you try this way
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
});
};
and
useEffect(() => {
fetchBusinesses();
});
it's work for you. But my suggestion is try this way also work for you. It's better than before way. I use this way:
useEffect(() => {
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
});
};
fetchBusinesses();
}, []);
if you get data on the base of specific id then add in callback useEffect [id]
then cannot show you warning
React Hook useEffect has a missing dependency: 'any thing'. Either include it or remove the dependency array
Source: Stackoverflow.com