using useState async makes webapp render unlimited times

Question

Here I have a useState for posts of my blog webapp. I am getting the posts from the mongoose back end which works fine. But the second I set the posts variable I get an infinite loop of rerendering.

Here is the app.jsx:

import React, {useState} from 'react';
import './App.css';
import Nav from './Navbar/NavBar.jsx';
import Content from "./content/Content"
import { getPosts } from "./api/post";

function App() {

    const idList = ["631a58c165b3a10ac71497e1", "631a58fa65b3a10ac71497e3"];

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

    setPosts(async() => await getPosts(idList));

  return (
    <div>
        hello
    </div>
  );
}

export default App;

Here is the axios part:

import axios from "axios";


const getPost = (id) => {
    new Promise((resolve, reject) => {
        const url = "/posts/" + id
        console.log(url)
        axios.get(url)
            .then(response => {
                if (response.status === 200){
                    console.log("Succesfull call");
                    console.log(response.data);
                    resolve(response.data);
                }
                else if(response.status === 404){
                    reject(response);
                }
            })
            .catch(err => {
                console.log("Failed call");
                reject(err);
            })
    });
};

const getPosts = async (idList) => {
    var result = []
    for(const id in idList){
        try{
            let post = await getPost(idList[id]);
            result.push(post);
        }catch(err){
            console.log(err.message);
        }
    }
    
    if (result.length === 0) throw {message: "No posts"};
    else return result;

};

export {getPosts};

How can I run setPosts async so that the site wont refresh infinitely?

You're setting the state to a _promise_ each time... Read up on `useEffect`. — jonrsharpe, Sep 09 '22 at 00:27

Phil · Accepted Answer · 2022-09-09T00:41:19.920

1

You cannot pass a function returning a promise into the state setter. It must return the new state value directly.

You'll want to use an effect hook instead

useEffect(() => {
  getPosts(idList).then(setPosts);
}, []); // empty dependency array means run once on mount

Given idList appears constant, you should define it outside your component. Otherwise you'll need to work around its use as a dependency in the effect hook.

Your getPosts function falls prey to the explicit promise construction anti-pattern. Since Axios already returns a promise, you don't need to make a new one.

You can also use Promise.allSettled() to make your requests in parallel.

const getPost = async (id) => (await axios.get(`/posts/${id}`)).data;

const getPosts = async (idList) => {
  const results = (await Promise.allSettled(idList.map(getPost)))
    .filter(({ status }) => status === "fulfilled")
    .map(({ value }) => value);

  if (results.length === 0) {
    throw new Error("No posts");
  }
  return results;
};

edited Sep 09 '22 at 00:41

answered Sep 09 '22 at 00:29

Phil

157,677
23
242
245

can I even use .then() on getPosts because it is not a promise based function it is just async. it might be my problem but I am still getting the infinite loop – Bot Ellis Sep 09 '22 at 00:38
1

@BotEllis async functions implicitly return a promise – Phil Sep 09 '22 at 00:41
1

@BotEllis I've updated my answer. `idList` should not be a dependency in your hook, otherwise it will create an infinite loop as you noticed – Phil Sep 09 '22 at 00:45
Wow! I dont know how to thank you, it worked perfectly. Thanks a lot for your help and time! – Bot Ellis Sep 09 '22 at 00:49
1

@Phil Apart from that he was basically setting state in render, which was causing the issue – – Giorgi Moniava Sep 09 '22 at 13:58

using useState async makes webapp render unlimited times

1 Answers1