viernes 27 diciembre 2024

Cómo optimizar el rendimiento con useMemo en React

El hook useMemo en React permite memorizar valores calculados, evitando que funciones costosas se ejecuten innecesariamente en cada renderizado. Es ideal para optimizar el rendimiento de tu aplicación al limitar los cálculos innecesarios.

¿Qué es useMemo y cómo funciona?

useMemo memoriza el resultado de una función y solo recalcula el valor si alguna de las dependencias especificadas cambia. Esto evita que se realicen operaciones costosas en cada render, ahorrando recursos.

Sintaxis básica

const memoizedValue = useMemo(() => {
  // Cálculo costoso aquí
  return resultado;
}, [dependencias]);

Cálculo costoso: La función que realiza el cálculo.
Dependencias: Array de variables que, al cambiar, activan el recálculo.

Tabla de parámetros

Parámetro	Tipo	Descripción
Función de cálculo	`function`	Función que retorna el valor a memorizar.
Dependencias	`array`	Lista de valores que disparan el recálculo cuando cambian.

Ejemplos de uso con useMemo

Evitar cálculos innecesarios

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

function App() {
  const [count, setCount] = useState(0);

  const expensiveCalculation = useMemo(() => {
    console.log('Cálculo costoso ejecutado');
    return count * 2;
  }, [count]);

  return (
    <div>
      <p>Cálculo memorado: {expensiveCalculation}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

Filtrar listas extensas

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

function App() {
  const [search, setSearch] = useState('');
  const items = ['manzana', 'naranja', 'banana', 'uva'];

  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(search));
  }, [search, items]);

  return (
    <div>
      <input 
        type="text" 
        placeholder="Buscar" 
        value={search} 
        onChange={(e) => setSearch(e.target.value)} 
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Referencias oficiales

Para más información, consulta la documentación oficial de React sobre useMemo.

Etiquetas:

react

Creado por:

Jorge García

Fullstack developer