Reageerhaak useMemo_
De React useMemoHook retourneert een opgeslagen waarde.
Beschouw memo's als het cachen van een waarde, zodat deze niet opnieuw hoeft te worden berekend.
The useMemoHook wordt alleen uitgevoerd wanneer een van zijn afhankelijkheden wordt bijgewerkt.
Dit kan de prestaties verbeteren.
De useMemoen useCallbackHooks zijn vergelijkbaar. Het belangrijkste verschil is dat useMemoeen gememoriseerde waarde
useCallbackwordt geretourneerd en een gememoriseerde functie wordt geretourneerd. U kunt er meer over leren useCallbackin het hoofdstuk useCallback .
Prestatie
De useMemoHook kan worden gebruikt om te voorkomen dat dure, resource-intensieve functies onnodig worden uitgevoerd.
In dit voorbeeld hebben we een dure functie die op elke render draait.
Bij het wijzigen van de telling of het toevoegen van een taak, merk je een vertraging in de uitvoering.
Voorbeeld:
Een slecht presterende functie. De expensiveCalculationfunctie draait op elke render:
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'));
Gecertificeerd!
$95 INSCHRIJVEN
GebruikenuseMemo
Om dit prestatieprobleem op te lossen, kunnen we de useMemoHook gebruiken om de expensiveCalculationfunctie te onthouden. Hierdoor wordt de functie alleen uitgevoerd als dat nodig is.
We kunnen de dure functieaanroep inpakken met useMemo.
De useMemoHook accepteert een tweede parameter om afhankelijkheden te declareren. De dure functie wordt alleen uitgevoerd als de afhankelijkheden zijn gewijzigd.
In het volgende voorbeeld wordt de dure functie alleen uitgevoerd wanneer deze count
wordt gewijzigd en niet wanneer er taken worden toegevoegd.
Voorbeeld:
Prestatievoorbeeld met behulp van de 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'));