Context API for State Management

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

Context API က global-ish state (user login info, theme, language) ကို component tree ရဲ့ level အလိုက် props pass မလုပ်ဘဲ, tree ထဲက component ဘယ်ဟာမဆို တိုက်ရိုက် access လုပ်နိုင်အောင် ဖန်တီးပေးပါတယ် — createContext() ဖြင့် Context ဖန်တီး, Provider ဖြင့် value ကို wrap, useContext() ဖြင့် consumer component ကနေ ဖတ်ယူပါတယ်။ Login state (user ဝင်ထားလား) က app တစ်ခုလုံးက သိချင်တဲ့ information ဖြစ်တာမို့ Context API ရဲ့ classic use case ပါ။

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

AuthContext ကို App root မှာ Provider ဖြင့် wrap ထားရင် nested screen ဘယ်လောက်နက်နက် (Home → Detail → Comment → Reply) user info ကို props pass မလိုဘဲ useContext(AuthContext) ခေါ်ရုံနဲ့ ရနိုင်ပါတယ်။ Context ကို state ကြီးကြီးမားမား (large lists, frequently-changing data) အတွက် သုံးရင် unnecessary re-render ပိုများနိုင်တာမို့, ဒီလိုအခြေအနေမှာ dedicated state library (Redux, Zustand) ကို စဉ်းစားသင့်ပါတယ်။

• Context API = prop drilling ကို ရှောင်ရှားခြင်း
• createContext + Provider + useContext = သုံးဆင့်
• Large/frequently-changing state အတွက် Redux/Zustand ကို စဉ်းစားခြင်း

Code နမူနာ

import { createContext, useContext, useState } from 'react';

const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

// Any nested component:
// const { user } = useAuth();
// return <Text>{user ? `Welcome, ${user.name}` : 'Please log in'}</Text>;

Component tree ဘယ်လောက်နက်နက် props pass မလိုဘဲ useAuth() ခေါ်ရုံနဲ့ user info ရနိုင်မည်။