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.
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.
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;
Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.
npm start
Salida: cuando ejecutamos el código anterior.