close
React Hook useEffect has a missing dependency, useEffect has a missing dependency, React Hook useEffect has a missing, useEffect has a missing, React Hook useEffect has

[Solved] React Hook useEffect has a missing dependency

by

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.

Contents
  1. How React Hook useEffect has a missing dependency Error Occurs ?
  2. How To Solve React Hook useEffect has a missing dependency Error ?
  3. Solution 1: Declare function inside useEffect()
  4. Solution 2: Use useCallback()
  5. Solution 3: Disable eslint's warning
  6. Solution 4: Use default argument
  7. Summary

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 ?

  1. 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.

  2. 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

Leave a Comment