React Hook useEffect has a missing dependency: 'list'

22
votes

Once I run the below code, I get the following error:

React Hook useEffect has a missing dependency: 'list'. Either include it or remove the dependency array react-hooks/exhaustive-deps

I cannot find the reason for the warning.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Form from './Form';

const App = () => {
  const [term, setTerm] = useState('pizza');
  const [list, setList] = useState([]);

  const submitSearch = e => {
    e.preventDefault();
    setTerm(e.target.elements.receiptName.value);
  };

  useEffect(() => {
    (async term => {
      const api_url = 'https://www.food2fork.com/api';
      const api_key = '<MY API KEY>';

      const response = await axios.get(
        `${api_url}/search?key=${api_key}&q=${term}&count=5`
      );

      setList(response.data.recipes);
      console.log(list);
    })(term);
  }, [term]);

  return (
    <div className="App">
      <header className="App-header">
        <h1 className="App-title">Recipe Search</h1>
      </header>
      <Form submitSearch={submitSearch} />
      {term}
    </div>
  );
};

export default App;
5
reactjsreact-hooks

5 Answers

35
votes

Inside your useEffect you are logging list:

console.log(list);

So you either need to remove the above line, or add list to the useEffect dependencies at the end. so change this line

}, [term]);

to

}, [term, list]);
19
votes

You can disable the lint warning by writing:

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

You can disable this by inserting a comment

// eslint-disable-next-line

4
votes

The dependency array - it's the second optional parameter in the useEffect function. React will recall function defined in the first parameter of useEffect function if parameters inside dependency array will changed from the previous render.

Then you doesn't need to place list variable inside dependency array.

  useEffect(() => {
    // do some

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

This warning comes beacuse you have a state 'list' being used inside useEffect. So react warns you that 'list' is not added to dependency so any changes to 'list' state won't trigger this effect to run again.
You can find more help here