How to send a request to the server before rendering or when to send it?

Question

React

Greetings) I am making a page on react / redux.
There is a component (CatalogProducts) . It contains sub-components (CatalogProductCart) , their number is not previously known . It will be known after receiving a response from the server. After that, with the help of a cycle (map ()), it is displayed on the page.
If you make a request in componentDidMount() , then (CatalogProductCart) does not have time to get (props) before rendering.
Further, the components (CatalogProductCart) will be redrawn using action when the button (navigation) is pressed .
So when, at what moment and where to make a request? Before rendering....? Or render and then call action...? Or is it even possible to shove the response from the server into (const initialState ={}) ...? What is the right way to do...? How are you doing...?
Thanks :)

Answer 1

Requests to the server are made in componentDidMount, this is necessary for the user to see the page immediately, and not wait for the content to load from the server. Until the data is loaded, a preloader is usually displayed. Here is an example
Here we check that there is no data yet and return the spinner And as soon as the data arrives, a list of data
will be displayed