Basic Hook (useState) in React
Published: 2021-01-08 19:09:36

# 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](https://redux.js.org/), [Flux](https://facebook.github.io/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](https://codesandbox.io/s/peaceful-rosalind-coigu) ကို `demo` အနေနဲ့ကြည့်ချင်တယ်ဆိုရင်တော့ [ဒီလင့်](https://codesandbox.io/s/peaceful-rosalind-coigu) မှာသွားကြည့်လို့ရပါတယ်။

React Hooks တွေအကြာင်းဖတ်ချင်တယ်ဆိုရင်တော့ [ဒီလင့်](https://reactjs.org/docs/hooks-intro.html) မှာသွားဖတ်လို့ရပါတယ်။

<a href="https://ko-fi.com/ayarhlaine">
<img height="12" width="30%" src="https://res.cloudinary.com/practicaldev/image/fetch/s--KS7c42cU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.ko-fi.com/cdn/kofi1.png%3Fv%3D2" alt="Buy Me a Coffee at ko-fi.com" loading="lazy">
</a>

အားလုံးကိုကျေးဇူးတင်ပါတယ်။
ဆက်လက်ကြိုးစားပါအုံးမည်။

A.Y.H