0

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;
Jon Tsikniadopoulos
  • 11
  • 2
  • https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook – Eran May 02 '21 at 19:59
  • Does removing the `console.log(data);` resolve the lint error? – T J May 02 '21 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 May 02 '21 at 20:34

1 Answers1

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

`

TGod-Ajayi
  • 61
  • 6
  • 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. – Martin May 02 '21 at 20:31
  • 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 – TGod-Ajayi May 02 '21 at 21:38
  • 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 – Martin May 03 '21 at 10:00