How to wait for a ReactJS component to finish updating ?

To wait for a ReactJS component to finish updating, we use a loading state in our react application by use of the conditional rendering of the component. This can be achieved by the use of the useState and useEffect hooks in the functional components. With the help of the state, we make sure at initial it is false and after the update is done it becomes true. This way conditional rendering will render the component only after the update is finished. We use useEffect hook to check the update status and load all the updates when the first time application is rendered.

Let’s see an example to demonstrate the concept. 

Creating React Application:

Step 1: Create a React application using the following command:

npx create-react-app example

Step 2: After creating your project folder i.e. example, move to it using the following command:

cd example

Project structure: It will look like this.

Step 3: Write down the following code in index.js.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Step 4: Here we are using the Axios library for fetching API data, we need to install that by using the command from the root directory.

npm install axios

Step 5: Start your component in “loading mode”.

We will use the concept of conditional rendering and useEffect to wait for a ReactJS component to finish updating. With the use of conditional rendering of “Loading” text and by using useState we achieve the “loading mode” state of the component. useEffect uses a function that will be called after the DOM is updated. This way the time isLoading is false and we are in a waiting state so that in that time whole component gets finally updated. SetTimeout() is used to simulate the delay in the loading so that we can observe the loading state. This way we create a loading state in the application.

App.js

import React, { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [isLoading, setLoading] = useState(true); // Loading state
  const [pokemon, setPokemon] = useState(); // pokemon state

  useEffect(() => { // useEffect hook
  setTimeout(() => { // simulate a delay
  axios.get("https://pokeapi.co/api/v2/pokemon/1")
  .then((response) => {

      // Get pokemon data
      setPokemon(response.data); //set pokemon state
      setLoading(false); //set loading state
    });
   }, 3000);
  }, []);

  if (isLoading) {
    return (
    <div style={{
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      justifyContent: "center",
      height: "100vh",
    }}>Loading the data {console.log("loading state")}</div>
  );
  }

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        height: "100vh",
      }}
    >
      <span>{pokemon.name}</span>
      <img alt={pokemon.name}
        src={pokemon.sprites.front_default} />
    </div>
  );
}

export default App;

Step to run the application: Open the terminal and type the following command.

npm start

Output: When we run the above code.

loading state