JIYIK CN >

The "react-hooks/exhaustive-deps" rule warns us when dependencies are missing in effect hooks. To get rid of the warning, move function or variable declarations useEffectinside the hook, remember arrays and objects that change on each render, or disable the rule.

Here is an example of how the warning is caused.

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

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

  // 👇️ objects/arrays are different on re-renders
  // they are compared by reference (not by contents)
  const obj = {country: 'Germany', city: 'Hamburg'};

  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 problem is that we useEffectare using the obj variable in the hook, but we are not including it in dependenciesthe array.

The most obvious solution to this error is to add the obj variable to useEffectthe hook's dependencies array.

However, this will result in an error in this case because objects and arrays are compared by reference in JavaScript.

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

Arrays are also compared by reference in JavaScript.

One way to resolve the warning "React Hook useEffect has a missing dependency" is to disable the eslint rule for a single line or the entire file.

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: 'Germany', city: 'Hamburg'};

  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>
  );
}

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

When useEffectthe hook is passed an empty array as the second argument, it will only be called when the component is mounted.

Another solution is to move the variable or function declaration useEffectinside the hook.

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: 'Germany', city: 'Hamburg'};

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

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

We moved the object's variable declaration into useEffectthe hook.

This removes the warning, since the hook no longer depends on an external object.

Another solution that may be rarely used but is best to know about is to move the function or variable declaration out of the component.

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

// 👇️ move function/variable declaration outside of component
const obj = {country: 'Germany', city: 'Hamburg'};

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 helpful because the variables are not recreated every time the App component is re-rendered.

This variable will point to the same location in memory for all renderers, so useEffectthere is no need to track it in their dependencies array.

Another solution is to use useMemoa hook to get the memoized value.

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: 'Germany', city: 'Hamburg'};
  }, []);

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

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

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

We use useMemothe hook to get a memoized value that doesn't change between renders.

useMemoThe hook accepts a function that returns a value to memoize and an array of dependencies as arguments. The hook only recalculates the memoized value if one of the dependencies changes.

If you're using a function, you'd use useCallbackthe hook to get a memoized callback that doesn't change between renders.

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: 'Germany', city: 'Santiago'};
  }, []);

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

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

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

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

useCallbackThe hook accepts an inline callback function and an array of dependencies, and returns a memoized version of the callback that only changes when one of the dependencies changes.

If none of the suggestions apply to your use case, we can always eliminate the warning with a comment.

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>
  );
}