react dont render component until loaded
import React, { useState } from "react"; import ReactDOM from "react-dom"; const CurrentComponent = () => <div>I am current</div>; const NewComponent = () => <div>I am new</div>; const App = () => { const [loading, setLoading] = useState(true); // this simulates your fetch setTimeout(() => { setLoading(false); }, 2000); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Component:</h2> {loading ? <CurrentComponent /> : <NewComponent />} </div> ); }; const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
Source: stackoverflow.com