¿Cómo esperar a que un componente ReactJS termine de actualizarse?

Para esperar a que un componente de ReactJS termine de actualizarse, usamos un estado de carga en nuestra aplicación de reacción mediante el uso de la representación condicional del componente. Esto se puede lograr mediante el uso de los ganchos useState y useEffect en los componentes funcionales. Con la ayuda del estado, nos aseguramos de que al principio sea falso y, una vez finalizada la actualización, se convierta en verdadero. De esta manera, el renderizado condicional renderizará el componente solo después de que finalice la actualización. Usamos useEffect hook para verificar el estado de actualización y cargar todas las actualizaciones cuando se procesa la aplicación por primera vez.

Veamos un ejemplo para demostrar el concepto. 

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app example

Paso 2: después de crear la carpeta de su proyecto, es decir, ejemplo, muévase a ella con el siguiente comando:

cd example

Estructura del proyecto: Se verá así.

Paso 3: escriba el siguiente código en 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();

Paso 4: aquí estamos usando la biblioteca Axios para obtener datos de API, necesitamos instalar eso usando el comando desde el directorio raíz.

npm install axios

Paso 5: Inicie su componente en «modo de carga».

Usaremos el concepto de representación condicional y useEffect para esperar a que un componente de ReactJS termine de actualizarse. Con el uso de la representación condicional del texto «Cargando» y utilizando useState logramos el estado de «modo de carga» del componente. useEffect usa una función que se llamará después de que se actualice el DOM. De esta manera, el tiempo isLoading es falso y estamos en un estado de espera para que en ese tiempo todo el componente finalmente se actualice. SetTimeout() se usa para simular el retraso en la carga para que podamos observar el estado de carga. De esta manera creamos un estado de carga en la aplicación.

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;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Salida: cuando ejecutamos el código anterior.

estado de carga