Memoización en React: Mejorando la eficiencia con useMemo

03.03.24 | By Jesús Cárdenas
demo

Introduccion

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!

Punto de partida

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;

Explicación del Código

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.

Contexto useMemo:

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>
...

Explicación del Código

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.

Analogía

librero

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.

Nota
te invito a seguir praacticando el uso de useMemo, ademas te dejo el link de la documentacion oficial de React : useMemo
github_card
iGeek0/useMemo

Revisa el repositorio de github para ver el codigo completo de esta entrada.

React

Programacion

Ultimas Publicaciones


demo

Memoización en React: Mejorando la eficiencia con useMemo

03.03.24

demo

Formularios nativos en react

16.01.24

demo

Relato: El chico que entendía a las máquinas

16.01.24

demo

Introduccion Mongo Shell

27.12.23

demo

Agrega Bootstrap a tu proyecto de React

09.12.23