React useEffect with axios

Question

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 communications, etc. If that is the case?

`too many render` because whenever status update then render happend. you will get all your answer from react doc. — Devsi Odedra, May 24 '22 at 05:26

score 2 · Answer 1 · answered May 24 '22 at 05:42

When you call setPosts the component 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 component 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.

Thanks for your explanation and helpful link. `useEffect` can be divided into `componentDidMount`, `componentDidUpdate`, etc. With state function as the second argument `[variable]`, it will execute once. — Jaden, May 25 '22 at 14:17

Daniel Benisti · Answer 2 · 2022-05-24T05:52:50.283

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 components works?

so, we know that React functional component 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 component will render many times during it's lifecycle, so imagine that the virtual DOM decided to check the code and compare 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 component.

the virtual DOM will run the API call, he will find a different result which will cause a new render to that specific component 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 component

Thank you for your explanation. It is very helpful for me to understand how it works! So `setPosts` function will be ran multiple times as compared to realDOM, and the api will be called multiple times. — Jaden, May 25 '22 at 14:14
Exactly! and if you will use useEffect with empty array as a dependency array it will only run once when the component is loaded. — Daniel Benisti, May 26 '22 at 13:37

score 0 · Answer 3 · answered May 24 '22 at 05:32

0

Please first check your state like this.

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

answered May 24 '22 at 05:32

sandeep yadav

19
4

React useEffect with axios

3 Answers3