useMemo vs useCallback: ¿Quién es quién en React?

Siempre me han echo esta pregunta en entrevistas tech y debo admitirlo en más de una ocasión me corcharon 😳 es por eso que hoy quiero ver este tema y de seguro cuando presentes una entrevista te acordarás de mi 😂.

¿Cuál es la diferencia entre useMemo y useCallback?
¿Y cuándo deberías usar uno u otro?

Spoiler: los dos sirven para memorizar cosas… pero cada uno memoriza cosas diferentes.

🧠 useMemo: memoriza valores

Cuando tienes una función que retorna un valor calculado, y no quieres que se vuelva a recalcular a cada render, usas useMemo.

✨ Ejemplo:

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

  const expensiveComputation = useMemo(() => {
    console.log('Calculando...');
    return count * 1000;
  }, [count]);

  return (
    <div className="p-4">
      <p>Resultado: {expensiveComputation}</p>
      <button onClick={() => setCount(count + 1)}>Sumar</button>
    </div>
  );
};

👀 ¿Qué pasa aquí?

• Cada vez que count cambia, se recalcula el valor.
• Si count no cambia, React reutiliza el valor anterior y se ahorra la operación costosa.
• Se usa para evitar cálculos innecesarios (ej: filtros, ordenamientos, etc).

🔁 useCallback: memoriza funciones

Cuando necesitas pasar una función como prop o quieres evitar que cambie en cada render, usas useCallback.

✨ Ejemplo:

const Button = React.memo(({ onClick }: { onClick: () => void }) => {
  console.log('Botón renderizado');
  return <button onClick={onClick}>Haz clic</button>;
});

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

  const handleClick = useCallback(() => {
    console.log('Clic!');
  }, []); // No depende de nada, así que no cambia

  return (
    <div className="p-4">
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>Sumar</button>
      <Button onClick={handleClick} />
    </div>
  );
};

👀 ¿Qué pasa aquí?

• La función handleClick no cambia en cada render.
• El componente Button (que está memorizado con React.memo) no se vuelve a renderizar innecesariamente.
• Usas useCallback cuando te importa la referencia de la función, no su valor retornado.

🧪 Diferencias clave en resumen

🚀 ¿Y cuándo usar cada uno?

🧠 Usa useMemo cuando:

• Tienes cálculos costosos
• Quieres evitar que se vuelvan a ejecutar
• Ej: filtros, sorting, datos derivados

🔁 Usa useCallback cuando:

• Pasas funciones a componentes hijos
• Usas React.memo y no quieres que se renderice de más
• Usas hooks como useEffect que dependen de funciones

📌 Conclusión

• No uses useMemo o useCallback por defecto.
• Úsalos cuando realmente estés enfrentando problemas de rendimiento o cuando quieras optimizar renders.
• Si los usas mal… ¡puede que incluso tengas peor rendimiento!

💡 Tip: Si no estás seguro si deberías usarlos, probablemente no necesitas usarlos… aún.

¿Te gustó esta explicación?
Guárdala, compártela o pásasela al que usa useMemo como si fuera useState. 😅

¿Quieres más tips de React y frontend?
¡Sígueme para más hacks dev! 😎💻