Asynchronous setState

ကျတော်တို့ state တွေ setState တွေ နဲ့အလုပ်လုပ်ပုံတွေကို နားလည်သွားကြမယ်လို့မျှော်လင့်ပါတယ်

နောက်ထပ်ပြီးတော့ကျတော်တို့ ဆက်ပြီးတော့လေ့လာကြရအောင်ဗျ ဘယ်လိုမျိုးလည်းဆိုတော့

asynchronous setState ပါ

ကျတော်တို့ setState တခုက state ကို update ( changes ) လုပ်တာလို့ကျတော်တို့ သိခဲ့တယ်မလား

အဲဒါကို ကျတော်တို့က နည်းနည်းလေး တမျိုး လုပ်ကြည့်ကြရအောင်

ခုနက ရေးခဲ့တဲ့ increment ဆိုတဲ့ function လေးကို ကျတော်တို့နောက်တမျိုး ထပ်ပြီးတော့ ရေးကြရအောင်

ဘယ်လိုမျိုးလည်းဆိုတော့ ကျတော်တို့က တခါ တိုးတိုင်းမှာ ၅ ပေါင်းသွားစေချင်တာမျိုးပါ

ပုံမှန်ဆိုရင် ကျတော်တို့ count + 5 လို့ရေးလိုက်ရင် ရပီ ဆိုပေမယ့် ဒီတခါ ကျတော်က

ဘယ်လိုမျိုးလုပ်မှာလည်းဆိုတော့ for loop နဲ့ပေါင်းမှာပါ ကဲ ရေးလိုက်ကြရအောင်

addFiveHandler = () => {
    for(let i = 0; i<5; i++) {
         this.setState({
              count : this.state.count + 1
         })
    }
}
render(){
     return(
          <>
               <h1>{this.state.count}</h1>
               <button onClick={this.clickHandler}>Add One</button>
               <button onClick={this.addFiveHandler}>Add Five</button>
          </>
     )
}

ကျတော်တို့ဒီလိုမျိုးရေးပြီးတော့ browser မှာသွားစစ်ကြည့်ရင် ကျတော်တို့က ဘယ်လိုမျိုးတွေ့ရမလဲဆိုတော့

၅ မတိုးသွားဘဲနဲ့ ၁ ပဲတိုးသွားတာ ကိုတွေ့ရပါလိမ့်မယ်

အဲဒါကို ကျတော်တို့က for loop က ငါးကြိမ်မပတ်ဘူးလား ဆိုပီးတော့ မေးစရာရှိလာတာပေါ့ ဟုတ်မဟုတ်ကို

ကျတော်တို့ for loop မှာ console ထုတ်ကြည့်လိုက်ကြရအောင်

addFiveHandler = () => {
    for(let i = 0; i<5; i++) {
         console.log("adding", i)
         //rest code 
         }
    }

ဒီလိုထုတ်ပြီး ကြည့်လိုက်ရင် ကျတော်တို့က 5 ကြိမ်အလုပ်လုပ်သွားတာကိုမြင်ရလိမ့်မယ်

ဒါဆို ဘာလို့ setState ကဘာလို့အလုပ်မလုပ်ရတာလည်း ပေါ့

တကယ်က အလုပ်မလုပ်တာ မဟုတ်ပါဘူး သူက asynchronous ဖြစ်နေလို့ပါ javascript Asynchronous

အကြောင်းကို မသိသေးရင် ဒီဟာကို သွားဖတ်ပါ Link

Asynchronous ဖြစ်တော့ သူက state ကို သွားယူတဲ့အချိန်မှာ အရင်က ရှိပြီးသား initial state ရဲ့ count

ကို 0 ဖြစ်တော့ အဲ0 ကိုပဲ အစကတည်းက ငါးကြိမ်လုံး သွားယူပြီးတော့ အဲဒါကိုပဲ update လုပ်နေတာဖြစ်တဲ့အတွက်

သူက 1 ပဲ တိုးတိုးသွားတာပါ အဲလိုမျိုးဖြစ်နေတာကို ကျတော်တို့က ဘယ်လိုမျိုး ပြန်ပြီးတော့ fix မလဲပေါ့

ဟုတ်ပြီး အဲဒါကို ကျတော်တို့ ကfunction တခုနဲ့ ပြန်ပြီးတော့ သူ့ရဲ့အရင်က previous state ဆို ပြီးတော့

ပြန်ယူသုံးလို့ရပါတယ်

အဲဒါကို ကျတော်တို့ ပြင်မယ်ဆိုရင် ဒီလိုလေးဖြစ်သွားပါလိမ့်မယ်

addFiveHandler = () => {
    for(let i = 0; i<5; i++)
        console.log("adding", i)
        this.setState((prev) => {
            return{
                count : prev.count + 1
            }
        })
    }
}

Function ရဲ့ parameter ကနေပြီးတော့ ကျတော်တို့က state ကို ပြန်ပြီးတော့လက်ခံလိုက်တဲ့အခါမှာ သူက

သူ့ရဲ့အရင်တခါက update လုပ်ခဲ့တဲ့ state ကိုပဲ လာထည့်ပီးတော့ အလုပ်လုပ်ပေးတာဖြစ်တဲ့အတွက်

ကျတော်တို့က 5 တိုးသွားတာကို မြင်ရတာပါ

အဲလိုလေး ပြင်သွားပီးဆိုရင်ကျတော်တို့ပြန်ပီးတော့ သွားစမ်းကြည့်မယ်ဆိုရင် addFiveHandler လေးက

၅ တိုးသွားတာကိုမြင်ရပါလိမ့်မယ်အဲလောက်ဆိုရင် setState က ဘယ်လိုမျိုးအလုပ်လုပ်တာလည်းဆိုတာ

ကို မြင်သွားမယ်လို့ထင်ပါတယ်