useContext Hook

`useContext` သည် parent မှ child ထဲကို props များအဆင့်ဆင့်လက်ဆင့်ကမ်းစရာမလိုဘဲ data ကို component tree အတွင်း share လုပ်နိုင်တဲ့နည်းလမ်းပါ။ Theme, language, logged-in user, app settings စတာတွေကို child component များစွာမှာလိုအပ်တဲ့အခါ အသုံးဝင်ပါတယ်။

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemeLabel() {
  const theme = useContext(ThemeContext);
  return <p>Current theme: {theme}</p>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemeLabel />
    </ThemeContext.Provider>
  );
}

`ThemeContext.Provider` က `dark` ဆိုတဲ့ value ကိုအောက်က component tree ဆီပေးပါတယ်။ `ThemeLabel` က `useContext(ThemeContext)` နဲ့ value ကိုယူပြီး UI ထဲပြပါတယ်။

Browser မှာ `Current theme: dark` ဆိုတဲ့စာသား ပေါ်လာမယ်။