¿Debes usar siempre useMemo y useCallback en React?

En esta explicación, se aclara el uso de los hooks de React conocidos como useMemo y useCallback. Contrario a lo que muchos desarrolladores creen, no es una buena práctica añadirlos por defecto a todas las funciones o valores.

Puntos clave sobre la optimización

• Uso innecesario: La mayoría de las veces, el coste computacional de recrear una función al renderizar un componente es insignificante. No debes usarlos buscando un aumento de rendimiento prematuro.
• Problemas de renderizado: Al renderizar un componente, todas las constantes y funciones dentro del cuerpo se vuelven a crear. Esto es el comportamiento estándar de JavaScript y React.
• Cuándo usar useCallback: El propósito real es mantener la misma referencia de una función entre renderizados. Esto es vital cuando:
  • Pasas esa función como prop a un componente hijo que está optimizado con memo.
  • La función es una dependencia en un useEffect donde se desea evitar ejecuciones colaterales innecesarias.

"Utiliza useCallback cuando te quieras asegurar que la función que estás pasando no cambia, si no es necesario que cambie."

El riesgo de las dependencias

Al usar estos hooks, es fundamental gestionar correctamente los scopes y las dependencias. Si memorizas una función que depende de un estado (como un contador), pero no incluyes dicho estado en el array de dependencias, la función quedará atrapada con un valor obsoleto. Para evitar esto sin necesidad de recrear la función, se recomienda utilizar el functional update en los setters: setCounter(prev => prev + 1).