Al crear aplicaciones web modernas, el rendimiento es clave. Los usuarios esperan aplicaciones rápidas y con capacidad de respuesta, e incluso un ligero retraso puede generar frustración. React, aunque potente, a veces puede sufrir cuellos de botella en el rendimiento, especialmente a medida que las aplicaciones crecen en tamaño y complejidad. Afortunadamente, existen varias técnicas para optimizar el rendimiento, incluida la memorización, la carga diferida y más.

En esta guía, analizaremos algunas de las formas más efectivas de optimizar el rendimiento en sus aplicaciones React. Cubriremos los conceptos básicos de memorización, carga diferida y herramientas como React Profiler para ayudarlo a identificar y solucionar cuellos de botella. ¡Empecemos!

Introducción: Por qué es importante el rendimiento en las aplicaciones React modernas

Piense en su aplicación web como un automóvil: no importa cuán elegante se vea por fuera, si no funciona bien, la experiencia del usuario se ve afectada. En las aplicaciones React, este "rendimiento" se refiere a la rapidez con la que se procesan sus componentes y la eficiencia con la que se actualizan cuando los datos o el estado cambian.

A medida que su aplicación React escala, volver a renderizar componentes innecesariamente o cargar paquetes pesados ​​todos a la vez puede generar un rendimiento más lento. Es por eso que aprender las técnicas de optimización del rendimiento de React es crucial para crear aplicaciones fluidas y de alto rendimiento.

Memorización en React

Cómo utilizar React.memo y useMemo de forma eficaz

Memorización es una palabra elegante que simplemente significa almacenar en caché el resultado de una llamada a función para que no tengas que volver a calcularlo cada vez. En React, la memorización ayuda a evitar re-renderizaciones innecesarias al recordar el resultado de una renderización anterior y usar ese resultado almacenado en caché si nada ha cambiado.

Reaccionar.memo

Comencemos con React.memo. Este componente de orden superior evita que un componente se vuelva a renderizar si sus accesorios no han cambiado.

Ejemplo:

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return 
Hello, {name}
;
});

En este ejemplo, MyComponent solo se vuelve a representar si el nombre de propiedad cambia. Si pasa el mismo valor de nombre, React omitirá la renderización, mejorando el rendimiento.

utilizarMemoria

A continuación, está useMemo. Este gancho se utiliza para memorizar cálculos o valores costosos dentro de sus componentes funcionales.

Ejemplo:

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total   item.value, 0);
  }, [items]);

  return 
Total Value: {expensiveCalculation}
;
}

Aquí, el cálculo solo se ejecuta nuevamente cuando cambia la matriz de elementos, lo que ahorra tiempo al evitar volver a calcular el mismo resultado en cada renderizado.

Componentes de carga diferida

Mejorando los tiempos de carga con React.lazy

La carga diferida es una técnica en la que los componentes se cargan solo cuando son necesarios, en lugar de cargar todo por adelantado. Esto ayuda a reducir el tiempo de carga inicial de su aplicación, haciéndola sentir más rápida.

React proporciona una función incorporada llamada React.lazy() que le permite cargar componentes a pedido.

Ejemplo:

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    Loading...}>
      
    
  );
}

En este ejemplo, MyComponent solo se cargará cuando sea realmente necesario. El componente Suspense proporciona una interfaz de usuario alternativa (como un control giratorio de carga) mientras se recupera el componente, lo que hace que la experiencia del usuario sea más fluida.

React Profiler para monitoreo del rendimiento

Cómo identificar cuellos de botella

Es difícil optimizar algo que no se puede medir. Ahí es donde entra en juego React Profiler. React Profiler le permite realizar un seguimiento del rendimiento de sus componentes, identificar renderizados lentos y medir el "costo" de los nuevos renderizados.

Para usar React Profiler, simplemente ajuste un árbol de componentes con y proporcione una función de devolución de llamada para recopilar los datos de rendimiento.

Ejemplo:

import { Profiler } from 'react';

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  console.log({ id, phase, actualDuration });
}

function MyApp() {
  return (
    
      
    
  );
}

Con Profiler, puedes realizar un seguimiento de cuánto tiempo tarda cada componente en renderizarse y encontrar áreas donde se puede mejorar el rendimiento, como rerenderizaciones innecesarias.

Otras estrategias de optimización

División de código, optimización del manejo de eventos y más

Más allá de la memorización y la carga diferida, existen otras técnicas para mejorar el rendimiento de tu aplicación React:

1. División de código: divide tu aplicación en partes más pequeñas que se pueden cargar bajo demanda usando la función de división de código de Webpack. Esto reduce el tamaño del paquete inicial.

   const OtherComponent = lazy(() => import('./OtherComponent'));

1. Optimización del manejo de eventos: utilice el enlace useCallback para memorizar los controladores de eventos, evitando que se vuelvan a crear en cada renderizado.

   const handleClick = useCallback(() => {
     console.log('Clicked');
   }, []);

1. Antirrebote y limitación: Optimice los detectores de eventos, como desplazarse o cambiar su tamaño, al eliminar rebotes o limitarlos para limitar la frecuencia de las actualizaciones.

   const handleScroll = debounce(() => {
     console.log('Scroll event');
   }, 300);

Conclusión: creación de aplicaciones React de alto rendimiento con estas técnicas

La creación de aplicaciones React rápidas y eficientes requiere una combinación de técnicas. Al utilizar memoización con React.memo y useMemo, puede evitar re-renderizaciones innecesarias. La carga diferida de componentes con React.lazy le permite mejorar los tiempos de carga al recuperar componentes solo cuando son necesarios. React Profiler le ayuda a identificar cuellos de botella en el rendimiento y optimizarlos.

Combinado con estrategias como la división de código y la optimización de eventos, puede garantizar que sus aplicaciones React brinden una experiencia de usuario fluida y receptiva, incluso a medida que crecen en tamaño y complejidad.

¿Listo para llevar el rendimiento de tu aplicación React al siguiente nivel? ¡Prueba estas técnicas de optimización en tus proyectos y observa cómo mejora la velocidad de tu aplicación!

Si te ha gustado este artículo, considera apoyar mi trabajo:

• Cómprame un café
• Reserve una llamada para recibir tutoría o asesoramiento profesional
• Sígueme en Twitter
• Conéctate en LinkedIn