Caché en React: Cómo usar el hook useMemo

A medida que te vuelves más proficiente programando en React, el rendimiento se convierte en un punto focal importante en tu proceso de desarrollo. Como con cualquier herramienta o metodología de programación, el caché juega un rol enorme cuando se trata de optimizar aplicaciones de React. El caché en React típicamente se refiere a la memoización. Se utiliza para mejorar el rendimiento al reducir la cantidad de veces que un componente se renderiza debido al estado o a las mutaciones del prop.

Comportamiento predeterminado de almacenamiento en caché en React

Por defecto, React usa una técnica llamada “comparación superficial” para determinar si un componente debe ser re-renderizado. Esto significa básicamente que si las propiedades o el estado de un componente no han cambiado, React asumirá que la salida del componente tampoco ha cambiado y no lo re-renderizará. Aunque este comportamiento de almacenamiento en caché predeterminado es efectivo, no siempre es suficiente para optimizar componentes complejos que requieren una gestión de estado avanzado.

El hook useMemo

El hook useMemo es útil cuando necesitas hacer un cálculo costoso para devolver un valor y quieres asegurarte de que el cálculo solo se ejecute cuando sea necesario. Al memoizar el valor usando useMemo, puedes asegurarte de que el valor se ejecute solamente cuando sus dependencias cambien.

Aquí tienes un ejemplo de cómo usar useMemo en un componente de React:


import React, { useState, useMemo } from 'react';

function Example() {
const [count, setCount] = useState(0);
const [text, setText] = useState('');

// Función de cálculo costoso
const expensiveCalculation = (num) => {
console.log('Calculando...');
let result = 0;
for (let i = 0; i < 1000000000; i++) {
result += num;
}
return result;
};

// Memoizar el resultado del cálculo costoso
const memoizedValue = useMemo(() => expensiveCalculation(count), [count]);

return (



Resultado del cálculo: {memoizedValue}


 setText(e.target.value)}
placeholder="Escribe algo..."
/>


);
}

export default Example;

Recuerda que useMemo es especialmente útil cuando tienes cálculos costosos o funciones que se ejecutan con frecuencia en tus componentes