Basic Hook (useState) in React

Introduction

React ရဲ hook feature ဟာဆိုရင် React 16.8 နောက်ပိုင်းမှာမှ စပြီးပါလာတဲ့ feature ဖြစ်ပါတယ်။ အဓိကရည်ရွယ်ချက်ကတော့ Class component တွေမရေးတော့ပဲ function component တွေမှာ state တွေကို ထိန်းကြောင်းနိုင်ဖို့ပဲဖြစ်ပါတယ်။

What is useState in React?

useState hook ဟာဆိုရင် React မှာ အသုံးပြု့တဲ့ hooks တွေထဲကမှ အခြေခံကျဆုံးတစ်ခုလို့ဆိုနိုင်ပါတယ်။
useState hook ဆိုတာဘာလဲလို့ လွယ်ကူအောင်ပြောရလျှင် javascript function လို့မှတ်ထားပြီး functional components တွေမှာ component ရဲ့ state ကိုထိန်းချုပ်ဖို့သုံးတယ်လို့ဆိုရမှာပဲဖြစ်ပါတယ်။

How to use?

useState hook ကိုသုံးမယ်ဆိုရင်တော့ ပထမဆုံးအနေနဲ့ useState ကို react library ကနေ import လုပ်ရပါမယ်။

import { useState } from 'react';

ပြီးတော့မှ ကိုယ်အသုံးချချင်တဲ့ Function component ထဲမှာ အောက်ပါ syntax အတိုင်းအသုံးပြု့ရမှာပဲ ဖြစ်ပါတယ်။

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

အဓိကကတော့ useState hook ဟာဆိုရင် value နှစ်ခုကို return ပြန်ပေးပါတယ်။

ပထမတစ်ခုက state ရဲ့ value ပါ (ပထမဆုံးအကြိမ်မှာတို့ကိုယ်သတ်မှတ်လိုက်တဲ့ initialState ထဲကတန်ဖိုးရှိနေမှာပါ)
ဒုတိယတစ်ခု့ကတော့ state ကို update လုပ်ပေးနိုင်တဲ့ function ပါ။ အဲဒီတော့ ကျနော်တို့က state ရဲ့ value ကိုလိုချင်ရင် ပထမ param(state) ကိုသုံးပြီးတော့၊ state ကို update လုပ်ချင်ရင်တော့ ဒုတိ့ယ param(setState) ကို function call လုပ်ပြီး update လုပ်လေ့ရှိပါတယ်။

Tips and Rules

state နဲ့ setState variable ကို ကိုယ်ကြိုက်တဲ့ နာမည်ပေးလို့ရတယ်ဆိုပေမဲ့ အများသုံးတဲ့ rule အတိုင်းလိုက်နာတာက ပိုပြီးတော့ standard ကျပါတယ်။ ဥပမာ။ ။ counter component အတွက် useState ကိုသုံးတဲနေရာမှာ

const [counterValue, updateCounter] = useState(၀);

အဲလိုမျိုးပေးမဲ့ အစား

const [count, setCount] = useState(၀);

ဆိုပြီးပေးသင့်ပါတယ်။ ဒါမှသာ နောက်တစ်ချိန် တစ်နေနေရာကနေ count value ကို ခေါ်သုံးတာနဲ့ update လုပ်လို့ရတဲ့ function name က setCount ဆိုပြီးတန်းသိ့မှာဖြစ်ပါတယ်။

useState hook ကိုသုံးတဲ့နေရာမှာ၊ state ရဲ့ data type ဟာ ကိုယ်လိုချင်တဲ့ javascript data type သတ်မှတ်လို့ရပါတယ်။ ဥပမာ

const [count, setCount] = useState(၀); // number
const [items, setItems] = useState([]); // array
const [itemName, setItemName] = useState(""); // string

useState hook ဟာဆိုရင် local component အသေးစားတွေအတွက် အတော်အသုံးဝင်ပါတယ်။ ဒါပေမဲ့ ကိုယ်အနေနဲ့ larger logic components တွေအတွက်ဆိုရင်တော့ တစ်ခြား state management liraries တွေကိုအသုံးပြု့ရမှာဖြစ်ပါတယ်။ ဥပမာ Redux, Flux စတာတွေကို အသုံးပြု့နိုင်ပါတယ်။

Basic structure with example (Counter App)

import React, { useState } from 'react';

function Counter() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Counter App Example ကို demo အနေနဲ့ကြည့်ချင်တယ်ဆိုရင်တော့ ဒီလင့် မှာသွားကြည့်လို့ရပါတယ်။

React Hooks တွေအကြာင်းဖတ်ချင်တယ်ဆိုရင်တော့ ဒီလင့် မှာသွားဖတ်လို့ရပါတယ်။