React hook: useMemo

El hook useMemo es parte de las funciones o herramientas que te brinda React, el cual te permite optimizar el rendimiento de tus componentes.

En este artículo, exploraremos qué es useMemo, cómo se utiliza y cuándo es apropiado aplicarlo.

💭 Hook useMemo

Es un hook de React que te permite "memoizar" el resultado de una función para evitar cálculos innecesarios.

En esencia, puedes utilizar useMemo para almacenar en memoria el valor de retorno de una función y solo actualizarlo cuando sus dependencias cambien.

Ejemplo de estructura de useMemo:

jsx
import React, { useMemo } from 'react';

const Componente = ({ datos }) => {
    const datosProcesados = useMemo(() => {
        // Realiza cálculos costosos en 'datos' y devuelve el resultado
        // Solo se volverá a calcular cuando 'datos' cambie
        return datosProcesados(datos);
    }, [datos]); // Dependencias, si estas cambian se renderiza de nuevo

    return <div>{datosProcesados}</div>;
};
Copiar

📚 Casos de uso comunes

Algunos casos de uso comunes en los que useMemo resulta útil:

1. Cálculos costosos: Cuando tienes una función que realiza cálculos intensivos o consume muchos recursos, puedes utilizarlo para evitar que se vuelva a calcular en cada renderizado del componente. En su lugar, el resultado se almacenará en memoria y solo se actualizará cuando las dependencias cambien.

2. Optimización de renderizados: Es útil para optimizar renderizados innecesarios. Puedes envolver componentes o partes de ellos en useMemo para asegurarte de que solo se vuelvan a renderizar cuando sea necesario. Esto puede mejorar significativamente el rendimiento de tu aplicación, especialmente en componentes que se actualizan con frecuencia.

3. Evitar re-renderizados en componentes hijos: Al utilizar este hook para memoizar propiedades pasadas a componentes hijos, puedes evitar que se re-rendericen innecesariamente. Esto es especialmente útil cuando pasas objetos grandes o funciones como props, ya que evita la creación de nuevas instancias en cada renderizado.

💻 Ejemplos de código

A continuación se presentan ejemplos prácticos donde se demuestra el uso de este hook:

🔟 Contador y paridad:

Supongamos que tienes un componente que muestra un contador y un botón. Cada vez que se hace clic en el botón, el contador aumenta en 1. Sin embargo, solo quieres mostrar el contador si su valor es par. Puedes utilizar useMemo para memoizar la condición de paridad y evitar calcularla en cada renderizado del componente.

Aquí tienes un ejemplo donde se utiliza junto al hook useState:

jsx
import React, { useState, useMemo } from 'react';

const Counter = () => {
    const [contador, setContador] = useState(0);

    const esPar = useMemo(() => {
        console.log('Calculando paridad...');
        return contador % 2 === 0;
    }, [contador]);

    return (
        <div>
            <h2>Contador: {contador}</h2>
            <button onClick={() => setCount((contadorAnterior) => contadorAnterior + 1)}>Incrementar</button>
            {esPar && <p>El contador es par.</p>}
        </div>
    );
};
Copiar

En este ejemplo, esPar es la condición que verifica si el contador es par. La función memoizada se ejecutará solo cuando la dependencia count cambie, es decir, cada vez que se haga clic en el botón para incrementar el contador.

Puedes observar en la consola que el cálculo de paridad solo se realiza cuando el contador cambia. Si se hace clic en el botón y el contador no cambia (es decir, si el número es impar), el cálculo no se realiza nuevamente.

📓 Lista de usuarios

Supongamos que tienes un componente que muestra una lista de usuarios y quieres filtrar esa lista en función de algún criterio. Puedes utilizar useMemo para memoizar el resultado de la lista filtrada y evitar recálculos innecesarios cuando el criterio de filtrado no cambie.

Aquí tienes un ejemplo donde se utiliza junto al hook useState:

jsx
import React, { useState, useMemo } from 'react';

const ListaUsuarios = ({ usuarios }) => {
    const [filtro, setFiltro] = useState('');

    const usuariosFiltrados = useMemo(() => {
        // Filtrar la lista de usuarios según el criterio de filtrado
        return usuarios.filter((usuario) => usuario.nombre.toLowerCase().includes(filtro.toLowerCase()));
    }, [usuarios, filtro]);

    return (
        <div>
            <input type='text' value={filtro} onChange={(e) => setFiltro(e.target.value)} placeholder='Filtrar usuarios' />
            <ul>
                {usuariosFiltrados.map((usuario) => (
                    <li key={usuario.id}>{usuario.nombre}</li>
                ))}
            </ul>
        </div>
    );
};
Copiar

En este ejemplo, el estado "filtro" representa el criterio de filtrado ingresado por el usuario. Dentro del useMemo, se realiza el filtrado de la lista de usuarios utilizando el criterio de filtrado actual.

El resultado filtrado se memoiza utilizando useMemo, lo que significa que solo se actualizará cuando "usuarios" (la lista completa de usuarios) o "filtro" cambien.

Recuerda que useMemo es especialmente útil cuando tienes operaciones costosas o que consumen muchos recursos, ya que te permite evitar su ejecución innecesaria en cada renderizado.