useMemo

React useMemo Hook

useMemo Hook

useMemo Hook keshga olinadigan qiymatni qaytaradi.

Keshga olishni hisoblashning qayta ishlanishi shart bo'lmagan qiymatlarni saqlash kabi tasavvur qilishingiz mumkin.

useMemo Hook faqatgina uning bog'liqliklaridan biri yangilanganda ishga tushadi.

Bu samaradorlikni oshirishi mumkin.

useMemo va useCallback Hooks o'xshash. Asosiy farq shundaki, useMemo keshga olinadigan qiymatni qaytaradi, useCallback esa keshga olinadigan funksiyani qaytaradi. useCallback haqida ko'proq ma'lumot olish uchun useCallback bo'limiga qarang.

Samaradorlik

useMemo Hook qimmatli va resurs talab qiladigan funksiyalarni keraksiz qayta ishga tushishdan saqlash uchun ishlatilishi mumkin.

Misolda, har bir qayta chizish vaqtida ishga tushadigan qimmatli funktsiya mavjud.

count yoki todo qo'shishni o'zgartirganda, siz bajarilishdagi kechikishni sezishingiz mumkin.

Misol

Yomon ishlash funksiyasi. expensiveCalculation funksiyasi har bir qayta chizishda ishga tushadi:

index.js

import { useState } from 'react';
import ReactDOM from 'react-dom/client';
 
const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const calculation = expensiveCalculation(count);
 
  const increment = () => {
    setCount((c) => c + 1);
  };
 
  const addTodo = () => {
    setTodos((t) => [...t, 'New Todo']);
  };
 
  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
};
 
const expensiveCalculation = (num) => {
  console.log('Calculating...');
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

`useMemo` ishlatish

Bu samaradorlik muammosini tuzatish uchun useMemo Hook-dan foydalanib, expensiveCalculation funksiyasini keshga olish mumkin. Bu funksiya faqat kerak bo'lganda ishga tushadi.

Qimmatli funktsiya chaqiruvini useMemo bilan o'ralgan holda bo'lishi mumkin.

useMemo Hook ikkinchi parametr sifatida bog'liqliklarni e'lon qilish uchun foydalaniladi. Qimmatli funktsiya faqat uning bog'liqliklari o'zgarganda ishga tushadi.

Quyidagi misolda, qimmatli funksiya faqat count o'zgarganda ishga tushadi va todos qo'shishda ishga tushmaydi.

Misol:

index.js

import { useState, useMemo } from 'react';
import ReactDOM from 'react-dom/client';
 
const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const calculation = useMemo(() => expensiveCalculation(count), [count]);
 
  const increment = () => {
    setCount((c) => c + 1);
  };
 
  const addTodo = () => {
    setTodos((t) => [...t, 'New Todo']);
  };
 
  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  );
};
 
const expensiveCalculation = (num) => {
  console.log('Calculating...');
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Endi qimmatli funksiya faqat count o'zgarganda ishga tushadi.

React useMemo Hook

useMemo Hook

Samaradorlik

Misol

useMemo ishlatish

Ushbu sahifada

`useMemo` ishlatish