CODEWITHSUNDEEP
reactjs
LearningMath
LearningMath

Reputation: 861

What is the best practice when you need to render something while data is still fetching from the parent component?

Very often I find myself in a scenario which is very common I think, when I need to render data in a child component that comes from props, but is fetched from an api in the parent component. On the first render the data is still fetching, so the child component has nothing to render. I sometimes use a loading flag, and render the whole child component when the data comes, else I render some message that the data is still loading or I render null. But what if I want the component to be there and only fill the data when it comes? This is very tedious if I have props that are nested objects, so I have to define the structure of the data in the state of the parent so I don't access objects that don't exist, or I have to check manually in the child component if they are not undefined. So, the question is, is there any recommended way of doing this? How do you do it?

Upvotes: 2

Views: 49

Answers (2)

lupa
lupa

Reputation: 527

There are many ways in fact. Most common way is to render something to indicate user that there is something loading in the background and you could wait to see that.
Could be simple text "We're loading your content....."
Could be something like spinning icon.
Or event better the facebook preloader.

Upvotes: 1

James Delaney
James Delaney

Reputation: 1776

One of the most popular practice is to render string: 'N/A' that mean not applicable, not available or no answer.

Upvotes: 2

Related Questions