useId Hook

React Hook

ဒီတစ်ခါမှာတော့ ကျတော်တို့ react ထဲမှာ အလွယ်ဆုံး hook တခုအကြောင်းကိုလေ့လာလိုက်ကြရအောင်

အဲဒါက useId ဆိုတဲ့ hook လေးပါပဲ

သူကတော့ လွယ်ပါတယ် သုံးရတဲ့အခါမှာက

သူ့ကို ဘယ်မှာသုံးတာများတာလည်းဆိုတော့ ကျတော်တို့က key value တွေကိုထည့်ပေးတဲ့အခါမျိုးတွေမှာ သုံးကြပါတယ်

ဒီနေရမှာ key လို့ပြောလိုက်တာနဲ့ listing render ကိုသွားမြင်ကြပါလိမ့်မယ်

useId hook က list render မှာသွားသုံးလို့မရပါဘူး ဘာလို့လည်းဆိုတော့ သူက id တခုကို တကြိမ် render လုပ်တိုင်းမှာ

ပြန်ပြီးတော့ အသစ်ပြန်လုပ်ပေးတာမလို့ပါ

list render မှာသုံးတဲ့ key က ကျတော့ array ရဲ့ data က ပါလာတဲ့ သူ့ရဲ့ unique id ကိုပဲ အသုံးပြုပေးတာက ပိုပြီးတော့

အဆင်ပြေသွားမှာပါ

ဘာလို့ အဲလိုမျိုးအသုံးပြုခိုင်းတာလည်းဆိုတော့ သူ့ရဲ့ id နဲ့ render ချလိုက်တဲ့ component ကို တသမတ်တည်း ရှိ စေချင်

လို့ပါ

ဘာလို့ဆိုတော့ ကျတော်တို့ react က key ကို အသုံးပြုပြီးတော့ render တွေကို စီမံဆောင်ရွက်တာဖြစ်တဲ့အတွက် သူ့ရဲ့

unique id တွေက array data မှာ တခါတည်းပါလာတဲ့ဟာကိုပဲအသုံးပြုထားပေးမှ ပိုအဆင်ပြေမှာပါ

ကျတော်တို့ တခါတလေကျရင် array.map မှာ array ရဲ့ index ကို key အနေနဲ့ အသုံးပြုကြပါတယ်

အဲဒါက မှန်လားမေးရင်တော့ တချို့တဝက်အနေအထားမှာပဲ မှန်ပါတယ်

ဘာလို့ဆိုတော့ ကျတော်တို့ ရဲ့ array တခု ကပြောင်းလဲမှုလုပ်နေမယ် ( delete လုပ်နေတာမျိုးတွေ ) ဆိုရင် သူရဲ့ array

index တွေက ပြောင်းသွားနိုင်တာကြောင့်မလို့ပါ

array index အစား သူ့ရဲ့ unique id ကိုသာလျင် အကောင်ဆုံး ဖြစ်နေတာပါ

ဒီလောက်ဆိုရင်တော့ တော်တော်လေး နားလည်သွားမယ်လို့ထင်ပါတယ်

ဒါဆို ကျတော်တို့ useId လေးကို ဘယ်မှာအသုံးပြုကြမှာလည်းဆိုတာကို တချက်လောက်လေ့လာလိုက်ကြရအောင်ပါ

import { useId } from 'react' 

function testingUseID = () => {
    const id = useId()
    return (
        <div>
            <label>Enter Text : 
                <input id={id} />
            </label>
        </div>
    )
}

export default function App() {
  return (
    <>
      <p>Testing : 1 </p>
      <testingUseID />
      <p>Testing : 2 </p>
      <testingUseID />
    </>
  );
}

အပေါ်က ကုဒ်ကို ကျတော်တို့ သွားကြည့်လိုက်ရင် input ရဲ့ အထဲက id နေရာမှာ id လေးက မတူပဲနဲ့ render လုပ်သွားပေး

တာကိုမြင်ရပါလိမ့်မယ်ဗျ ပြီးတော့ useId က တခြား hook တွေလိုမျိုး parameter တွေဘာမှ မပါပါဘူး ဒီအတိုင်း hook

call လုပ်လိုက်တာနဲ့ random value တစ်ခုကို return ပြန်ပေးသွားတာမျိုးပါ ပြီးတော့ တကြိမ် run လိုက်တိုင်းမှာအသစ်

ထုတ်ထုတ်ပေးပေးသွားပါတယ်

ပြောချင်တာက ကျတော်တို့က useId ကို ၂ကြိမ် run တဲ့အချိန်မှာ မတူညီတဲ့ id ၂ခုကို ထုတ်ပေးသွားပြီးတော့ component

၂ခု မတူညီတော့ပါဘူးဆိုပြီးတော့ လုပ်ပေးသွားတာမျိုးပါ

တော်လွယ်လည်းလွယ်ပြီးတော့ အသုံးလည်းဝင်မှာပါ

နောက်တမျိုး ဒီလိုပုံစံလေးတွေမျိုးလည်းအသုံးပြုလို့ရပါသေးတယ်

function demo = () => {
const id = useId()
   return ( 
     <> 
        <label htmlFor={`${id}-name`}> Name </label>
        <input id={`${id}-name`} />
        <label htmlFor={`${id}-pass`}> Password</label>
        <input id={`${id}-pass`} />
    <>
    )
}

ဒီလောက်ဆိုရင်တော့ useId ကို နားလည်သွားမယ်လို့ထင်ပါတယ်