¿Cómo optimizar el rendimiento de la aplicación React?

Las operaciones involucradas en mantener las actualizaciones del DOM son costosas, pero react utiliza varias técnicas para minimizar el no. de operaciones que conduce a una interfaz de usuario más rápida de forma nativa para muchos casos. Aún así, podemos utilizar varias técnicas para acelerar la aplicación:

1. Usar funciones vinculantes en constructores: al agregar una función de flecha en una clase, la agregamos como un objeto y no como la propiedad prototipo de la clase. Y si usamos el componente varias veces, habrá varias instancias de estas funciones dentro de cada objeto del componente. La forma más confiable de usar funciones es vincularlas con el constructor.

2. Evite los atributos de estilo en línea: el navegador a menudo invierte mucho tiempo en renderizar, cuando los estilos están implícitos en línea. La creación de secuencias de comandos y la representación toman tiempo porque el navegador tiene que planificar todas las reglas de estilo de React para las propiedades de CSS. Crear un archivo style.js separado e importarlo al componente es un método más rápido.

Ejemplo: creación de un archivo style.js separado e importación en el componente en lugar de usar el atributo de estilo en línea:

import React from “react”;
import styles from "./styles.css"
  
export default class StyleExample extends React.Component {
    render() {
        return (
            <>
                <h1 style=className={styles.head1}>
                    GeeksforGeeks
                </h1>
            </>
        );
    }
}

.head1 {
    color: green;
    margin: 50;
}

Producción:

3. Evite las etiquetas adicionales mediante el uso de fragmentos de reacción: el uso de fragmentos de reacción disminuye el no. de etiquetas adicionales y satisface la necesidad de tener un solo elemento principal en el componente.

Ejemplo: uso de fragmentos de reacción

import React from "react";
const App = () => {
    return (
        <div>
            <h1 style={{ color: "green", margin: 50 }}>
                GeeksforGeeks: react fragments as root element
            </h1>
        </div>
    );
};
export default App;

Producción:

4. Evite la función en línea en el método de procesamiento: si usamos la función en línea, la función generará una nueva instancia del objeto en cada procesamiento y habrá múltiples instancias de estas funciones, lo que llevará a consumir más tiempo en la recolección de elementos no utilizados. Para optimizar eso, podemos definir funciones fuera del método render y llamarlas donde sea necesario.

Ejemplo: creación de funciones fuera del método render

import React, { useState } from "react";
const App = () => {
    const [isClicked, setIsclicked] = useState(false);
    const handleClicked = () => {
        setIsclicked(true);
        console.log(`clicked ${isClicked}`);
    };
    return (
        <div style={{ margin: 50 }}>
            <h1 style={{ color: "green" }}>
                GeeksforGeeks: function outside render example
            </h1>
            <button onClick={handleClicked}>Click me!</button>
        </div>
    );
};
export default App;

Producción:

5. Evite agrupar todo el código front-end en un solo archivo: al dividir los archivos en archivos de código de recursos y bajo demanda, podemos reducir el tiempo que se consume en presentar los archivos agrupados a los transformadores del navegador.