Why useEffect does not behave like what i expect?-CodePudding

I was wondering Why this isn't an infinite loop? I set the state inside of the useEffect hook and that should re-render the component and useEffect will be ran again and again and agian... why this isn't what i expected?

import React, { useState, useEffect } from "react";
import axios from "axios";

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

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/comments").then((r) => {
        console.log("Hello world");
        setData(r.data[0]);
      });
  });

  return (
    <div>
      <h1>{data}</h1>
    </div>
  );
};

export default App;

CodePudding user response：

useEffect also accepts an array of dependencies i.e., useEffect will get executed when any values inside the array changes. So, if you want useEffect to be called whenever data changes, do this:

useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/comments").then((r) => {
        console.log("Hello world");
        setData(r.data[0]);
      });
  }, [data]);

CodePudding user response：

The useEffect hook needs a second parameter, the dependency array. When this dependency array is empty it will have the same behavior as the componentDidMount

If you add some dependencies to your array as data this useEffect will be executed every time that the data state changes.

So, if you want to fetch the data when the component loads you must do something like this.

useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/comments").then((r) => {
        console.log("Hello world");
        setData(r.data[0]);
      });
  }, []);