ReactIntermediate

Context API

Props drilling কমাতে Context — createContext, Provider, useContext — বাংলায়।

7টি অংশবাংলা ভাষায়

কখন Context দরকার

যখন অনেক component-কে একই ডেটা (theme, user, language) দরকার — আর props ধরে ধরে পাঠানো ক্লান্তিকর। তখন Context সেই ডেটা সরাসরি যেকোনো গভীরের component-এ পৌঁছে দেয়।

Theme Contextjsx

jsx

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

const ThemeContext = createContext("light");

function App() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// যেকোনো গভীরে
function ThemeButton() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Current: {theme}
    </button>
  );
}

Provider নিয়ম

value বদলালে context-এর সব consumer re-render হয়
Overuse এড়িয়ে চলুন — অপ্রয়োজনীয় 값을 context-এ না
Context-এ state-ও রাখা যায় — সাথে reducer দিয়ে জটিলতা কমান
Server Components-এ পুরো object পাস না — serializable value দিন

Reducer + Context combo

Mini storejsx

jsx

const AuthContext = createContext(null);

function AuthProvider({ children }) {
  const [user, dispatch] = useReducer(authReducer, null);

  return (
    <AuthContext.Provider value={{ user, dispatch }}>
      {children}
    </AuthContext.Provider>
  );
}

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

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।