useEffect causing infinite loop or getting errors

Question

I am trying to learn React hooks. I'm creating a simple news app that leverages the NY times api.

When I leave the dependency empty, nothing loads and when I use data as the dependency it goes into an infinite loop.

When I use isLoading, it works but then I receive an error "localhost/:1 Unchecked runtime.lastError: The message port closed before a response was received." and "localhost/:1 Error handling response: TypeError: Cannot read property 'level' of undefined"

main.js

import React, { useEffect, useState } from "react";
import { nyTimesApi } from "../services/Api";
const Main = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState([]);

  const fetchData = async () => {
    const result = await nyTimesApi();
    setData(result);
    setIsLoading(false);
    console.log(data.results);
  };
 
  useEffect(() => {
    fetchData();
  }, [isLoading]);
  return <div className="main">work</div>;
};
export default Main;

I am also receiving a warning, when using isLoading, in the terminal saying "React Hook useEffect has a missing dependency: 'fetchData'. Either include it or remove the dependency array react-hooks/exhaustive-deps"

What am I doing wrong?

Your code is totally fine. Could you share more source code or reproduce it in CodeSanbox ? — dungmidside
You can't console.log state changes on the next line, state changes are asynchronous. Log the state in the main body of the function to see the latest state value. Your effect can literally just be useEffect(fetchData, []); so it runs once on mount — Jayce444
The dependency array should be empty if you want the function to run only on the initial load. I'm pretty sure you can ignore the warning about needing 'fetchData' in the dependency array. — Jevon Cochran

Jacob Smit Jacob Smit · Accepted Answer · 2021-01-27T03:26:57

The infinite loop is caused by the combination of using setData(result) and [data]:

The component mounts and the useEffect is run.
setData(result) will asynchronously update the data value and trigger a rerender.
During the rerender the useEffect will be run again as data will not successfully complete the reference comparison.
Repeat 2 to 3.

The warning "React Hook useEffect has a missing dependency" is self explanatory to an extent.

Making use of an external (to the useEffect) variable that is not included in the dependency array may mean that the value of the variable changes and the useEffect will not be retriggered or that the value may not be the expected value.

Below is a an example of how the original snippet might be fixed:

import React, { useEffect, useState } from "react";
import { nyTimesApi } from "../services/Api";

const Main = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState([]);
 
  useEffect(() => {
    // Create function inside useEffect so that the function is only
    // created everytime the useEffect runs and not every render.
    const fetchData = async () => {
        const result = await nyTimesApi();
        setData(result);
        setIsLoading(false);

        // setData will update state asynchronously.
        // Log the value stored instead.
        console.log(result.results);
    };

    //Run data fetching function.
    fetchData();

  }, 
  // Both of these are set functions created by useState and will
  // not change for the life of the component, but adding them to
  // the dependency array will make your linter happy.

  // Do not need to check isLoading as it is always true on component
  // mount.
  [setData, setIsLoading]);

  return <div className="main">work</div>;
};

export default Main;

useEffect causing infinite loop or getting errors

2 Answers