Displaying the page after loading all the data?

Question

JavaScript

The React app has a page with a table. The table has three columns and a certain number of rows (for example, 10, i.e. 10 entries in the table). The data for each of the three columns is obtained as a result of three different queries to the database (to different tables in the database).
As a result, when loading this page in the table, sometimes only one of the three columns is filled (only one of the queries has time to be executed), and after reloading the table becomes completely filled.
How to correctly render the page only after all the data received from the database?
At the moment, the implementation is as follows: for each request to the database, there is a function with a fetch request. The call to all these functions is in componentDidMount()

Answer 1

I would just make a function loadAllData , I would throw all three requests from it (wait for them through Promise.all), and then I would render all the data at once