React Memo: Boosting React Performance con una memoización simple

Introducción

Las aplicaciones reaccionadas a menudo se ocupan de grandes conjuntos de datos y componentes complejos, donde los re-renderizadores innecesarios pueden afectar significativamente el rendimiento. Para abordar esto, React ofrece React. Memo, una herramienta simple pero poderosa para optimizar los componentes y reducir los tiempos de renderizado. En esta guía, exploraremos cómo funciona React Memo, por qué es útil y cómo implementarlo paso a paso.

¿Qué es React Memo?

react.memo es un componente de orden superior (hoc) en React que ayuda a no memorarse componentes funcionales. La memoización es el proceso de almacenamiento en caché de la salida de una función basada en sus entradas, por lo que la función no tiene que recomputar el resultado para las mismas entradas. React Memo funciona de manera similar: "recuerda" la última salida renderizada de un componente y solo lo reorganiza cuando sus accesorios cambian.

¿Por qué reaccionar la nota?

En React, los componentes vuelven a renderizar cada vez que sus componentes principales se vuelven a renderizar. Esto puede causar ineficiencias si la salida de un componente no depende de los cambios en su padre. Por ejemplo, en UI complejas con muchos componentes, puede ver el retraso debido a los re-renderizadores excesivos. El uso de React Memo puede optimizar esto solo actualizando los componentes cuando sea necesario.

Problemas react memo resueltos

1. Re-renders innecesarios

Cuando un componente principal se vuelve a renderizar, sus componentes infantiles también se vuelven a renderizar. Esto puede conducir a cuellos de botella de rendimiento, especialmente cuando los componentes muestran datos estáticos o confiar en accesorios sin cambios.

2. Rendimiento lento o lento en UI complejos

Las aplicaciones con componentes profundamente anidados pueden enfrentar un rendimiento lento debido a los re-renderizadores acumulativos. La memoización, con React Memo, ayuda a prevenir los re-renderizadores de componentes que no requieren actualizaciones, mejorando la capacidad de respuesta de la aplicación.

Cómo funciona React Memo: ejemplo paso a paso

Pasemos por una implementación básica de React Memo. Comenzaremos con un componente simple que no use memoización y veremos cómo Agregar memo React hace una diferencia.

Paso 1: Configure un componente de contador simple sin REACT MEMO

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return 
Count: {count}
;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    

      
       setCount(count   1)}>Increment Count
       setText(e.target.value)} placeholder="Type something..." />
    
  );
}

export default App;

Explicación

En este ejemplo, cada vez que escribe el campo de entrada, el contador de componentes se vuelve a renderizar, a pesar de que el valor de conteo sigue siendo el mismo. Este es un volver a renderizar innecesario que podemos prevenir con React Memo.

Paso 2: Optimización con React Memo

ahora, envolvemos el componente de contador con react.memo para optimizarlo.

import React, { useState } from 'react';

const Counter = React.memo(function Counter({ count }) {
  console.log('Counter component re-rendered');
  return 
Count: {count}
;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    

      
       setCount(count   1)}>Increment Count
       setText(e.target.value)} placeholder="Type something..." />
    
  );
}

export default App;

Explicación

con React.Memo, el contador del componente solo se vuelve a renderizar si su conteo cambia el apoyo. Ahora, escribir en el campo de entrada ya no desencadena un reiniciado del contador, optimizando significativamente el rendimiento.

React Memo in Action: un escenario práctico con listas

vamos a sumergirnos en un ejemplo más complejo para ver los beneficios reales de React Memo. Supongamos que tenemos una lista de elementos con un botón "similar" al lado de cada elemento. Demostraremos cómo React Memo puede evitar re-renderizadores excesivos al gustarles elementos individuales.

Paso 1: cree el componente de la lista sin memo

import React, { useState } from 'react';

function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    

      
{item.name}
       onLike(item.id)}>Like
    
  );
}

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', likes: 0 },
    { id: 2, name: 'Item 2', likes: 0 },
    { id: 3, name: 'Item 3', likes: 0 },
  ]);

  const handleLike = (id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, likes: item.likes   1 } : item
      )
    );
  };

  return (
    

      {items.map((item) => (
        
      ))}
    
  );
}

export default ItemList;

Problema

En el código anterior, cuando le gusta un elemento, todos los elementos vuelven a renderizar, aunque solo a un elemento le gusta el cambio.

Paso 2: Optimizar el componente del elemento con React Memo

const Item = React.memo(function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    

      
{item.name}
       onLike(item.id)}>Like ({item.likes})
    
  );
});

Resultado

ahora, solo el elemento que hace clic para que le guste volverá a renderizar, haciendo que la UI sea mucho más rápida y más eficiente.

¿Cuándo usar React Memo?

React Memo es útil en escenarios específicos, pero usarlo en todas partes puede complicar su código sin agregar un beneficio real. Aquí hay algunas situaciones clave en las que puede ser particularmente efectivo:

1. componentes estáticos : componentes que no cambian a menudo, como encabezados o pies de página.
2. componentes funcionales puros : componentes que dependen únicamente de los accesorios para renderizar.
3. grandes listas de componentes : listas con muchos elementos que deben evitar re-renders innecesarios.

Posibles dificultades y mejores prácticas

1. comparación Shallow : React Memo hace una comparación superficial, lo que significa que no detectará cambios en objetos o matrices profundamente anidados. Considere usar usememo o usecallback si está pasando accesorios complejos.

2. Monitoreo de rendimiento : use React DevTools para identificar qué componentes realmente se benefician de la memoización. Memo react en exceso puede conducir a la complejidad del código con ganancias de rendimiento insignificantes.

Preguntas frecuentes (preguntas frecuentes)

P1: ¿En qué se diferencia React Memo de Usememo y Usecallback?

• react Memo optimiza los re-renderizadores de componentes basados ​​en los accesorios.
• usememo Caches calculados dentro de un componente.
• usecallback Caches Functions, evitando que se recreen en cada render.

P2: ¿Puedo usar React Memo con componentes de clase?

No, React Memo es solo para componentes funcionales. Sin embargo, para los componentes de clase, se puede lograr un comportamiento similar con Purecomponent.

Conclusión

React Memo es una herramienta valiosa para reducir los re-renderizadores innecesarios y aumentar el rendimiento de la aplicación React. Al usarlo selectivamente en componentes funcionales puros o elementos de UI estáticos, puede optimizar su aplicación React sin complicar su estructura. ¡Siga estos pasos, pruebe los ejemplos y siga experimentando para encontrar las mejores estrategias de memorización para su proyecto!