Memo reaksi


Menggunakan memoakan 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, Todoskomponen 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, Todoskomponen dirender ulang.

Jika komponen ini rumit, dapat menyebabkan masalah kinerja.


w3schools CERTIFIED . 2022

Dapatkan Sertifikasi!

Selesaikan modul React, kerjakan latihannya, ikuti ujiannya, dan dapatkan sertifikasi w3schools!!

$95 DAFTAR

Larutan

Untuk memperbaikinya, kita bisa menggunakan memo.

Gunakan memountuk menjaga Todoskomponen dari rendering ulang yang tidak perlu.

Bungkus Todosekspor 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 Todoskomponen hanya dirender ulang ketika todosyang diteruskan melalui props diperbarui.