Gancho de useMemoreacción
El React useMemoHook devuelve un valor memorizado.
Piense en la memorización como el almacenamiento en caché de un valor para que no sea necesario volver a calcularlo.
El useMemoHook solo se ejecuta cuando se actualiza una de sus dependencias.
Esto puede mejorar el rendimiento.
Los ganchos useMemoy useCallbackson similares. La principal diferencia es que useMemodevuelve un valor memorizado y
useCallbackdevuelve una función memorizada. Puede obtener más información useCallbacken el capítulo useCallback .
Rendimiento
El useMemogancho se puede utilizar para evitar que funciones costosas y que consumen muchos recursos se ejecuten innecesariamente.
En este ejemplo, tenemos una función costosa que se ejecuta en cada renderizado.
Al cambiar el conteo o agregar una tarea pendiente, notará un retraso en la ejecución.
Ejemplo:
Una función de bajo rendimiento. La expensiveCalculationfunción se ejecuta en cada renderizado:
import { useState } from "react";
import ReactDOM from "react-dom";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const calculation = expensiveCalculation(count);
const increment = () => {
setCount((c) => c + 1);
};
const addTodo = () => {
setTodos((t) => [...t, "New Todo"]);
};
return (
<div>
<div>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</div>
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
<h2>Expensive Calculation</h2>
{calculation}
</div>
</div>
);
};
const expensiveCalculation = (num) => {
console.log("Calculating...");
for (let i = 0; i < 1000000000; i++) {
num += 1;
}
return num;
};
ReactDOM.render(<App />, document.getElementById('root'));
¡Obtener la certificación!
$95 INSCRÍBETE
Usar useMemo
Para solucionar este problema de rendimiento, podemos usar el useMemogancho para memorizar la expensiveCalculationfunción. Esto hará que la función solo se ejecute cuando sea necesario.
Podemos envolver la costosa llamada de función con useMemo.
El useMemoHook acepta un segundo parámetro para declarar dependencias. La función costosa solo se ejecutará cuando sus dependencias hayan cambiado.
En el siguiente ejemplo, la función costosa solo se ejecutará cuando count
se cambie y no cuando se agreguen tareas pendientes.
Ejemplo:
Ejemplo de rendimiento usando el useMemogancho:
import { useState, useMemo } from "react";
import ReactDOM from "react-dom";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);
const calculation = useMemo(() => expensiveCalculation(count), [count]);
const increment = () => {
setCount((c) => c + 1);
};
const addTodo = () => {
setTodos((t) => [...t, "New Todo"]);
};
return (
<div>
<div>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</div>
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
<h2>Expensive Calculation</h2>
{calculation}
</div>
</div>
);
};
const expensiveCalculation = (num) => {
console.log("Calculating...");
for (let i = 0; i < 1000000000; i++) {
num += 1;
}
return num;
};
ReactDOM.render(<App />, document.getElementById('root'));