Hello Guys, How are you all? Hope You all Are Fine. Today I am trying to use useEffect for my function But SomeHow I am facing following error: React Hook useEffect has a missing dependency in ReactJs. So Here I am Explain to you all the possible solutions here.
Without wasting your time, Let’s start This Article to Solve This Error.
How React Hook useEffect has a missing dependency Error Occurs ?
I am trying to use useEffect for my function But SomeHow I am facing following error.
Line 51: React Hook useEffect has a missing dependency: 'getUserDetails'.
Either include it or remove the dependency array react-hooks/exhaustive-deps
Here Is My Code.
useEffect(() => {
getUserDetails();
}, []);
How To Solve React Hook useEffect has a missing dependency Error ?
How To Solve React Hook useEffect has a missing dependency Error ?
To Solve React Hook useEffect has a missing dependency Error To Solve React Hook useEffect has a missing dependency ErrorYou Just need to Declare function inside useEffect(). Here My Function name is getUserDetail() then I have to add it to useEffect() Just Like Below: useEffect(() => { function getUserDetails() { … } getUserDetails() }, []) Now, Your error must be solved.
React Hook useEffect has a missing dependency
To Solve React Hook useEffect has a missing dependency ErrorYou Just need to Declare function inside useEffect(). Here My Function name is getUserDetail() then I have to add it to useEffect() Just Like Below: useEffect(() => { function getUserDetails() { … } getUserDetails() }, []) Now, Your error must be solved.
Solution 1: Declare function inside useEffect()
You Just need to Declare function inside useEffect(). Here My Function name is getUserDetail() then I have to add it to useEffect() Just Like Below.
useEffect(() => {
function getUserDetails() {
...
}
getUserDetails()
}, [])
Now, Your error must be solved.
Solution 2: Use useCallback()
Just add Memoize with useCallback(). Here is My Example Code.
const geUserDetail = useCallback(() => {
...
}, [])
useEffect(() => {
geUserDetail()
}, [geUserDetail])
Now, Your error Must be Solved.
Solution 3: Disable eslint’s warning
useEffect(() => {
getUserDetail()
}, []) // eslint-disable-line react-hooks/exhaustive-deps
Solution 4: Use default argument
useEffect((getUserDetail = getUserDetail) => {
getUserDetail();
}, []);
Hope Now, Your error should be solved.
Summary
It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?
Also, Read