useMemo memoiza valores calculados, useCallback memoiza funciones. Ambos evitan trabajo innecesario en re-renderizados.

useMemo

Solo recalcula el valor cuando cambian sus dependencias. Útil para cálculos costosos o para mantener referencias estables entre renderizados.

const sorted = useMemo(() => items.sort(), [items]);

useCallback

Devuelve la misma función a menos que cambien las dependencias. Esencial para pasar callbacks a componentes hijos memoizados.

const handleClick = useCallback(() => doSomething(id), [id]);

Cuándo usarlos

No optimices prematuramente. Solo usa estos hooks cuando perfiles muestren un problema real. Con el React Compiler, estos hooks serán innecesarios.

Errores comunes

Arrays de dependencias incorrectos (faltantes o excesivos), memoizar valores simples, olvidar memoizar en chains de componentes.