Memo reaksi
Menggunakan memo
akan menyebabkan React melewatkan rendering komponen jika props-nya tidak berubah.
Hal ini dapat meningkatkan kinerja.
Bagian ini menggunakan React Hooks. Lihat bagian React Hooks untuk informasi lebih lanjut tentang Hooks.
Masalah
Dalam contoh ini, Todos
komponen dirender ulang bahkan ketika todos tidak berubah.
Contoh:
index.js
:
import { useState } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Todos.js
:
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default Todos;
Saat Anda mengklik tombol kenaikan, Todos
komponen dirender ulang.
Jika komponen ini rumit, dapat menyebabkan masalah kinerja.
Dapatkan Sertifikasi!
Selesaikan modul React, kerjakan latihannya, ikuti ujiannya, dan dapatkan sertifikasi w3schools!!
$95 DAFTAR
Larutan
Untuk memperbaikinya, kita bisa menggunakan memo
.
Gunakan memo
untuk menjaga Todos
komponen dari rendering ulang yang tidak perlu.
Bungkus Todos
ekspor komponen di memo
:
Contoh:
index.js
:
import { useState } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Todos.js
:
import { memo } from "react";
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default memo(Todos);
Sekarang Todos
komponen hanya dirender ulang ketika todos
yang diteruskan melalui props diperbarui.