React တွင် စွမ်းဆောင်ရည် အကောင်းဆုံးဖြစ်အောင် ပြုလုပ်ရန် useTransition ဟုခ်

စွမ်းဆောင်ရည် အကောင်းဆုံးဖြစ်အောင် ပြုလုပ်ရန် useTransition ဟုခ်သည် ကျွန်ုပ်တို့အား ရုပ်မြင်အင်တာဖေ့စ်ကို ပိတ်ပင်တားဆီးခြင်းမရှိဘဲ state များကို အပ်ဒိတ်လုပ်ခွင့်ပြုသည်။

ဤဟုခ်ကို အသုံးပြု၍ ကျွန်ုပ်တို့သည် မည်သည့် state တစ်ခု၏ အပ်ဒိတ်ကိုမဆို ဦးစားပေးမှုနိမ့်အောင် သတ်မှတ်ပေးနိုင်ပြီး အခြား state များ၏ အပ်ဒိတ်များသည် ဦးစားပေးမှုမြင့်မားစေကာ အနှောင့်အယှက်မရှိ လုပ်ဆောင်နိုင်စေရန် ဖြစ်သည်။

ဥပမာအနေဖြင့် ရှာဖွေရေးအကွက်တွင် အသုံးပြုသူက စာလုံးများ ရိုက်ထည့်သည့်အခါ ကုန်ပစ္စည်းများ အောက်ကျဆင်းစာရင်း (dropdown list) ကို စစ်ထုတ်ခြင်းကို ဖော်ပြနိုင်ပါသည်။ ဟုတ်ပါသည်၊ စာရင်းကိုယ်တိုင်သည် အနည်းငယ် နှောင့်နှေးမှုဖြင့် ပြသနိုင်သော်လည်း ရှာဖွေရေးအကွက်ထဲသို့ စာလုံးများ ရိုက်ထည့်ရာတွင် နှောင့်နှေးမှုဖြင့် ဖြစ်စေလိုမည် မဟုတ်ပါ။

ထိုကဲ့သို့သော အခြေအနေများတွင် useTransition ဟုခ်က မည်သို့ ကူညီနိုင်သည်ကို ကြည့်ရအောင်။ ကျွန်ုပ်တို့တွင် အဓိက ကွန်ပြူနာရဲ့ ကုဒ်အပိုင်းအစတစ်ခု ရှိသည်ဟု ယူဆပါစို့။ ထိုကုဒ်ကို စိစစ်လေ့လာကြည့်ကြပါစို့။

App.jsximport { useTransition } from 'react';
import { useState } from 'react';

function App() {
  const [isPending, startTransition] = useTransition();
  const [filterTerm, setFilterTerm] = useState('');
  
  const filteredProducts = filterProducts(filterTerm);
  
  function updateFilterHandler(event) {
    startTransition(() => {
      setFilterTerm(event.target.value);
    });
  }
 
  return (
    <div>
      <input type="text" onChange={updateFilterHandler} />
      <ProductList products={filteredProducts} />
    </div>
  );
}

ဤနေရာတွင် ကျွန်ုပ်တို့သည် useTransition အတွက် ကိုယ်စားပြုမှုနှစ်ခုကို မြင်တွေ့ရပါသည်။ isPending ကိုယ်စားပြုမှုသည် ဗူးလီယန်တန်ဖိုးကို ထိန်းသိမ်းထားပြီး အပ်ဒိတ်လုပ်ငန်းစဉ် ပြီးဆုံးပြီ မပြီးဆုံးသေးဘူးကို ပြသပါသည်။ startTransition လုပ်ဆောင်ချက်သည် အပ်ဒိတ်၏ ဦးစားပေးမှုကို လျှော့ချခွင့်ပြုသော လုပ်ဆောင်ချက် ဖြစ်သည်။

App.jsxconst [isPending, startTransition] = useTransition();

ထို့အပြင် ကျွန်ုပ်တို့တွင် filterTerm state ရှိပါသည်။ ၎င်းတွင် အင်ပူ့ထဲသို့ ရိုက်ထည့်ထားသော စကားစုကို သိမ်းဆည်းထားပြီး setFilterTerm လုပ်ဆောင်ချက်သည် ၎င်းကို သတ်မှတ်ရန် ဖြစ်သည်။

App.jsxconst [filterTerm, setFilterTerm] = useState('');

အင်ပူ့ထဲသို့ စာလုံးများ ရိုက်ထည့်သည့်အခါတိုင်း updateFilterHandler လုပ်ဆောင်ချက်ကို အကြိမ်တိုင်း ခေါ်ယူပါသည်။ ၎င်းအတွင်း၌ filterTerm ကို အပ်ဒိတ်လုပ်ခြင်း ဖြစ်ပေါ်ပါသည်။ ဤနေရာမှာပင် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ useTransition ဟုခ်ကို အသုံးပြုပါသည်။ သတ်မှတ်ရန် လုပ်ဆောင်ချက် setFilterTerm ကို startTransition ထဲသို့ အောက်ပါအတိုင်း ထည့်သွင်းထားခြင်း ဖြစ်သည်။

App.jsxfunction updateFilterHandler(event) {
  startTransition(() => {
    setFilterTerm(event.target.value);
  });
}

ဤနည်းအားဖြင့် state filterTerm အတွက် ဦးစားပေးမှုနိမ့်အောင် သတ်မှတ်လိုက်ပြီး ကျွန်ုပ်တို့၏ အင်ပူ့အကွက်သည် တုံ့ပြန်မှုကောင်းမွန်စွာ ကျန်ရှိနေပါမည်။

isPending ကိုယ်စားပြုမှုကို အသုံးပြု၍ စာရင်း အပ်ဒိတ်လုပ်ဆဲဖြစ်ကြောင်း အသုံးပြုသူထံ ပြသနိုင်ပါသည်။ စာရင်း အပ်ဒိတ်လုပ်နေစဉ် ဤသတင်းအချက်အလက်ကို အင်ပူ့အကွက်၏အောက်တွင် ဖော်ပြကြည့်ကြပါစို့။

App.jsxreturn (
  <div>
    <input type="text" onChange={updateFilterHandler} />
    {isPending && <p>updating ...</p>}
    <ProductList products={filteredProducts} />
  </div>
);