Optimización del rendimiento en ReactJS

El rendimiento es muy importante en cualquier aplicación. En ReactJS, optimizar el rendimiento es una tarea importante antes de iniciar una aplicación React. Hay diferentes formas de explorar la optimización de una aplicación React que pueden ayudar a aumentar la velocidad y la eficiencia, así como la experiencia del usuario. 

ReactJS es una biblioteca de JavaScript para crear IU y aplicaciones. React proporciona diferentes formas de minimizar las costosas operaciones DOM necesarias para actualizar la interfaz de usuario. La mayor parte del tiempo, el uso de React conducirá a una experiencia de interfaz de usuario rápida sin hacer mucho trabajo para optimizar el rendimiento.

Hay varias formas de acelerar su aplicación React. Estos son los métodos a seguir:

• Uso de React.Fragment: cuando se trabaja con React, hay casos en los que necesitamos representar varios elementos o devolver un grupo de elementos relacionados. El uso de div adicional para envolver solucionará esto, pero viene con un problema. Porque estamos agregando un Node adicional al DOM, que no es totalmente útil. En casos como este, donde tenemos el componente secundario que está encerrado dentro de un componente principal. Aquí nos encontramos con este problema. Resolvamos esto usando React Fragment, que ayudará a no agregar ningún Node adicional al DOM.
   
• Uso de compilación de producción: otra forma de optimizar una aplicación React es asegurarse de empaquetar su aplicación para producción antes de implementarla. De forma predeterminada, la aplicación está en modo de desarrollo, lo que significa que React incluirá advertencias útiles que vienen con él. Este método es útil mientras desarrolla una aplicación ReactJS, pero crea el problema de que el tamaño de su aplicación es grande y las respuestas son más lentas de lo habitual. Si el proyecto se compila con create-react-app, esto se puede solucionar ejecutando npm run build antes de la implementación, lo que creará una compilación lista para producción de su aplicación en una compilación/carpeta que luego se puede implementar. Esto puede asegurar que su aplicación esté en modo de desarrollo o producción utilizando las herramientas de desarrollo de React.

Desde el directorio del proyecto, ejecute el código:

npm run build

Esto creará una compilación de producción de la aplicación ReactJS.

• Preferir estado local del componente: cada vez que un estado se actualiza en un componente principal, se vuelve a representar el componente principal y sus componentes secundarios. Por lo tanto, debemos asegurarnos de que volver a renderizar un componente solo ocurra cuando sea necesario. Podemos lograr esto haciéndolo local a esa parte del código.
• Memorización de los componentes de React: React.memo es una excelente manera de optimizar el rendimiento, ya que ayuda a almacenar en caché los componentes funcionales.
• La memorización en general es una técnica de optimización que se utiliza principalmente para acelerar los programas informáticos mediante el almacenamiento de los resultados de llamadas a funciones costosas y la devolución del resultado almacenado en caché cuando se repiten las mismas entradas. Cada vez que se procesa una función usando esta técnica, guarda la salida en la memoria, y la próxima vez que se llama a la función con los mismos argumentos, devuelve la salida guardada sin ejecutar la función nuevamente.
• Virtualización de ventanas o listas: la virtualización de ventanas o listas es un concepto de solo representar o escribir la parte visible en la «ventana» actual en el DOM. El número de elementos renderizados por primera vez es menor que el original. Los elementos que no se representan en la primera ventana pequeña se cargarán al desplazarse hacia abajo. Los Nodes DOM de los elementos que salen de la ventana actual se reemplazan por los nuevos que no se representaron la primera vez. Esto mejora el rendimiento de renderizar una lista grande.

Creemos una aplicación e implementemos todo lo anterior para optimizar nuestra aplicación de reacción.

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í.

estructura del proyecto

Ejemplo: para demostrar cómo optimizar la aplicación de reacción. Escriba el siguiente código en index.js y App.js 

• índice.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')
);

• Aplicación.js

import React from "react";
  
const numbers = [1, 2, 3, 4, 5];
  
function List(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number, index) =>
        <li>{number}</li>);
    return (
        <> {/*This is a short format of fragment */}
            <div>List of numbers</div>
            <ul>{listItems}</ul>
        </>
    );
}
  
function App() {
    return (
        <React.Fragment> 
        {/*Fragment is a component that is not rendered */}
            <List numbers={numbers} />
        </React.Fragment>
    );
}
  
export default App;

En el código anterior, usamos el fragmento React, mantuvimos los componentes locales y optimizamos la aplicación React. 

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

npm start

Producción :

Producción