Async await is not waiting for response inside useEffect

Question

I am creating simple clone for Hacker news, I want to use useEffect and inside it I return ids then use these ids to get first 50 posts.

The problem is with second function inside fetchHackerNewsPosts that it doesn't wait it to add data inside the postsArray and it prints it empty.

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [posts, setPosts] = React.useState([]);

  React.useEffect(() => {
    let postsArray = [];

    async function fetchHackerNewsPosts() {
      try {
        // it waits this function
        let postsIDsArray = await fetch(
          "https://hacker-news.firebaseio.com/v0/topstories.json"
        )
          .then((res) => res.json())
          .then((result) => {
            return result;
          });

        // it doesn't wait this function
        await postsIDsArray.slice(0, 50).map((postId) => {
          fetch(`https://hacker-news.firebaseio.com/v0/item/${postId}.json`)
            .then((res) => res.json())
            .then((result) => {
              postsArray.push(result);
            });
        });
      } catch (error) {
        console.log(error);
      }
    }

    fetchHackerNewsPosts();
    console.log(postsArray);
  }, []);

  return (
    <div className="p-10">
      <header className="">
        <h1> Hacker news API </h1>
      </header>
      <div className="bg-blue-600">list</div>
    </div>
  );
}

export default App;

this will help you: [async-await-inside-arraymap](https://stackoverflow.com/questions/42489918/async-await-inside-arraymap) — Luis Paulo Pinto, Aug 13 '20 at 15:32

mbdavis · Accepted Answer · 2020-08-13T16:03:52.530

I think there's two problems here.

1 - the function you're awaiting isn't an async function. You're doing post postsIDsArray.slice(0, 50).map(...) - which will just resolve to an empty array (you aren't returning the fetch). You could return the fetch, and then you'd have an array of promises, which you could then await via Promise.all:

await Promise.all(postsIDsArray.slice(0, 50).map((postId) => fetch(`https://hacker-news.firebaseio.com/v0/item/${postId}.json`)
  .then((res) => res.json())
  .then((result) => {
    postsArray.push(result);
 }));

This will still log an empty array where you console.log(postsArray); though - because you're not awaiting fetchHackerNewsPosts.

It might be worth considering using all await/async style or all promise style, rather than mixing the two. ~~This does however usually mean switching to regular loops rather than map/forEach, so you can wait in between.~~ - EDIT - removed, cheers Lione

React.useEffect(() => {
    async function fetchHackerNewsPosts() {
      const posts = [];

      try {
        const postIDsResponse = await fetch(
          "https://hacker-news.firebaseio.com/v0/topstories.json"
        );
        
        const postIDs = await postIDsResponse.json();

        for (const postID of postIDs) {
          const postResponse = await fetch(`https://hacker-news.firebaseio.com/v0/item/${postId}.json`);
          const post = await post.json();
          posts.push(post);
        }

        return posts;
      } catch (error) {
        console.log(error);
      }
    }

    setPosts(await fetchHackerNewsPosts());
  }, []);

As pointed out - Promise.all could actually be a lot quicker here as you don't need to wait for the previous request to finish before firing the next one.

React.useEffect(() => {
    async function fetchHackerNewsPosts() {
      try {
        const postIDsResponse = await fetch(
          "https://hacker-news.firebaseio.com/v0/topstories.json"
        );
        
        const postIDs = await postIDsResponse.json();

        const postRequests = postIDs.map(async postID => {
          const postResponse = await fetch(`https://hacker-news.firebaseio.com/v0/item/${postId}.json`);
          return await post.json();
        });
        
        return await Promise.all(postRequests);
      } catch (error) {
        console.log(error);
      }
    }

    const posts = await fetchHackerNewsPosts();
    setPosts(posts);
  }, []);

`for (const postID of postIDs)` will take a lot longer than `Promise.all` if there are a lot of posts. But `Promise.all` doesn't restrict you to chaining `.then`s either: `Promise.all(ids.map(async id => { /* await stuff here then return when done */ }))` — Lionel Rowe, Aug 13 '20 at 15:42
@LionelRowe - cheers, hadn't considered that! Updated answer to include a promise.all version — mbdavis, Aug 13 '20 at 16:04

Async await is not waiting for response inside useEffect

1 Answers1