Cómo evitar renders innecesarios en React con memo
En React, los renders innecesarios pueden afectar el rendimiento de una aplicación. Para optimizarlos, podemos usar React.memo, que memoriza el resultado de un componente y evita su re-render si sus props no han cambiado.
Uso de React.memo para evitar renders innecesarios
React.memo es una función de orden superior (HOC) que envuelve un componente y lo vuelve "puro", es decir, solo se re-renderiza si sus props cambian.
Ejemplo:
import React from "react";
const Saludo = React.memo(({ nombre }) => {
console.log("Renderizando Saludo...");
return <h2>Hola, {nombre}!</h2>;
});
export default function App() {
const [contador, setContador] = React.useState(0);
return (
<div>
<Saludo nombre="Carlos" />
<p>Contador: {contador}</p>
<button onClick={() => setContador(contador + 1)}>Incrementar</button>
</div>
);
}¿Qué ocurre aquí?
-
El componente
Saludose renderiza solo una vez, porque su prop (nombre) no cambia. - El contador se actualiza sin afectar el componente memoizado.
-
Si
nombrecambia, se renderizará nuevamente.
Personalizar la comparación de props
Por defecto, React.memo usa comparación superficial para detectar cambios en las props. Si necesitas una validación más profunda, puedes usar una función de comparación personalizada:
const Saludo = React.memo(({ usuario }) => {
console.log("Renderizando Saludo...");
return <h2>Hola, {usuario.nombre}!</h2>;
}, (prevProps, nextProps) => prevProps.usuario.id === nextProps.usuario.id);Aquí, el componente solo se re-renderiza si el ID del usuario cambia.
Enlace a la documentación oficial
Más información en la documentación de React.
Jorge García
Fullstack developer