useCallback Hook ### ### Introducción ### El Hook useCallback es similar a useMemo, pero en lugar de memorizar un valor, memoriza una función. Este Hook es útil para evitar la re-creación de funciones en cada renderización, especialmente cuando se pasan como props a componentes hijos que dependen de referencia de la función. ### Sintaxis básica ### useCallback toma una función y una lista de dependencias, y solo re-crea la función si alguna de las dependencias cambia. javascript import React, { useState, useCallback } from 'react'; function ChildComponent({ onButtonClick }) { return <button onClick={onButtonClick}>Haz clic aquí</button>; } function ParentComponent() { const [count, setCount] = useState(0); const handleClick = useCallback(() => { console.log('Button clicked!'); }, []); return ( <div> <p>Count: {count}</p> <ChildComponent onButtonClick={handleClick} /> <button onClick={() => setCount(count + 1)}>Incrementar Count</button> </div> ); } ### Descripción del ejemplo ### En este ejemplo: - ParentComponent declara una función handleClick usando useCallback. - handleClick solo se crea una vez durante el ciclo de vida del componente porque su dependencia (el array vacío) no cambia. - ChildComponent recibe handleClick como prop, y esta referencia no cambiará entre renderizaciones, previniendo renders innecesarios del componente hijo. ### Casos de uso ### useCallback es especialmente útil cuando: - Props de función están causando re-renderizaciones no deseadas: Cuando pasas una función como prop a un componente hijo que podría re-renderizarse debido a que la referencia de la función ha cambiado. - Optimización de performance: En componentes que dependen de funciones memoizadas para evitar renders adicionales o cálculos complejos. ### Ejemplo avanzado ### Considera un botón que solo se re-renderiza cuando cambian props específicas. javascript import React, { useState, useCallback } from 'react'; function Button({ onClick, text }) { console.log('Button renderizado'); return <button onClick={onClick}>{text}</button>; } function App() { const [count, setCount] = useState(0); const [text, setText] = useState('Haz clic aquí'); const handleClick = useCallback(() => setCount(count + 1), [count]); return ( <div> <Button onClick={handleClick} text={text} /> <button onClick={() => setText('Texto actualizado')}>Actualizar texto</button> <p>Count: {count}</p> </div> ); } ### Descripción del ejemplo avanzado ### En este ejemplo: - handleClick se memoiza usando useCallback y solo se re-crea cuando count cambia. - El componente Button solo se re-renderiza cuando el texto o la referencia de la función handleClick cambia. ### Cuándo no usar useCallback ### Similar a useMemo, no uses useCallback de manera excesiva. Su uso puede añadir complejidad innecesaria si no tienes problemas específicos de rendimiento que resolver. ### Comparación con useMemo ### Mientras que useMemo memoiza valores, useCallback memoiza funciones. Ambos tienen casos de uso y beneficios propios en la optimización del rendimiento de una aplicación. ### Advertencias ### Al igual que con cualquier optimización de rendimiento, debes medir y estar seguro de que useCallback tiene un impacto positivo claro. Uso sin medida puede llevar a dificultar el mantenimiento sin beneficios reales. [Placeholder para imagen sobre el uso de useCallback: Diagrama que muestra cómo useCallback trabaja para evitar la re-creación de funciones en cada render, destacando la dependencia de valores y la relación con props de componentes hijos.]