Infinite loop useEffect() hook

Question

So, I am using hook useState():

const [dailyData, setDailyData] = useState({});

And useEffect() hook to fetch data from API:

 useEffect(() => {
    const fetchAPI = async () => {
        setDailyData(await fetchDailyData())
    }

    console.log(dailyData)

    fetchAPI();
});

But the problem is that these requests are endless.

I'm new in React, so it would be great if you'd explain why this is caused.

Answer 1

Your useEffect is triggered when any state data is updated.

So if you update dailyData inside your useEffect , the state change will trigger useEffect again.

You can add a dependency array to useEffect or any flag variable for proper actions.

For example, adding an empty dependency array will work like componentDidMount .

useEffect(() => {
    // Do something here
}, []);

Answer 2

Your useEffect needs an array dependency ex.

useEffect(() => {
 const fetchAPI = async () => {
    setDailyData(await fetchDailyData())
 }

 console.log(dailyData)

 fetchAPI();
}, []);

Answer 3

To make useEffect to run only one time you have to give an empty array in useEffect function

useEffect(() => {
    const fetchAPI = async () => {
        setDailyData(await fetchDailyData())
    }

    console.log(dailyData)

    fetchAPI();
},[]);

If you want to run useEffect when some change occur you can specify the value in the array and whenever there will be any change in the variable the useEffect will run again.

Answer 4

Each time state of variable in component is changed useEffect() hook will run. So to avoid infinite loop you need to nest dependency array in useEffect() hook.

Your code can be modified as

 const [dailyData, setDailyData] = useState({});

     useEffect(() => {
     const fetchAPI = async () => {
        setDailyData(await fetchDailyData())
      }

        console.log(dailyData)

     fetchAPI();
   },  [ //dependency array]);
 

Dependency array can be defined as it is the second optional argument in the useEffect function. As the name implies, it is an array of dependencies that, when changed from the previous render, will recall the effect function defined in the first argument.