Crochet de useMemoréaction
Le React useMemoHook renvoie une valeur mémorisée.
Considérez la mémorisation comme la mise en cache d'une valeur afin qu'elle n'ait pas besoin d'être recalculée.
Le useMemocrochet ne s'exécute que lorsque l'une de ses dépendances est mise à jour.
Cela peut améliorer les performances.
Les crochets useMemoet useCallbacksont similaires. La principale différence est que useMemorenvoie une valeur mémorisée et
useCallbackrenvoie une fonction mémorisée. Vous pouvez en savoir plus useCallbackdans le chapitre useCallback .
Performance
Le useMemocrochet peut être utilisé pour empêcher les fonctions coûteuses et gourmandes en ressources de s'exécuter inutilement.
Dans cet exemple, nous avons une fonction coûteuse qui s'exécute sur chaque rendu.
Lors de la modification du nombre ou de l'ajout d'une tâche, vous remarquerez un retard d'exécution.
Exemple:
Une fonction peu performante. La expensiveCalculationfonction s'exécute sur chaque rendu :
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'));
Obtenir une certification!
95 $ S'INSCRIRE
UtiliseruseMemo
Pour résoudre ce problème de performances, nous pouvons utiliser le useMemocrochet pour mémoriser la expensiveCalculationfonction. Cela entraînera l'exécution de la fonction uniquement en cas de besoin.
Nous pouvons envelopper l'appel de fonction coûteux avec useMemo.
Le useMemoHook accepte un second paramètre pour déclarer les dépendances. La fonction coûteuse ne s'exécutera que lorsque ses dépendances auront changé.
Dans l'exemple suivant, la fonction coûteuse ne s'exécutera que lorsqu'elle count
est modifiée et non lorsque des tâches sont ajoutées.
Exemple:
Exemple de performance utilisant le useMemoHook :
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'));