title: How to retrieve a data from API or Firebase before rendering anything to the user in React?
body: <p>I want to retrieve data from Firebase and then update it to redux and render it to the user. Can we have conditional rendering in <code>App.js</code>?</p>
  <p>If am retrieving a data in <code>HomePage.js</code> (a component) and updating it to redux and displaying it. Then when the user navigates to another page <code>Orders.js</code> or <code>MyProfile.js</code> I get the data from redux using <code>useSelector</code> and displaying it. But if the user visits a <code>Orders.js</code> or <code>MyProfile.js</code> first the data is not retrieved yet since the user didn't visit <code>HomePage.js</code>.</p>
  <p>I can now retrieve the data in App.js and use conditional rendering to hold the user from viewing other screen by rendering a loading screen. Is this a good practice?</p>
  <p>How to get data universally for all pages before rendering anything to the user?. Hope I made the question clear.</p>