useMemo

Vista previa del material en texto

UseMemo 
 
`useMemo` es otro hook en React que se utiliza para optimizar el rendimiento al memorizar el 
resultado de una función costosa y solo recalcularla cuando las dependencias cambian. La función 
pasada a `useMemo` será llamada solo cuando sea necesario y su resultado se almacenará en caché 
hasta que alguna de las dependencias cambie. 
 
El uso más común de `useMemo` es para evitar recálculos innecesarios en componentes funcionales, 
especialmente cuando las funciones que realizan cálculos complejos o costosos son llamadas en 
cada renderizado, incluso si las dependencias no han cambiado. `useMemo` puede ayudar a mejorar 
el rendimiento evitando cálculos redundantes y haciendo que tu aplicación sea más rápida y 
eficiente. 
 
Sintaxis del hook `useMemo`: 
 
------------------------------------------------------------------------------------------------------------- 
const resultadoMemoizado = useMemo(() => funcionCostosa(), [dependencias]); 
-------------------------------------------------------------------------------------------------------------- 
 
- `funcionCostosa`: La función que realizará los cálculos costosos cuyo resultado queremos 
memorizar. 
- `dependencias`: Un array de dependencias que, cuando cambian, provocarán que `useMemo` 
recalcule el resultado de la función. 
 
Ejemplo de cómo usar `useMemo` en un componente funcional: 
 
--------------------------------------------------------------------------- 
import React, { useState, useMemo } from 'react'; 
 
const Contador = () => { 
 const [numero, setNumero] = useState(0); 
 
 const calcularFactorial = (n) => { 
 console.log('Calculando factorial...'); 
 let factorial = 1; 
 for (let i = 1; i <= n; i++) { 
 factorial *= i; 
 } 
 return factorial; 
 }; 
 
 // Utilizamos useMemo para memorizar el resultado del cálculo factorial 
 const factorialMemoizado = useMemo(() => calcularFactorial(numero), [numero]); 
 
 return ( 
 <div> 
 <p>Factorial de {numero}: {factorialMemoizado}</p> 
 <button onClick={() => setNumero(numero + 1)}>Incrementar</button> 
 </div> 
 ); 
}; 
 
export default Contador; 
------------------------------------------------------------------------------------------- 
 
En este ejemplo, hemos creado un componente funcional `Contador` que muestra el factorial de un 
número dado. La función `calcularFactorial` realiza el cálculo del factorial del número, y si el número 
cambia, React llamaría a esta función en cada renderizado, incluso si el cálculo es costoso. 
 
Sin embargo, hemos utilizado `useMemo` para memorizar el resultado del cálculo factorial. De esta 
manera, cuando el número cambia, React solo recalculará el factorial si el número en sí ha 
cambiado, evitando cálculos innecesarios y mejorando el rendimiento del componente. 
 
`useMemo` es especialmente útil en casos donde las funciones o cálculos son intensivos en recursos 
y no necesitan ser recalculados si las dependencias no han cambiado. Al usar `useMemo` de manera 
inteligente, puedes optimizar el rendimiento de tu aplicación React y asegurarte de que los cálculos 
costosos solo se realicen cuando sea necesario.