React Memo / Пам’ятка

Використання memo призведе до того, що React пропустить відтворення компонента, якщо його атрибути не змінено.

Це може покращити продуктивність.

Проблема

У цьому прикладі компонент Todos повторно відображається, навіть якщо завдання не змінено.

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

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;

Коли ви натискаєте кнопку збільшення, компонент Todos повторно відображається.

Якщо цей компонент був складним, це могло спричинити проблеми з продуктивністю.

Рішення

Щоб виправити це, ми можемо використати memo.

Використовуйте memo, щоб уникнути непотрібного повторного відтворення компонента Todos.

Оберніть експорт компонента Todos за допомогою 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);

Тепер компонент Todos повторно відображається лише тоді, коли оновлюються todos, передані йому через props.