React useContext အကြောင်း တစေ့တစောင်း

React useContext hook က app တစ်ခုလုံးမှာ data တွေကို pass လုပ်ဖို့ ပိုမိုလွယ်ကူစေပါတယ်။ React Context API ရဲ့အစိတ်အပိုင်းအချို့နဲ့ ပေါင်းစပ်ပြီးအသုံးပြုပါတယ်။ App က သိပ်မကြီးဘူးဆိုရင် Redux အစား Context API ကို အသုံးပြုလို့ရပါတယ်။ React Hook တွေကို အသုံးပြုမယ်ဆိုရင် functional component တွေက အများကြီးပိုကောင်းလာပါတယ်။ useContext hook က အသုံးပြုရတာအရမ်းလွယ်ကူပါတယ်။

ဒီ post မှာ useContext အသုံးပြုပုံ အနည်းငယ်ရှင်းပြချင်ပါတယ်။

useContext vs. Consumer

Consumer component နဲ့ Context API ကိုအသုံးပြုမယ်ဆိုရင် ပုံမှန်နည်းလမ်းကတော့ ဒီလိုမျိုးဖြစ်ပါတယ်။

import React from "react";
import ReactDOM from "react-dom";
// Context တစ်ခု create လုပ်
const NumberContext = React.createContext();
// value နှစ်ခုကို return ပြန်တယ်
// { Provider, Consumer }
function App() {
 // ဘယ်နေရာမဆို value ကို အသုံးပြုနိုင်ဖို့ရန် Provider ကိုသုံး
   return (
      <NumberContext.Provider value={42}>
         <div>
            <Display />
         </div>
      </NumberContext.Provider>
   );
}
function Display() {
  // Context ကနေ data ကို ဆွဲယူဖို့ Consumer ကိုသုံး
  // ဒီ component က prop တစ်ခုမှ မရှိတာကို မှတ်ထားပါ
   return (
     <NumberContext.Consumer>
       {value => <div>The answer is {value}.</div>}
     </NumberContext.Consumer>
   );
}
ReactDOM.render(<App />, document.querySelector("#root"));;

NumberContext ဆိုတဲ့နာမည်နဲ့ context တစ်ခုကို create လုပ်ပါတယ်။ ဒီ variable ဟာ Provider နှင့် Consumer ဆိုတဲ့ property နှစ်ခုရှိတဲ့ object တစ်ခုဖြစ်ပါတယ်။ သူတို့ကလိုက်ဖက်စုံတွဲတွေပါပဲ။ ပြီးတော့ NumberContext.Provider ကို content အချို့နဲ့ render လုပ်ပြီးတဲ့နောက် value ဆိုတဲ့ prop ကို pass လုပ်ပါတယ်။ ဒီ value ဆိုတဲ့ prop ကို NumberContext.Provider ရဲ့ child component အားလုံးကနေ Consumer (သို့) useContext နဲ့ ယူသုံးလို့ရပါတယ်။ ဒီနေရာမှာတော့ Consumer ကို အသုံးပြုထားပါတယ်။

useContext ကို Consumer မပါဘဲ အသုံးပြုလို့ရပါတယ်။ အပေါ် Display component ကို useContext အသုံးပြုပြီး ပြန်ရေးရရင်

// import useContext (or we could write React.useContext)
import React, { useContext } from 'react';
// …
function Display() {
    const value = useContext(NumberContext);
    return <div>The answer is {value}.</div>;
};

useContext ကိုခေါ်ပြီးတော့ React.createContext နဲ့ create လုပ်ထားတဲ့ context object ကို argument မှာ ထည့်ပေးလိုက်ရုံပဲ။ အသုံးပြုရတာ Consumer ထက်ပိုလွယ်ပါတယ်။

Nested Consumers vs. useContext

တစ်ခါတလေမှာ component တစ်ခုက parent တစ်ခုထက်မကဆီကနေ data တွေကို ခေါ်သုံးဖို့လိုအပ်တဲ့အချိန် ရှိပါတယ်။ ထိုအခြေအနေမျိုးမှာ Consumer နဲ့‌ရေးမယ်ဆိုရင်

function HeaderBar() {
  return (
     <CurrentUser.Consumer>
       {user =>
          <Notifications.Consumer>
             {notifications =>
                <header>
                    Welcome back, {user.name}!
                     You have {notifications.length} notifications.
                </header>
             }
         </Notifications.Consumer>
       }
    </CurrentUser.Consumer>
  );
};

ဒီလို Consumer နဲ့ရေးမယ်ဆိုရင် code ကိုဖတ်တာ၊ maintain လုပ်တာကို ပိုမိုခက်ခဲသွားစေပါတယ်။

useContext နဲ့ရေးမယ်ဆိုရင်

function HeaderBar() {
   const user = useContext(CurrentUser);
   const notifications = useContext(Notifications);
   return (
      <header>
         Welcome back, {user.name}!
         You have {notifications.length} notifications.
     </header>
  );
};

Code ကိုဖတ်တာ၊ maintain လုပ်တာ ပိုမိုလွယ်ကူစေပါတယ်။

အဆုံးထိဖတ်ပေးတဲ့အတွက် ကျေးဇူးတင်ပါတယ်။