¿Cómo mejorar la renderización lenta de la aplicación React?

ReactJS es una biblioteca de JavaScript para crear interfaces de usuario. De esa

¿Qué es la representación?

React utiliza el concepto de Virtual DOM . Todos los elementos en React se representan utilizando el método de representación en el que debemos proporcionar una identificación de un elemento (principalmente div) para ser representado. Cada elemento en React es inmutable. Por lo tanto, para Actualizar el elemento, tenemos que volver a llamar al método Render. Consulte aquí para obtener más detalles.

¿Qué es la renderización de aplicaciones de reacción lenta?

La representación lenta de la aplicación React, como su nombre indica, es un retraso pequeño o grande en la representación de elementos. Puede haber múltiples razones para eso. Esto debe evitarse. 

Métodos para mejorar la representación de aplicaciones de reacción lenta:

En el siguiente enfoque, veremos cómo los ganchos se pueden usar de manera efectiva para evitar un renderizado lento. Los ganchos pueden desempeñar un papel importante en la reducción del número de renderizaciones. Recuerde que se vuelve a renderizar cada vez que hay un cambio en un componente de estado. Hace que el método de representación vuelva a llamar y luego reaccione actualizando solo una parte que debe actualizarse comparando copias de Virtual DOM. 

El siguiente es un ejemplo de cómo useMemo hook viene al rescate si hay un cálculo grande en una función.

Creación de la aplicación React

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

  npx create-react-app useMemo 

• Paso 2: después de crear la carpeta de su proyecto, es decir, useMemo , acceda a ella con el siguiente comando:

  cd useMemo

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo 1: sin usar useMemo Hook

import { useState } from "react";
import "./App.css";
  
export default function App() {
  
  // 1st counter state
  const [counter1, setCounter1] = useState(0);
  
  // 2nd counter state
  const [counter2, setCounter2] = useState(0);
  
  // Sample Heavy Calculation Function
  const heavyCalculation = () => {
    let i = 0;
    for (let outer = 0; outer < 10000; outer++) {
      for (let temp = 0; temp < 10000; temp++) {
        while (i < 10000) i++;
      }
    }
    return counter1 % 2 === 0 ? true : false;
  };
  
  return (
    <div className="App">
      {heavyCalculation()
        ? `Counter is even with value ${counter1}`
        : `Counter is odd with value ${counter1}`}
      <br />
      <button
        onClick={() => {
          setCounter1(counter1 + 1);
        }}
      >
        Increment counter1
      </button>
      <br />
      Counter 2 is {counter2}
      <br />
      <button
        onClick={() => {
          setCounter2(counter2 + 1);
        }}
      >
        Increment counter2
      </button>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: en el resultado anterior, se llama a una función pesada en Rendering. Ahora, a pesar de que se está utilizando para el primer contador, todavía causa que el renderizado sea lento debido a la lentitud del contador 2.

Ejemplo 2: uso del gancho useMemo

import { useState, useMemo } from "react";
import "./App.css";
  
export default function App() {
  
  // 1st counter state
  const [counter1, setCounter1] = useState(0);
  
  // 2nd counter state
  const [counter2, setCounter2] = useState(0);
  
  // Our custom useMemo Function
  const useMemoFunction = useMemo(() => {
    let i = 0;
    for (let outer = 0; outer < 10000; outer++) {
      for (let temp = 0; temp < 10000; temp++) {
        while (i < 10000) i++;
      }
    }
    return counter1 % 2 === 0 ? true : false;
  }, [counter1]);
  
  return (
    <div className="App">
      {useMemoFunction
        ? `Counter is even with value ${counter1}`
        : `Counter is odd with value ${counter1}`}
      <br />
      <button
        onClick={() => {
          setCounter1(counter1 + 1);
        }}
      >
        Increment counter1
      </button>
      <br />
      Counter 2 is {counter2}
      <br />
      <button
        onClick={() => {
          setCounter2(counter2 + 1);
        }}
      >
        Increment counter2
      </button>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: en este caso, el enlace useMemo que contiene counter1 usa la funcionalidad pesada como una dependencia. Debido a esto, el contador 1 todavía muestra un retraso, pero no afecta el rendimiento del contador 2.