How to fetch Data before Render ReactJS

Question

so I have this custom hook which returns an array of Objects from database, before it gets data, the value of returned value is undefined. getDataByID(100).doc?.items - This returns the items from database as an array. How can I make sure that the returned Value is not undefined and then mount the component in functional components?

Answer 1

Try to fetch this data in parent component, and when you received the data then only mount required component as child component and pass those data as props.

{
    (dataFromAPI !== undefined) ? <ChildComponent data={dataFromAPI} /> : undefined
}

In this way when you have dataFromAPI then only your child component will be mounted.

Answer 2

Mujibur Rehman Ansari 的回答可以进一步修改为

{ dataFromAPI && <ChildComponent data={dataFromAPI} /> }