React ရဲ့ useState Hook အကြောင်း

Syntax နှင့် အသုံးပြုပုံ

const [state, setState] = useState(initialState);;

အပေါ်မှာရေးထားတဲ့ useState Hook ရဲ့ syntax ကိုကြည့်မယ်ဆိုရင် current state နှင့် ၎င်း state ကို update လုပ်ဖို့အသုံးပြုသည့် setState ဆိုတဲ့ function ကို တွေ့နိုင်ပါတယ်။

useState အမေးအဖြေများ

1. useState ကို ခေါ်သုံး (call) တဲ့အခါ ဘာဖြစ်မလဲ?

useState ကို ခေါ်သုံးတဲ့အခါ state ရဲ့နာမည်ကို ကိုယ်ပေးထားတဲ့အတိုင်း “state variable” တစ်ခုကို တည်ဆောက်ပါတယ်။ အပေါ်မှာ ဖော်ပြထားတဲ့ ဥပမာမှာ state နာမည်ကို “state” လို့ပေးထားပါတယ်။ အဲဒီနေရာမှာ ကိုယ်ကြိုက်တဲ့ နာမည်ပေးလို့ရပါတယ်။ (ဥပမာ။ ။apple၊ banana…)။ useState က return ပြန်တဲ့ function ကိုလည်း ကိုယ်ကြိုက်တဲ့နာမည် ပေးလို့ရပါတယ်။ (ဥပမာ — setAppleCount() အစရှိသဖြင့်)။

const [banana, setBananaList] = useState(initialState);;

ပုံမှန် Javascript မှာဆိုရင် function တစ်ခုကို ခေါ်သုံးပြီးတာနဲ့ သူနဲ့ပတ်သက်တဲ့ တန်ဖိုးတွေ (values) အကုန်လုံး မရှိတော့ပါဘူး။ ဒါပေမဲ့ React က Hook တွေအားဖြင့် variable တွေရဲ့ တန်ဖိုးတွေကို re-render (တစ်ကြိမ်ထက်မက function ပြန်ခေါ်သုံး) လုပ်နေတဲ့အချိန်မှာတောင် မပျောက်သွားအောင် ဆက်လက်သိမ်းဆည်းပေးထားပါတယ်။

2. useState မှာ ဘယ်လိုအရာများ ထည့်သွင်း (pass) လုပ်လို့ရသလဲ?

useState က argument တစ်ခုတည်းလက်ခံပါတယ်။ အဲဒီ argument မှာ ကိုယ်ကြိုက်တဲ့ data အမျိုးအစားထည့်သွင်းလို့ရပါတယ်။ boolean၊ int၊ array၊ null၊ underfined မှအစ object တွေကိုတောင် ထည့်သွင်းလို့ရပါတယ်။

const initialState = [];
const [bananaList, setBananaList] = useState(initialState);;

3. useState က ဘာ return ပြန်မလဲ?

useState က တွဲထားတဲ့တန်ဖိုး နှစ်ခုကို return ပြန်ပါတယ်။ current state နှင့် ၎င်းကို update လုပ်မည့် function တစ်ခု ဖြစ်ပါတယ်။ သူ့ရဲ့ syntax ကိုကြည့်မယ်ဆိုရင် ထူးဆန်းကောင်းထူးဆန်းလိမ့်မယ်။ အဲဒါက “array destructuring” သုံးထားတာဖြစ်ပါတယ်။

4. ပထမဆုံး render လုပ်လိုက်တဲ့အချိန်မှာ ဘယ်လိုဖြစ်သွားမလဲ?

ပထမဆုံး render လုပ်နေတဲ့အချိန်မှာ useState က return ပြန်တဲ့ state ရဲ့တန်ဖိုးနှင့် initialState မှာ ထည့်သွင်းလိုက်တဲ့ တန်းဖို့က တူပါတယ်။

const initialState = [];
const [bananaList, setBananaList] = useState(initialState);
console.log(bananaList); //output → [];

5. ပထမဆုံး render လုပ်ပြီးတဲ့နောက် setState function ကို ခေါ်သုံးမယ်ဆိုရင် ဘယ်လိုဖြစ်မလဲ?

setBananaList([{id: 1, bananaName: ‘Red Banana’}]);
console.log(bananaList);
//output [{id: 1, bananaName: ‘Red Banana’}];

setBananaList function က bananaList ဆိုတဲ့ State ရဲ့တန်းဖိုးကို update လုပ်ပြီးတဲ့နောက် component ကို re-render လုပ်ပါလိမ့်မည်။

useState Hook ကို အသုံးပြုပုံ useState Hook နဲ့ပတ်သက်ပြီးတော့ နားလည်မယ်လို့မျှော်လင့်ပါတယ်။ အောက်မှာ ဖော်ပြထားတဲ့အတိုင်း useState ကို အမျိုးမျိုးသုံးလို့ရပါတယ်။

State variable တခုတည်းကို အသုံးပြုပုံ

const Counter = ({ initialCount = 0 }) => {
   const [count, setCount] = useState(initialCount);
   return (
      <>
         Count: {count}
         <button onClick={() => setCount(initialCount)}>
            Reset
         </button>
         <button onClick={() => setCount(prevCount => prevCount —  1)}>
           -
        </button>
        <button onClick={() => setCount(prevCount => prevCount + 1)}>
          +
        </button>
     </>
   );
};

State variable တစ်ခုထက်မက အသုံးပြုပုံ

const UserInput = () => {
   const [age, setAge] = useState(‘’);
   const [name, setName] = useState(‘’);
 
   return (
      <div>
        <input
          type=”number”
          value={age}
          placeholder=”Enter age”
          onChange={e => setAge(e.target.value)}
        />
        <p>
          <strong>My Age : {age}</strong>
        </p>
        <input
           type=”text”
           value={name}
           placeholder=”Enter name”
           onChange={e => setName(e.target.value)}
        />
       <p>
         <strong>My Name : {name}</strong> 
       </p>
    </div>
   );
};;

State variable တစ်ခုတည်းမှာ variable တစ်ခုထက်မက အသုံးပြုပုံ

const UserInput = () => {
   const [state, setState] = useState({ name: ‘’, age: ‘’ });
   const { name, age } = state;
   return (
      <div>
         <input
            type=”number”
            value={age}
            placeholder=”Enter age”
            onChange={e => setState({ …state, age: e.target.value })}
         />
         
         <p>
            <strong>My Age : {age}</strong>
        </p>
        <input
           type=”text”
           value={name}
           placeholder=”Enter name”
           onChange={e => setState({…state, name: e.target.value})}
        />
        
        <p>
           <strong>My Name : {age}</strong>
       </p>
    </div>
   );
};;