useCallback de React

 ¿Para qué se usa useCallback?

¡Absolutamente! El hook useCallback es una herramienta fundamental en React para la optimización del rendimiento, especialmente en aplicaciones grandes. Su objetivo es evitar recrear funciones innecesariamente en cada renderizado.

---

¿Qué es useCallback?

useCallback es un hook de React que memoiza una función. Esto significa que le dice a React que guarde una versión de esa función y que solo la recree si alguna de sus dependencias ha cambiado.

Sintaxis

Si el array de dependencias ([dependencias]) no cambia entre un renderizado y otro, useCallback devolverá exactamente la misma instancia de la función que se guardó anteriormente.

---

¿Para qué se usa? (El problema que resuelve)

En React, cuando un componente se re-renderiza, todas las funciones que están definidas dentro de él son recreadas desde cero, incluso si su lógica interna no ha cambiado.

Aunque esto suele ser rápido, en ciertas situaciones puede causar problemas de rendimiento:

1. Evitar Re-renderizados de Componentes Hijos Optimizados

Este es el uso más común. Si estás pasando una función como prop a un componente hijo que ha sido optimizado con React.memo o shouldComponentUpdate, esta optimización se puede romper:

• Sin useCallback: En cada renderizado del padre, se crea una nueva función (una nueva referencia en memoria).

• El componente hijo optimizado recibe la nueva función como prop.

• Aunque la lógica de la función sea idéntica, la referencia en memoria es diferente.

• El componente hijo (optimizado) piensa que la prop ha cambiado y, por lo tanto, se re-renderiza innecesariamente.

Al usar useCallback, te aseguras de que el componente hijo solo se re-renderice si la lógica de la función o sus dependencias realmente han cambiado, manteniendo efectiva la optimización de React.memo.

2. Dependencias de useEffect

Si usas una función dentro de un hook useEffect (o useLayoutEffect) y esa función depende de props o state, es una buena práctica incluir esa función en el array de dependencias de useEffect.

Si no memoizas la función con useCallback, esta se recreará en cada renderizado del componente padre, forzando al useEffect a ejecutarse de nuevo de forma innecesaria en cada ciclo, incluso si las dependencias del efecto no han cambiado.

3. Rendimiento en Listas

Cuando se trabaja con listas grandes, donde se genera una función de callback (como onClick o onChange) para cada elemento de la lista, useCallback puede ser útil. Asegurar la estabilidad de la función de callback pasada a los ítems de la lista puede evitar re-renderizados innecesarios en miles de elementos.

---

Ejemplo Práctico

Imagina que tienes un componente principal que renderiza una lista de miles de ítems (ItemOptimizado). Queremos que solo se re-renderice si la prop cambia.

❌ Mal Uso (Re-renderizado Innecesario)

✅ Buen Uso (Optimizado con useCallback)

En resumen, utiliza useCallback para mantener la estabilidad de las funciones que se pasan a otros componentes (especialmente los optimizados con React.memo) o que se utilizan como dependencias en useEffect. Es una herramienta de micro-optimización que debe usarse con criterio cuando el rendimiento es una preocupación real.