# Context Api

ကျတော်တို့ လေ့လာလာလိုက်တာ အခုဆိုရင်တော်တော်လေးကို ခရီးရောက်လာပြီပေါ့

ကျတော်တို့ ဒီထက်နည်းနည်းလေး ပိုပြီးတော့ အလုပ်လုပ်ပုံလေးတွေကို ဆက်လေ့လာလိုက်ကြရအောင်&#x20;

အဲဒါက ဘာလည်းဆိုတော့ context api လို့ ခေါ်တဲ့ ( global state management ) ပါပဲ&#x20;

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

ဦးဆုံး ဒီပုံလေးကိုအရင်ကြည့်လိုက်ကြရအောင် <br>

<figure><img src="https://lh6.googleusercontent.com/HET228o4wOufenx1szvYZu6NLpU0c_DZO01R9Rl_QUar7frHxLwqQh13FoNfK2w7MMxK0jMI8i3IsILmu_GLIV6p-KRkX7jo2FuJyX2dO6bNNSd9DTDg-EggzstwkxR_jSW5bu-_pUWY6XCACJ3DiWU" alt=""><figcaption></figcaption></figure>

ဒီပုံမှာကျတော်တို့ ကြည့်လိုက်တဲ့အခါမှာ ဘာတွေရမှာလည်းဆိုတော့ APP component ထဲမှာ component&#x20;

တခု ရှိမှာပေါ့ ဗျ သူ့ ရဲ့ အထဲမှာ နောက်ထပ် child တွေရှိလာပြီးတော့ အဲဒီ child ကနေပြီးတော့ နောက်ထပ်&#x20;

grand child တွေ ခွဲလာတာကိုမြင်ရပါလိမ့်မယ်&#x20;

ကျတော်တို့ ကအရင်တုန်းက component တွေကို data pass လုပ်တုန်းက props နဲ့ပေးကြတယ် မလား&#x20;

အဲဒါက component က ၃ ဆင့်လောက်အထိ ဆိုရင် တော့ ဘာမှ တော့သိပ်မဖြစ်ဘူးဆိုပေမယ့်&#x20;

ကျတော်တို့ရေး တဲ့ application က ကြီးလာတာနဲ့အမျှ data တွေက တဆင့်ပြီး တဆင့် လက်ဆင့်ကမ်း&#x20;

passing လုပ်နေရတဲ့အခါကျရင် ဘာတွေဖြစ်လာတာလည်းဆိုတော့ ကျတော်တို့ application က&#x20;

performance ကျ လာတယ်ဗျ ပြီးတော့ သူ့ကို ဘယ်လိုခေါ်ကြတာလည်းဆိုတော့&#x20;

props drilling လို့ ခေါ်တယ် ဘာလို့ဆိုတော့ ကျတော်တို့ အခုလက်ရှိပြထားတဲ့ပုံအတိုင်းဆိုရင်<br>

<figure><img src="https://lh3.googleusercontent.com/3vi-7ZunGJESo30w7NT5pwbvAzGfwRXpXcOp7xoP3NWGhuUYuYw9GK7vM3QUa8M5caLK5UCgT7YmEc41PsfH_MjtlMAuS6zQR7pyX8veXN_lK0VKXgrex8lU8JEg5OkYBwidn0WKUvx8q1aJto3AH5U" alt=""><figcaption></figcaption></figure>

ကျတော်တို့က data တခုကို ဒီလိုလေး ပေးလိုက်ပြီးတော့ သူတို့က ဟို အောက်ဆုံးက component&#x20;

ကနေပြီးတော့ အသုံးပြုချင်ရင် သူက အပေါ်က အဆင့်ဆင့် လက်ဆင့်ကမ်းလာတဲ့ ဟာတွေကို စောင့်နေရမှာပါ&#x20;

အဲလိုမျိုးဖြစ်လာတဲ့အတွက် state တခုက ပြောင်းလဲပြီးတော့ အပေါ်ကို ပြန်တက်လာတဲ့ အခါကျရင်&#x20;

တော်တော် လေးကို အဆင်မပြေဖြစ်လာမှာပါ အဲလိုမျိုး မဖြစ်ရလေအောင် အတွက် ကျတော်တို့က&#x20;

ဘယ်လိုမျိုး အသုံးပြုရတာလည်းဆိုတော့ global state management တခု ဖြစ်တဲ့&#x20;

context api ကိုအသုံးပြုပေးရပါတယ်&#x20;

သူ့ကို အသုံးပြုလိုက်တဲ့အခါမှာ ခုနက လိုမျိုး state တွေ data တွေက component အဆင့်ဆင့်&#x20;

ဖြတ်ပြီးတော့ သွားစရာမလိုတော့ဘဲနဲ့ ကျတော်တို့ လိုအပ်တဲ့ component ကနေပြီးတော့ ခေါ်ယူသုံးလို့ရသွားပါတယ်&#x20;

ဒီလောက်ဆိုရင် ကျတော်တို့ context api တခု အလုပ်လုပ်ပုံကို မြင်သွားမယ်လို့ထင်ပါတယ် <br>

<figure><img src="https://lh4.googleusercontent.com/ceS8kn7ijBCITu_f7E0eE4BVN0CclsCfDwQ602-kwBmKB_o8A1BuEAE70o97GWkzhh5U_YoS8UMfqlGb2eSu82QOIE8Cu8W_RymL3N9-VofPlDpVOQLz-x8zZfwxO8WPvm4CMWrb5jM1uJ2k_VPHo7I" alt=""><figcaption></figcaption></figure>

ကျတော်တို့ ဒီလောက်ဆိုရင် code မှာ ဘယ်လိုအသုံးပြုရလည်းဆိုတာကို ဆက်လေ့လာလိုက်ကြရအောင်

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

အရင်ဆုံး ကျတော်တို့ code မရေးခင်မှာ  context တခု မှာ ဘယ်လိုမျိုး အဆင့်တွေရှိဖို့လိုတာလည်းဆိုတာကို&#x20;

သိထားဖို့လိုတယ်

ပထမဆုံး ကျတော်တို့က သူ့ကို အရင်ဆုံး create လုပ်ပေးရပါတယ်

ဒုတိယ တဆင့်က ကျတော်တို့က create လုပ်လိုက်တဲ့ context ကို ဘယ် component&#x20;

တွေကိုအသုံးပြုစေချင်တာလည်းဆိုပြီးတော့ provide လုပ်ပေးရပါတယ်&#x20;

နောက်ဆုံး တဆင့်ကတော့ ကျတော်တို့က သူ့ကို ဘယ်လိုမျိုး ပြန်ပြီးတော့ consume ( အသုံးပြု ) ရမှာလည်း ပေါ့&#x20;

ကျတော်တို့ အရင်ဆုံး file လေးတွေကို ဒီလို လေး တည်ဆောက်လိုက်ပါမယ်&#x20;

<figure><img src="https://lh3.googleusercontent.com/PH-vM9j0IeMDXWTkiOd0aA4XqgrFUtaFqIdpuToxUcwrtIUO77_VDIRvHuGDa9azRYQENgcMxE9NPvgObAhZ9aRfKQTeQgDGtBUphaGIfkh0RXmtNwBaK-oG5GagrYOVMMvX0W6ATK59oCH-sGQjcE4" alt=""><figcaption></figcaption></figure>

အဲလိုလေး ရေးပြီး‌တော့ ကျတော်တို့ Component ထဲမှာ Child ကို import လုပ်ပြီးတော့ return လုပ်လိုက်ပါမယ်&#x20;

ပြီးရင်တော့ ကျတော်တို့က Child ထဲမှာ GrandChildကို ထပ်ပြီးတော့ရေးလိုက်ပါမယ်&#x20;

ပြီးသွားရင် ကျတော်တို့က App component မှာ အသုံးပြုလိုက်ပါမယ်

```jsx
import Child from './child/Child.jsx'

export default function Component (){
    return <Child />
}
```

```jsx
import GrandChild from './grand/GrandChild.jsx'

export default function Child () {
    return <GrandChild />
}
```

```jsx
export default function GrandChild () {
    return (
        <div>GrandChild</div>
    )
}
```

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

<figure><img src="https://lh6.googleusercontent.com/7KCoIkWeWjqUylgq0gzeEhDey0VVXUzh4f9IXdGau8sHq2lLRrxmSAPYLbq4CM4nsHk1TlgeODDwDFNVFShYXvem3RjUqfRWgLvrvEtN1Z9IqcyzaeTAJth0As7x2CfLCZsP6zw4J8H4uduDLuzLS48" alt=""><figcaption></figcaption></figure>

အဲလိုလေးရေးလို့ပြီးသွားရင် ကျတော်တို့ context တစ်ခုကို create လုပ်ကြရအောင်

ဘယ်လိုမျိုးလုပ်ရမှာလည်းဆိုတော့&#x20;

ကျတော်တို့က အရင်ဆုံး react ကနေပြီးတော့ createContext ဆိုတာလေးကို import လုပ်ရပါမယ်
