React Hook useEffect has a missing dependency: 'list'

Question

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;

Arjen de Vries · Accepted Answer · 2019-11-14 10:56:56Z

54

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

edited Nov 14, 2019 at 10:56

answered May 1, 2019 at 16:02

Arjen de Vries

1,0061 gold badge11 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

akmalmzamri Over a year ago

Is it a bad practice to have variables inside useEffect but not adding them in the dependencies array? For example when you use empty dependencies array to simulate componentDidMount

Arjen de Vries Over a year ago

Well that depends a bit. From the official documentation reactjs.org/docs/hooks-effect.html adding an empty array is telling React that the hook is not dependent on any props or state changes. So you can leave them out if you are a 100% sure that the values of those variables won't change later on (for instance because they are not derived from state or a prop), or when you simply don't care for those changes in the hook that you write.

Diego Cerdan Puyol · Accepted Answer · 2019-09-02 22:14:31Z

33

You can disable the lint warning by writing:

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

answered Sep 2, 2019 at 22:14

Diego Cerdan Puyol

1,1741 gold badge12 silver badges13 bronze badges

1 Comment

Asma Rahim Ali Jafri Over a year ago

This didn't disable the warning.

Oteri Eyenike · Accepted Answer · 2020-02-03 21:57:24Z

15

You can disable this by inserting a comment

// eslint-disable-next-line

answered Feb 3, 2020 at 21:57

Oteri Eyenike

1671 silver badge5 bronze badges

3 Comments

Asma Rahim Ali Jafri Over a year ago

This didn't disable the warning.

maxorcist Over a year ago

Worked for me. The comment needs to be added right above the line with the empty dependency list.

Artiphishle Over a year ago

@AsmaRahimAliJafri for both comments... this will definitely disable the warning. and @all: I NEVER EVER will approve a disable-next-line in a review. It means "I don't care about what my code is doing, so I resign". That's not how to write code. This rule only exists to ...good question... ah: if you're generating code (e.g. AST) and generate random warnings ^^ can't think of any useful scenario otherwise.

Pavel Petrovich · Accepted Answer · 2020-06-25 11:21:14Z

10

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

answered Jun 25, 2020 at 11:21

Pavel Petrovich

76411 silver badges10 bronze badges

Comments

harshit · Accepted Answer · 2019-06-08 08:56:58Z

5

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

answered Jun 8, 2019 at 8:56

harshit

2062 silver badges8 bronze badges

Collectives™ on Stack Overflow

React Hook useEffect has a missing dependency: 'list'

5 Answers 5

2 Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related