useCallback

Vista previa del material en texto

UseCallback 
 
`useCallback` es otro hook en React que se utiliza para optimizar el rendimiento al memorizar una 
versión memorizada de una función y solo crear una nueva versión cuando alguna de las 
dependencias cambie. Al igual que `useMemo`, `useCallback` puede ayudar a evitar cálculos 
innecesarios y evitar la creación de nuevas funciones en cada renderizado, lo que mejora la 
eficiencia de la aplicación. 
 
La diferencia principal entre `useCallback` y `useMemo` es que `useCallback` se utiliza para 
memorizar funciones, mientras que `useMemo` se utiliza para memorizar resultados de cálculos. 
Ambos hooks funcionan de manera similar, pero `useCallback` es más adecuado para memorizar 
funciones. 
 
Sintaxis del hook `useCallback`: 
 
---------------------------------------------------------------- 
const funcionMemoizada = useCallback(() => { 
 // Lógica de la función 
}, [dependencias]); 
---------------------------------------------------------------- 
 
- `funcionMemoizada`: La función que deseas memorizar. 
- `dependencias`: Un array de dependencias que, cuando cambian, provocarán que `useCallback` 
cree una nueva versión de la función. 
 
Ejemplo de cómo usar `useCallback` en un componente funcional: 
 
-------------------------------------------------------------------------------------------------------------------------------- 
import React, { useState, useCallback } from 'react'; 
 
const Contador = () => { 
 const [numero, setNumero] = useState(0); 
 
 const calcularFactorial = useCallback((n) => { 
 console.log('Calculando factorial...'); 
 let factorial = 1; 
 for (let i = 1; i <= n; i++) { 
 factorial *= i; 
 } 
 return factorial; 
 }, []); 
 
 return ( 
 <div> 
 <p>Factorial de {numero}: {calcularFactorial(numero)}</p> 
 <button onClick={() => setNumero(numero + 1)}>Incrementar</button> 
 </div> 
 ); 
}; 
 
export default Contador; 
------------------------------------------------------------------------------------------------------------------------------ 
 
En este ejemplo, hemos utilizado `useCallback` para memorizar la función `calcularFactorial`. La 
función `calcularFactorial` se crea solo una vez durante el montaje del componente y no se creará 
una nueva versión en cada renderizado. Si no hubiéramos utilizado `useCallback`, la función se 
crearía nuevamente en cada renderizado, incluso si no hay cambios en las dependencias, lo que 
podría llevar a un rendimiento innecesario. 
 
`useCallback` es especialmente útil cuando tienes componentes con dependencias en funciones que 
se pasan como propiedades a componentes hijos. Al memorizar estas funciones, puedes asegurarte 
de que los componentes hijos no vuelvan a renderizarse innecesariamente cuando sus propiedades 
de función no han cambiado. Esto puede mejorar significativamente el rendimiento de tu aplicación 
React, especialmente en escenarios donde se re-renderizan componentes de manera frecuente.