CORE Code School
React hook: useMemo
馃挱 Hook useMemo
reactjavascriptweb

React hook: useMemo

6 minutos

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.

Bootcamp Desarrollo Web FullStack

Ver Curso
En esta p谩gina
馃挱 Hook useMemo馃摎 Casos de uso comunes馃捇 Ejemplos de c贸digo
Actualizado 07 may 2023
驴Quieres m谩s?
reactjavascriptweb

F贸rmate como desarrollador@