Get updated data in useEffect

Question

I try to fetch data using useEffect . Trying this I get many renders in the fetching process.

Ex:

First render:

data = []

Second render:

data = [{...}{...}]

So the data array is populated just after 2 renders. Why? and how to get data rendered in the first render?

Answer 1

When you are getting your data in useEffect there are going to be extra renders when the data has not been loaded yet. But generally you should not be worried by this as renders are pretty fast.

Only way to get around this is to load the data in some parent component and then pass it to the child component as param. This way you can have a component with non-trivial render of data, that will be displayed by parent only when data are already available