React Hook useEffect has a missing dependency error [Fixed]

# React Hook useEffect has a missing dependency error

The warning "React Hook useEffect has a missing dependency" occurs when the useEffect hook makes use of a variable or function that we haven't included in its dependencies array.

To solve the error, disable the rule for a line or move the variable inside the useEffect hook.

react hook useeffect has missing dependency

Here is an example of how the warning is caused.

App.js

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

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

  // 👇️ objects/arrays are different on re-renders
  const obj = {country: 'Chile', city: 'Santiago'};

  useEffect(() => {
    setAddress(obj);
    console.log('useEffect called');

    // ⛔️ React Hook useEffect has a missing dependency: 'obj'.
    // Either include it or remove the dependency array. eslintreact-hooks/exhaustive-deps
  }, []);

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

The code for this article is available on GitHub

The issue is that we're making use of the obj variable inside of the useEffect hook, but we aren't including it in the dependencies array.

# Include the missing dependencies in the array

One way to solve the error is to add the missing dependencies to the array.

App.js

Copied!
import {useState, useEffect} from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [age, setAge] = useState(0);

  useEffect(() => {
    setAge(count + 20);
  }, [count]); // 👈️ included count

  return (
    <div>
      <button onClick={() => setCount(count => count + 1)}>
        Increment count {count}
      </button>

      <p>Age: {age}</p>
    </div>
  );
}

include missing dependencies in the array

The code for this article is available on GitHub

The useEffect hook makes use of the count variable, so it has to be included in the dependencies array.

# Solve the error when working with objects or arrays

However, when working with objects or arrays, we can't just add the dependency like we did when working with primitives (like strings or numbers).

It would cause an error because objects and arrays are compared by reference in JavaScript.

The obj variable is an object with the same key-value pairs on each re-render, but it points to a different location in memory every time, so it would fail the equality check and cause an infinite re-render loop.

Arrays are also compared by reference in JavaScript.

# Disabling the ESLint rule

One way to get around the warning is to disable the ESLint rule for a line.

App.js

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

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

  const obj = {country: 'Chile', city: 'Santiago'};

  useEffect(() => {
    setAddress(obj);
    console.log('useEffect called');

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

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

disabling the eslint rule

The code for this article is available on GitHub

The comment above the dependencies array disables the react-hooks/exhausting-deps rule for a single line.

When the useEffect hook is passed an empty array for the second parameter, it only gets called when the component is mounted and unmounted.

# Move the variable or function declaration inside of the `useEffect` hook

An alternative solution is to move the variable or function declaration inside of the useEffect hook.

App.js

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

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

  useEffect(() => {
    // 👇️ move object / array / function declaration
    // inside of the useEffect hook
    const obj = {country: 'Chile', city: 'Santiago'};

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

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

move variable or function inside of use effect hook

The code for this article is available on GitHub

We moved the variable declaration for the object inside of the useEffect hook.

This removes the warning because the hook no longer has a dependency on the object because it is declared inside of it.

# Move the variable or function out of your component

Another possible solution, which can be used rarely, but is good to know about, is to move the function or variable declaration out of your component.

App.js

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

// 👇️ move function/variable declaration outside of the 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 helps because the variable won't get recreated every time the App component is re-rendered.

The variable will point to the same location in memory on all renders, therefore useEffect doesn't need to keep track of it in its dependencies array.

# Use the `useMemo` hook to solve the error

An alternative solution is to use the useMemo hook to get a memoized value.

App.js

Copied!
import React, {useMemo, useEffect, useState} from 'react';

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

  // 👇️ get memoized value
  const obj = useMemo(() => {
    return {country: 'Chile', city: 'Santiago'};
  }, []);

  useEffect(() => {
    setAddress(obj);
    console.log('useEffect called');

    // 👇️ safely include in the dependencies array
  }, [obj]);

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

The code for this article is available on GitHub

We used the useMemo hook to get a memoized value that doesn't change between renders.

The useMemo hook takes a function that returns a value to be memoized and a dependencies array as parameters. The hook will only recompute the memoized value if one of the dependencies has changed.

# Use the `useCallback` hook to memoize a function

Note that if you're working with a function, you would use the useCallback hook to get a memoized callback that doesn't change between renders.

App.js

Copied!
import React, {useMemo, useEffect, useState, useCallback} from 'react';

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

  // 👇️ get memoized callback
  const sum = useCallback((a, b) => {
    return a + b;
  }, []);

  // 👇️ get memoized value
  const obj = useMemo(() => {
    return {country: 'Chile', city: 'Santiago'};
  }, []);

  useEffect(() => {
    setAddress(obj);
    console.log('useEffect called');

    console.log(sum(100, 100));

    // 👇️ safely include in the dependencies array
  }, [obj, sum]);

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

The code for this article is available on GitHub

The useCallback hook takes an inline callback function and a dependencies array and returns a memoized version of the callback that only changes if one of the dependencies has changed.

# Silence the warning with a comment

If none of the suggestions worked for your use case, you can always silence the warning with a comment.

App.js

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

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

  const obj = {country: 'Chile', city: 'Santiago'};

  useEffect(() => {
    setAddress(obj);
    console.log('useEffect called');

  // 👇️ Disable the rule for a single line

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

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

silence warning with comment

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

React Hook useEffect has a missing dependency error [Fixed]