Below is a snippet of code to fetch data from url by axios,

import React, { useState, setEffect, useEffect } from 'react';
import axios from "axios";
import LoadingPage from "./LoadingPage";
import Posts from "./Posts";

const url = "https://api-post*****";

function App() {
    const [posts, setPosts] = useState([]);
    
    const fetchPost = async() => {
        try {
            const response = await axios(url);
            return response.data;
        } catch (error) {
            console.error(error);
        }
    };
    
    let data = fetchPost();
    setPosts(data);
    
    return (
        <main>
            <div className="title">
                <h2> Users Posts </h2>
                {posts.length
                ? <Posts posts={posts} />
                : <Loading posts={posts} />
                }
            </div>
        </main>
    );
}

export default App;

However, it got the error of

uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite

Question 1: How could this be of too many re-render, there is no loop or something?

To solve this bug, we can use below changes:

  const [posts, setPosts] = useState([]);

  const fetchPost = async () => {
    try {
      const response = await axios(url);
      setPosts(response.data);
    } catch (err) {
      console.error(err);
    }
  };

  useEffect(()=> {
    fetchPost();
  }, [posts])

Question 2: how the useEffect work to avoid too many calls?

Question 3: I always treat react hooks under hood as web socket munications, etc. If that is the case?

Below is a snippet of code to fetch data from url by axios,

import React, { useState, setEffect, useEffect } from 'react';
import axios from "axios";
import LoadingPage from "./LoadingPage";
import Posts from "./Posts";

const url = "https://api-post*****";

function App() {
    const [posts, setPosts] = useState([]);
    
    const fetchPost = async() => {
        try {
            const response = await axios(url);
            return response.data;
        } catch (error) {
            console.error(error);
        }
    };
    
    let data = fetchPost();
    setPosts(data);
    
    return (
        <main>
            <div className="title">
                <h2> Users Posts </h2>
                {posts.length
                ? <Posts posts={posts} />
                : <Loading posts={posts} />
                }
            </div>
        </main>
    );
}

export default App;

However, it got the error of

uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite

Question 1: How could this be of too many re-render, there is no loop or something?

To solve this bug, we can use below changes:

  const [posts, setPosts] = useState([]);

  const fetchPost = async () => {
    try {
      const response = await axios(url);
      setPosts(response.data);
    } catch (err) {
      console.error(err);
    }
  };

  useEffect(()=> {
    fetchPost();
  }, [posts])

Question 2: how the useEffect work to avoid too many calls?

Question 3: I always treat react hooks under hood as web socket munications, etc. If that is the case?

• javascript
• reactjs
• sockets
• react-hooks
• axios

• too many render because whenever status update then render happend. you will get all your answer from react doc. – Devsi Odedra Commented May 24, 2022 at 5:26

3 Answers 3

When you call setPosts the ponent will render again, and fetch the data again, at which point you set state with the data forcing a new render which fetches the data...etc.

By using useEffect you can fetch the data, and set state once when the ponent is first rendered using an empty dependency array.

useEffect(() => {
  // Fetch the data
  setposts(data);
}, []);

You probably don't want to watch for posts in this useEffect (you can have many) like you're doing in your updated example because you may run into the same issue.

I will only answer number one.

Caveat: the answer is a bit long.

I really hope it will help you to understand a topic that took me a long time to grasp.

Answer one:

To answer this question we should ask our selves two things, a) what is a side effect? and b) how the life cycle of ponents works?

so, we know that React functional ponent are pure functions and they should stay that way, you can pass props as parameters and the function will do stuff and return JSX, so far so good.

and for the second part we cannot control React virtual DOM, so the ponent will render many times during it's lifecycle, so imagine that the virtual DOM decided to check the code and pare between the virtual DOM and the real DOM and in order to do that he will have to check and "run" the code that resides inside that specific ponent.

the virtual DOM will run the API call, he will find a different result which will cause a new render to that specific ponent and this process will go on and on as an infinite loop.

when you are using usEffect you can control when this API call will take place and useEffect under the hood makes sure that the this API call ran only one your specific change take place and not the virtual DOM V.S real DOM change.

to summarize, useEffect basically helps you to control the LifeCycle of the ponent

Please first check your state like this.

useEffect(()=> {
    fetchPost();
}, [posts]);