Optimizando el rendimiento en React con useMemo y useCallback

React nos proporciona varios hooks para optimizar el rendimiento de nuestras aplicaciones. Dos de los más importantes son useMemo y useCallback. En este artículo, veremos cuándo y cómo usarlos efectivamente.

¿Cuándo usar useMemo?

useMemo es perfecto para memorizar valores computacionalmente costosos. Aquí hay un ejemplo práctico:

// ❌ Sin memorización
const expensiveValue = calculateExpensiveValue(props.data);

// ✅ Con memorización
const memoizedValue = useMemo(() => {
  return calculateExpensiveValue(props.data);
}, [props.data]);

useCallback en la práctica

useCallback es especialmente útil cuando pasamos funciones como props a componentes memorizados con React.memo. Veamos un ejemplo:

// ❌ Sin memorización
const handleClick = () => {
  console.log(props.value);
};

// ✅ Con memorización
const handleClick = useCallback(() => {
  console.log(props.value);
}, [props.value]);

Ejemplo completo de optimización

Aquí tienes un ejemplo más completo que combina ambos hooks en un escenario real:

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

interface DataItem {
  id: number;
  value: number;
}

interface Props {
  data: DataItem[];
  onItemSelect: (item: DataItem) => void;
}

const DataList: React.FC<Props> = ({ data, onItemSelect }) => {
  // Memorizar cálculos costosos
  const sortedData = useMemo(() => {
    return [...data].sort((a, b) => b.value - a.value);
  }, [data]);

  // Memorizar función de callback
  const handleItemClick = useCallback((item: DataItem) => {
    console.log('Item clicked:', item);
    onItemSelect(item);
  }, [onItemSelect]);

  return (
    <ul>
      {sortedData.map((item) => (
        <li key={item.id} onClick={() => handleItemClick(item)}>
          {item.value}
        </li>
      ))}
    </ul>
  );
};

export default React.memo(DataList);

Conclusiones

La optimización del rendimiento es crucial en aplicaciones React modernas, pero es importante no caer en la sobre-optimización. Usa estos hooks cuando:

• Tienes cálculos computacionalmente costosos (useMemo)
• Pasas callbacks a componentes memorizados (useCallback)
• Necesitas mantener la referencia estable de un valor u objeto

Recuerda que la memorización tiene su propio costo, así que asegúrate de medir el rendimiento antes y después de aplicar estas optimizaciones.