State with useState Hook

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

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

useState hook က component ထဲမှာ local state ကို track လုပ်ဖို့ သုံးပါတယ် — state value ပြောင်းတိုင်း component ကို re-render ဖြစ်စေပါတယ်။ React Native ကလည်း React ရဲ့ hooks system ကို တိုက်ရိုက် import ပြီးသုံးတာမို့ web React ကနေ syntax လုံးဝ တူညီပါတယ် — ကွာတာက UI event (onPress vs onClick) နှင့် component (TouchableOpacity vs button) ပါပဲ။

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Like button တစ်ခု ဆောက်မယ်ဆိုရင် useState(false) နဲ့ isLiked state ဖန်တီးပြီး, TouchableOpacity ရဲ့ onPress ထဲမှာ setIsLiked(!isLiked) ခေါ်ရင် button press တိုင်း state toggle ဖြစ်ပြီး icon color ပြောင်းသွားစေနိုင်ပါတယ် — style ကို state အလိုက် conditional (array syntax, ယခင်အခန်းကနေ) ပေါင်းသုံးရပါမယ်။

useState hook syntax က web React နဲ့ လုံးဝတူခြင်း
State ပြောင်းတိုင်း component re-render ဖြစ်ခြင်း
onPress event ထဲမှာ setState function ခေါ်သုံးခြင်း

Code နမူနာ

javascript

import { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

export default function LikeButton() {
  const [isLiked, setIsLiked] = useState(false);

  return (
    <TouchableOpacity onPress={() => setIsLiked(!isLiked)}>
      <Text style={[styles.heart, isLiked && styles.liked]}>
        {isLiked ? '❤️' : '🤍'}
      </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  heart: { fontSize: 32 },
  liked: { transform: [{ scale: 1.2 }] },
});

You should see

Heart icon ကို press လိုက်တိုင်း filled/outline state ကြား toggle ဖြစ်နေတာ တွေ့ရမည်။

၅ မိနစ် စမ်းကြည့်

Counter app တစ်ခု ဆောက်ကြည့်ပါ — useState(0) နဲ့ count state ဖန်တီးပြီး '+' button press လိုက်တိုင်း count တိုးအောင် implement လုပ်ပါ။

သတိလေးတစ်ချက်

onPress={setIsLiked(!isLiked)} လို ရေးရင် render ချိန်တိုင်း function ချက်ချင်း run ဖြစ်သွားပြီး infinite loop ဖြစ်နိုင်ပါတယ် — arrow function () => ... နဲ့ wrap ထားရပါမယ်။