React useMemo hooki

React useMemo Hook xotirada saqlangan qiymatni qaytaradi.

useMemo Hook faqat bog‘liqliklaridan biri yangilanganda ishlaydi.

Bu unumdorlikni yaxshilashi mumkin.

Without useMemo

useMemo hooki qimmat va resurs talab qiladigan funksiyalarni keraksiz ishga tushirishdan saqlash uchun ishlatilishi mumkin.

Ushbu misolda bizda har bir renderda ishlaydigan qimmat funksiya mavjud.

Hisobni o‘zgartirganda yoki topshiriqni qo‘shsangiz, ijro etishda kechikish borligini sezasiz.

import { useState } from 'react';
import { createRoot } 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}
        <p>Note that this example executes the expensive function also when you click on the Add Todo button.</p>
      </div>
    </div>
  );
};

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  for (let i = 0; i < 1000000000; i++) {
    num += 1;
  }
  return num;
};

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

useMemo-dan foydalaning

Ushbu unumdorlik muammosini hal qilish uchun biz expensiveCalculation funksiyasini eslab qolish uchun useMemo hookidan foydalanishimiz mumkin. Bu funksiya faqat kerak bo‘lganda ishlaydi.

Biz qimmat funksiya chaqiruvini useMemo bilan o‘rashimiz mumkin.

useMemoHook bog‘liqliklarni e’lon qilish uchun ikkinchi parametrni qabul qiladi. Qimmat funksiya faqat uning bog‘liqliklari o‘zgarganda ishlaydi.

Quyidagi misolda qimmat funksiya faqat count bo‘lganda ishlaydi. o‘zgartiriladi va bajariladigan ishlar qo‘shilganda emas.

import { useState, useMemo } from 'react';
import { createRoot } 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;
};

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