React Memo - Ví dụ thực tế

Việc sử dụng memosẽ khiến React bỏ qua việc hiển thị một thành phần nếu các đạo cụ của nó không thay đổi.

Điều này có thể cải thiện hiệu suất.

Vấn đề

Trong ví dụ này, Todosthành phần kết xuất lại ngay cả khi các việc cần làm không thay đổi.

Ví dụ:

index.js:

import { useState } from "react";
import ReactDOM from "react-dom/client";
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>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

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;

Khi bạn nhấp vào nút tăng, Todosthành phần sẽ hiển thị lại.

Nếu thành phần này phức tạp, nó có thể gây ra các vấn đề về hiệu suất.

Giải pháp

Để khắc phục điều này, chúng ta có thể sử dụng memo.

Sử dụng memođể ngăn không cho Todosthành phần hiển thị lại một cách không cần thiết.

Kết thúc Todosquá trình xuất thành phần trong memo:

import { useState } from "react";
import ReactDOM from "react-dom/client";
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>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

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);