useEffect dependency array causing infinite loop [duplicate]

Question

I'm getting the following warning in the console: Line 19:6: React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array and res.data is an empty array when I console log it.

But when I pass in data to the dependency array, I do get the correct API response in the console, but I get an infinite loop.

From what I've read, this is one of the most common traps to fall into when using useEffect, but I still have a hard time wrapping my head around how to resolve this or finding an answer I can truly understand.

Any help would be appreciated in what is currently wrong with my code, and how to resolve.

import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

const apiKey = process.env.REACT_APP_NASA_KEY;

const NasaPhoto = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await axios(
        `https://api.nasa.gov/planetary/apod?api_key=${apiKey}`
      );
      setData(res.data);
      console.log(data);
    };
    fetchData();
  }, []);

  return (
    <div>
      <Link to='/'>Return Home</Link>
      <h1>Nasa Data</h1>
    </div>
  );
};
export default NasaPhoto;

Does removing the console.log(data); resolve the lint error? — T J
– T J, Commented May 2, 2021 at 20:22
Your code is correct. The warning is just a warning, and in this case it is a false positive. Remove your console.log if you want to get rid of the warning. — Martin
– Martin, Commented May 2, 2021 at 20:34

TGod-Ajayi · Accepted Answer · 2021-05-02 21:38:09Z

-1

write your fetch data method outside the useEffect and call it in the useEffect then pass it as a dependency your code should now be something like this `

const fetchData = async () => {
      const res = await axios(
        https://api.nasa.gov/planetary/apod?api_key=${apiKey}
      );
      setData(res.data);
      console.log(data);
    };

useEffect(() => {
   
    fetchData();
  }, [fetchData]);

`

edited May 2, 2021 at 21:38

answered May 2, 2021 at 20:22

TGod-Ajayi

717 bronze badges

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

3 Comments

Martin Over a year ago

You may want to change that. It will result in an infinite loop because with every render the fetchData function will be created anew and therefore will trigger the useEffect.

TGod-Ajayi Over a year ago

it will not let question author try it and see, the fetchData is the dependency not the data state, if it were the data state then it would cause infinite loop

Martin Over a year ago

Your fetchData function will be created every time the render function is run. This will trigger the useEffect, which will result in a new call to setData with a newly fetched object. And the component will be rendered again. and the fetchData function will be created anew. And the useEffect will be triggered. and setData will be called. and render will run. and useEffect will trigger. Ad infinitum

Collectives™ on Stack Overflow

useEffect dependency array causing infinite loop [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related