Use of asynchronous fetch function inside useEffect and rendering to page

Question

Hello I have a question about fetch call inside componentDidMount. Here's an example code:

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

function App() {
  const [data, setData] = useState({ hits: [] });
  useEffect(async () => {
    const result = await axios(
      'https://hn.algolia.com/api/v1/search?query=redux',
    );
    setData(result.data);
  }, []);
  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}
export default App;

Here

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

This is the same as componentDidMount.

Inside useEffect we fetch data from server and store it into data. Then data is used to render items to page as <li> elements.

My question is, does fetch call (ie. axios) get executed AFTER App component gets mounted the first time? If so, how does data get populated in time for the first rendering?

<ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
 </ul>

My understanding is, since data is populated AFTER the first mount, it won't be available for rendering?

Maybe I'm misunderstanding the difference between MOUNTING and RENDERING?

Can someone correct me because the above code obviously does work.

Thanks.

Jayce444 · Accepted Answer · 2020-02-24 06:41:26Z

1

Well it's not populated, but the empty array still exists, so the code doesn't crash. When the component mounts and first renders, data.hits is equal to an empty array, []. So you can map over it, but the length is 0 so the map won't produce anything. If initially you defined data.hits to be an empty object, or null or something, e.g. const [data, setData] = useState({});, THEN it would crash, cos initially data.hits is equal to undefined, and you'll get an error Can't read property .map of undefined

answered Feb 24, 2020 at 6:41

Jayce444

9,1234 gold badges35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zimmerbimmer Over a year ago

Just like Jayce444said useState starts with { hits: [] } that's why your app doesn't crash. If you start useState with other than { hits: [] } then all you have to do is put data.hits && data.hits.map(... and it wouldn't crash.

Logan Lee Over a year ago

Does data get populated just before second render?

Jayce444 Over a year ago

@logan Yes, setData(result.data); updates the state value of data, and that causes a second re-render (in both functional and class components, both state and prop changes cause a re-render))

Collectives™ on Stack Overflow

Use of asynchronous fetch function inside useEffect and rendering to page

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related