Bereaksi useMemo
Kait
React useMemo
Hook mengembalikan nilai memo.
Pikirkan memoisasi sebagai caching nilai sehingga tidak perlu dihitung ulang.
Hook useMemo
hanya berjalan ketika salah satu dependensinya diperbarui.
Hal ini dapat meningkatkan kinerja.
The useMemo
dan useCallback
Hooks serupa. Perbedaan utama adalah useMemo
mengembalikan nilai memo dan
useCallback
mengembalikan fungsi memo. Anda dapat mempelajari lebih lanjut useCallback
di bab useCallback .
Pertunjukan
useMemo
Hook dapat digunakan untuk menjaga fungsi yang mahal dan intensif sumber daya agar tidak berjalan secara sia-sia .
Dalam contoh ini, kami memiliki fungsi mahal yang berjalan di setiap render.
Saat mengubah hitungan atau menambahkan todo, Anda akan melihat penundaan dalam eksekusi.
Contoh:
Fungsi berkinerja buruk. Fungsi ini expensiveCalculation
berjalan pada setiap 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'));
Dapatkan Sertifikasi!
$95 DAFTAR
Menggunakan useMemo
Untuk memperbaiki masalah kinerja ini, kita dapat menggunakan useMemo
Hook untuk memoize expensiveCalculation
fungsi. Ini akan menyebabkan fungsi hanya berjalan saat dibutuhkan.
Kita dapat membungkus panggilan fungsi yang mahal dengan useMemo
.
Hook useMemo
menerima parameter kedua untuk mendeklarasikan dependensi. Fungsi mahal hanya akan berjalan ketika ketergantungannya telah berubah.
Dalam contoh berikut, fungsi mahal hanya akan berjalan ketika count
diubah dan tidak ketika todo ditambahkan.
Contoh:
Contoh kinerja menggunakan useMemo
Hook:
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'));