The error: “React Hook useEffect has a missing dependency” is a common error that can show up in many ways. In this blog, we will go through some of the ways you can fix this issue. Read on.

When Does The Error: “React Hook useEffect has a missing dependency” Happen?

When attempting to utilize useEffect in your function, you may get the following problem.

Line 51:  React Hook useEffect has a missing dependency: 'getUserDetails'.

Either include it or remove the dependency array  react-hooks/exhaustive-deps

Here can be your code:

useEffect(() => {

    getUserDetails();

}, []);

You got the error “React Hook useEffect has a missing dependency” because the useEffect hook used a function or a variable which you haven not added in the dependencies array of its.

How To Solve The Error: “React Hook useEffect has a missing dependency”?

Approach 1: Define a function within useEffect()

All you have to do to solve the “React Hook useEffect has a missing dependency” is defining a function within useEffect(). If your function is called getUserDetail(), you need to add it to useEffect(). As shown below: 

useEffect(() => {

  function getUserDetails() {

    ...

  }

  getUserDetails()

}, []) 

Now, you have fixed your issue.

Approach 2: Utilize useCallback()

The secon method for your error is that you simply utilize useCallback() with Memoize. Here’s an example of the code.

onst geUserDetail = useCallback(() => {

  ...

}, [])

useEffect(() => {

  geUserDetail()

}, [geUserDetail])

Your problem should now be resolved.

Approach 3: Turn off eslint’s warning

Another solution is turning of eslint’s warning. Look at the following example to further understand about this method.

useEffect(() => {

  getUserDetail()

}, []) // eslint-disable-line react-hooks/exhaustive-deps

Approach 4: Utilize default argument

And the 4th approach we suggest you to fix your error is utilizing default argument ass the below:

useEffect((getUserDetail = getUserDetail) => {

   getUserDetail();

}, []);

Approach 5: Move the function or variable declaration out of the component

Your error “React Hook useEffect has a missing dependency” can be resolved if you change position of the variable or function declaration outside of your component as the below example:

import React, {useEffect, useState} from 'react';

// 👇️ change position of the variable/function declaration outside of your component
const obj = {country: 'Chile', city: 'Santiago'};

export default function App() {
const [address, setAddress] = useState({country: '', city: ''});

useEffect(() => {
setAddress(obj);
console.log('useEffect called');
}, []);

return (
<div>
<h1>Country: {address.country}</h1>
<h1>City: {address.city}</h1>
</div>
);
}

This is beneficial since it prevents the variable from being recreated each time the App component is rendered again. It is unnecessary for useEffect to maintain track of the variable in its dependents array because it always points to the same location in memory on renderings.

Conclusion

We hope you enjoyed our article about the error. With this knowledge, we know that you can fix your error: “React Hook useEffect has a missing dependency” quickly by following these steps! If you still have any other questions about fixing this syntax error, please leave a comment below. Thank you for reading!

Read more

→ Tips On Dealing With The Error “React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing”