En el desarrollo de aplicaciones web con React,
optimizar el rendimiento es fundamental para garantizar
una experiencia fluida y receptiva para los usuarios.
Una de las herramientas que React nos ofrece para lograr
este objetivo es el hook useMemo
. En esta
entrada, vamos a sumergirnos en el mundo de useMemo
y descubrir cómo puede ayudarnos a mejorar el rendimiento
de nuestros componentes. Veremos cómo memoizar valores puede
reducir la carga de trabajo del navegador al evitar cálculos
repetitivos, lo que resulta en una aplicación más eficiente
y rápida. ¡Acompáñanos en este viaje mientras exploramos
los beneficios de useMemo
y aprendemos a implementarlo
en nuestras aplicaciones React!
Exploremos el siguiente codigo
Fragmento de código
import React, { useState } from 'react';
const Librero = ({ libros }) => {
const totalLibros = () => {
console.log('Calculando total de libros...');
return libros.length;
};
return (
<div>
<h2>Libros en el librero:</h2>
<ul>
{libros.map((libro, index) => (
<li key={index}>{libro}</li>
))}
</ul>
<p>Total de libros: {totalLibros()}</p>
</div>
);
}
const App = () => {
const [listaLibros, setListaLibros] = useState(['Libro 1', 'Libro 2', 'Libro 3']);
return (
<div>
<h1>Librería</h1>
<Librero libros={listaLibros} />
<button onClick={() => setListaLibros(['Libro 1', 'Libro 2', 'Libro 3', 'Libro 4'])}>Agregar Libro</button>
</div>
);
}
export default App;
En este código, estamos construyendo una aplicación React que muestra una lista de libros en un librero. Utilizamos dos componentes funcionales: Librero y App.
Observa cómo el componente Librero recibe una lista de libros como una prop y la muestra en una lista no ordenada. También tiene una función totalLibros que calcula el número total de libros en el librero. Esta función se ejecuta cada vez que se renderiza el componente Librero, lo que significa que se ejecutará cada vez que se actualice el estado de la lista de libros.
Esto puede no ser un problema si la lista de libros es pequeña, pero si la lista es grande o si la función totalLibros es costosa en términos de recursos, puede afectar el rendimiento de la aplicación. Imagina que cada vez que se agrega un libro a la lista, la función totalLibros se ejecuta para calcular el nuevo total. Esto podría resultar en un cálculo innecesario si el total no ha cambiado.
useMemo
es un hook que memoiza el resultado de una función. Toma dos argumentos:
una función y una lista de dependencias. La función es la
que queremos memoizar, y la lista de dependencias es un array
de valores que la función depende. useMemo
memoizará
el valor devuelto por la función y lo reutilizará siempre
que las dependencias no cambien.
Ahora, veamos cómo podemos utilizar useMemo
para optimizar el rendimiento de la aplicación.
Fragmento de código
import React, { useState, useMemo } from 'react';
...
const totalLibros = useMemo(() => {
console.log('Calculando total de libros...');
return libros.length;
}, [libros]);
...
<p>Total de libros: {totalLibros}</p>
...
Primero importamos el hook useMemo
de React.
Luego, envolvemos la función totalLibros con el hook useMemo
. Esto memoiza el valor devuelto por la función, lo que
significa que el valor se calculará solo cuando la lista
de libros cambie. Si la lista de libros no cambia, el
valor memoizado se reutilizará en lugar de volver a
calcularlo.
También pasamos la lista de libros como una dependencia
al hook useMemo
. Esto le dice a React que
debe recalcular el valor memoizado si la lista de libros
cambia. Si la lista de libros no cambia, el valor
memoizado se reutilizará.
Por ultimo considera que hemos cambiado la forma de
mostrar el total de libros en el componente Librero. En
lugar de llamar a la función totalLibros, simplemente
mostramos el valor de totalLibros. Esto es posible
gracias a que totalLibros ahora es el valor memoizado
devuelto por el hook useMemo
.
Al memoizar el valor de totalLibros, evitamos que se recalcule innecesariamente cada vez que se renderiza el componente Librero. Esto puede mejorar el rendimiento de la aplicación al reducir la carga de trabajo del navegador.
Imagina que tienes un librero en tu habitación donde
guardas tus libros. Decides llevar un registro del
número total de libros que tienes en el librero
escribiéndolo en una nota y actualizándolo cada vez que
añades o quitas un libro. Así, cuando alguien te
pregunta cuántos libros tienes, simplemente miras la
nota en lugar de contar todos los libros cada vez. Esta
estrategia optimiza el tiempo y el esfuerzo requeridos
para responder a la pregunta sobre cuántos libros
tienes. Del mismo modo, en React, el hook useMemo
memoiza el resultado de una función costosa para evitar
recálculos innecesarios, mejorando así el rendimiento de
tu aplicación.
useMemo
, ademas te dejo el link de la documentacion oficial de
React : useMemo Revisa el repositorio de github para ver el codigo completo de esta entrada.