React useMemoHook

React useMemoHook သည် အလွတ်ရထားသောတန်ဖိုးကို ပြန်ပေးသည်။

Hook သည် useMemo၎င်း၏မှီခိုမှုတစ်ခုအား အပ်ဒိတ်လုပ်သည့်အခါမှသာ အလုပ်လုပ်ပါသည်။

ဒါက စွမ်းဆောင်ရည်ကို မြှင့်တင်ပေးနိုင်ပါတယ်။

စွမ်းဆောင်ရည်

Hook ကို useMemoမလိုအပ်ဘဲ လည်ပတ်ခြင်းမှ စျေးကြီးပြီး အရင်းအနှီးများသော လုပ်ဆောင်ချက်များကို ထိန်းသိမ်းထားရန် အသုံးပြုနိုင်သည်။

ဤဥပမာတွင်၊ ကျွန်ုပ်တို့တွင် render တစ်ခုစီတိုင်းတွင် လုပ်ဆောင်နိုင်သော တန်ဖိုးကြီးသည့်လုပ်ဆောင်ချက်တစ်ခုရှိသည်။

အရေအတွက်ကိုပြောင်းလဲခြင်း သို့မဟုတ် လုပ်စရာတစ်ခုထည့်သည့်အခါ၊ လုပ်ဆောင်မှုတွင် နှောင့်နှေးမှုကို သင်သတိပြုမိပါလိမ့်မည်။

import { useState } from "react";
import ReactDOM from "react-dom";

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

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

သုံးပါ။ useMemo

ဤလုပ်ဆောင်ချက်ပြဿနာကို ဖြေရှင်းရန်၊ လုပ်ဆောင်ချက်ကို useMemoအလွတ်ကျက်ရန် Hook ကို အသုံးပြုနိုင်ပါသည် expensiveCalculation။ ၎င်းသည် လိုအပ်သည့်အခါမှသာ လုပ်ဆောင်ချက်ကို လုပ်ဆောင်နိုင်မည်ဖြစ်သည်။

ကျွန်ုပ်တို့သည် စျေးကြီးသော လုပ်ဆောင်ချက်ခေါ်ဆိုမှုဖြင့် ခြုံငုံ useMemoနိုင်ပါသည်။

useMemoမှီခိုမှုကိုကြေငြာရန် Hook သည် ဒုတိယဘောင်တစ်ခုကို လက်ခံသည် ။ စျေးကြီးသောလုပ်ဆောင်ချက်သည် ၎င်း၏မှီခိုမှုများပြောင်းလဲသွားမှသာ လုပ်ဆောင်နိုင်မည်ဖြစ်သည်။

count အောက်ပါဥပမာတွင်၊ စျေးကြီးသောလုပ်ဆောင်ချက် သည် ပြောင်းလဲ သည့်အခါတွင်သာ လုပ်ဆောင်မည်ဖြစ်ပြီး todo များထည့်သည့်အခါတွင်သာ လုပ်ဆောင်မည်ဖြစ်သည်။

import { useState, useMemo } from "react";
import ReactDOM from "react-dom";

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

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