JAVASCRIPT

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);