¿useMemo frente a useCallback?

Opciones

1. Son idénticos en comportamiento y propósito
2. useMemo memoiza un valor; useCallback, una función (Opción correcta)
3. useCallback memoiza valores; useMemo, funciones
4. Ambos guardan en caché respuestas de API entre renders

Respuesta

useMemo memoiza un valor calculado; useCallback memoiza la referencia de una función

Por qué

Cada render vuelve a ejecutar tu componente y recrea valores y funciones.

useMemo(() => expensiveCalc(data), [data]) conserva el RESULTADO hasta que cambie data.

useCallback(fn, [deps]) conserva el mismo objeto FUNCIÓN, para que los hijos envueltos en React.memo no se rendericen sin necesidad.

Úsalos donde ayuden, no en todas partes.

Recuerda

useMemo → valor. useCallback → función.

Términos clave

• React hook
• Memoization
• React
• Componente
• Estado (UI)
• Props
• JavaScript