State in Compose (remember, mutableStateOf)

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

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

Compose function ကို ခေါ်တိုင်း (recomposition) UI ကို re-draw ပေမယ့်, local variable (`var count = 0`) ကို function ထဲ ရေးထားရင် recomposition ဖြစ်တိုင်း value က reset ဖြစ်သွားပါတယ် — `remember { mutableStateOf(0) }` ကို သုံးမှသာ Compose က value ကို recomposition ကြားထိန်းထားပေးပါတယ်။ `mutableStateOf` value ပြောင်းတိုင်း Compose က ဒီ state ကို 'သုံးထားတဲ့' composable ကိုပဲ automatic re-draw ပေးပါတယ် — State Hoisting ကတော့ state ကို child composable ထဲမှာ မထားဘဲ parent ကနေ ချပေးတဲ့ pattern ပါ (component ကို reusable ဖြစ်စေဖို့).

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

Counter app တစ်ခုမှာ `var count by remember { mutableStateOf(0) }` ရေးထားပြီး, Button click ရင် `count++` လုပ်ရင် — screen ပေါ်က `Text("$count")` က automatic update ဖြစ်ပြီး number တက်သွားတာ တွေ့ရမှာပါ။ State Hoisting ကို သုံးရင် `Counter(count: Int, onIncrement: () -> Unit)` ဆိုပြီး state ကို parent ကနေ ပေးပို့ပြီး, `Counter` composable ကို parent ကွဲပြားစွာ reuse လုပ်နိုင်ပါတယ်.

remember { mutableStateOf(...) } = recomposition ကြားထိ value ကို ထိန်းထားခြင်း
State ပြောင်းတိုင်း သုံးထားတဲ့ composable ကို automatic re-draw
State Hoisting = state ကို parent ကနေ ချပေးတဲ့ pattern (component reusability)

အတူတူ ကြည့်မယ်

kotlin

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "Count: $count", fontSize = 24.sp)
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

You should see

Button ကို click ရင် 'Count: 0' → 'Count: 1' → 'Count: 2' ဆိုပြီး screen ပေါ် live update ဖြစ်နေတာ တွေ့ရမည်။

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

`Counter` composable ကို run ကြည့်ပြီး Button ကို ၅ ကြိမ် click ကြည့်ပါ — count ရဲ့ value live update ဖြစ်နေတာ confirm လုပ်ကြည့်ပါ။ ပြီးရင် `remember` ကို ဖျက်ကြည့်ပြီး ဘာဖြစ်လဲ (recomposition ဖြစ်တိုင်း reset ဖြစ်တာ) စမ်းကြည့်ပါ။

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

`by` keyword (property delegate syntax) ကို `mutableStateOf` နဲ့ တွဲသုံးရင် `import androidx.compose.runtime.getValue` / `setValue` ကို import ထည့်ရပါမယ် — မထည့်ရင် compile error တွေ့ရနိုင်ပါတယ်။