Memo

React Memo

memo yordamida React komponentni faqat uning propslari o'zgarganida qayta render qilinishini ta'minlash mumkin.

Bu, ishlash samaradorligini oshirishi mumkin.

Ushbu bo'lim React Hooks-dan foydalanadi. Hooks haqida qo'shimcha ma'lumot uchun React Hooks bo'limiga qarang.

Muammo

Bu misolda, Todos komponenti todos o'zgarmaganida ham qayta render qilinadi.

Misol:

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;

+ tugmasini bosganingizda, Todos komponenti qayta render qilinadi.

Agar bu komponent murakkab bo'lsa, bu ishlash samaradorligini pasaytirishi mumkin.

Yechim

Buni tuzatish uchun memo dan foydalanishimiz mumkin.

memo yordamida Todos komponentining ortiqcha qayta render qilinishini oldini olamiz.

Todos komponentini memo bilan o'rab oling: