Context API – Global State Management (React.js) – বিস্তারিত বাংলায়

React অ্যাপ্লিকেশন যত বড় হয়, তত বেশি কম্পোনেন্টের মধ্যে ডেটা শেয়ার করার প্রয়োজন দেখা দেয়। সাধারণত Props দিয়ে ডেটা নিচে পাঠানো যায়, কিন্তু যখন ডেটা অনেক স্তরের (multi-level) কম্পোনেন্টে পাঠাতে হয় তখন একটি সমস্যা হয়, যাকে বলা হয়:

❌ Prop Drilling Problem

যখন কোনো ডেটা Parent থেকে Child → তার Child → আবার তার Child… এভাবে বারবার props হয়ে নিচে পাঠাতে হয়, সেটাই Prop Drilling।

এটি কোডকে জটিল এবং অপ্রয়োজনীয় বানিয়ে ফেলে।

✔️ সমাধান: Context API

Context API হলো React-এর একটি built-in state management system যা একবার ডেটা তৈরি করলে তা যেকোনো স্থান থেকে সরাসরি ব্যবহার করা যায়— props এর মাধ্যমে পাঠানোর দরকার হয় না।

অর্থাৎ এটি একটি Global Store এর মতো কাজ করে।

📌 Context ব্যবহার করার ৩টি ধাপ

1. Context Create করা
2. Context Provider দিয়ে Value পাঠানো
3. Child Component থেকে Value Consume করা

📘 Step 1: Context তৈরি

// UserContext.js
import { createContext } from "react";

const UserContext = createContext();

export default UserContext;

📘 Step 2: Context Provider তৈরি (Global State রাখা)

// UserProvider.js
import { useState } from "react";
import UserContext from "./UserContext";

function UserProvider({ children }) {
  const [user, setUser] = useState({ name: "Rahim", age: 22 });

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

export default UserProvider;

এখানে value={{ user, setUser }} সব চাইল্ড কম্পোনেন্টে পাঠানো হবে।

📘 Step 3: App.js-এ Provider দিয়ে র‍্যাপ করা

import UserProvider from "./UserProvider";
import Home from "./Home";

function App() {
  return (
    <UserProvider>
      <Home />
    </UserProvider>
  );
}

export default App;

এখন <Home /> এবং তার সব Nested Component এই ডেটা ব্যবহার করতে পারবে।

📘 Step 4: যেকোনো Component থেকে Context Value পড়া (useContext)

// Home.js
import { useContext } from "react";
import UserContext from "./UserContext";

function Home() {
  const { user, setUser } = useContext(UserContext);

  return (
    <div>
      <h2>Name: {user.name}</h2>
      <button onClick={() => setUser({ ...user, name: "Karim" })}>
        Change Name
      </button>
    </div>
  );
}

export default Home;

এখন যেখানে দরকার, সেখানেই Context ডেটা পাবেন।

🎉 Context API কীভাবে কাজ করে? (সহজ ভাষায়)

Context Provider → value পাঠায় Consumer Component → সেই value গ্রহণ করে

React এর Virtual DOM জানে কোন component এই Context ব্যবহার করছে এবং Context value পরিবর্তন হলে শুধু সেই Component-গুলোকেই rerender করায়।

🔥 Context API কোথায় ব্যবহার করা হয়?

• Theme (Light/Dark Mode)
• User Authentication
• Language Setting (Multi-language Site)
• Shopping Cart Data
• Global Modal বা Notification Handling
• Global Filters (eCommerce)

❗ Context API-এর সীমাবদ্ধতা

Context API ছোট–মাঝারি অ্যাপের জন্য যথেষ্ট, তবে খুব বড় অ্যাপ হলে সমস্যা হতে পারে:

• অনেক Context একসাথে ব্যবহার করলে কোড জটিল হয়
• Performance সমস্যা হতে পারে
• Nested Provider অনেক গভীর হলে "Provider Hell" হয়

এক্ষেত্রে Redux Toolkit বা Zustand ব্যবহার করা ভালো।

✔️ Context vs Props

📚 সারসংক্ষেপ

• Context API props drilling এর সমস্যা দূর করে
• Global state যেকোনো component-এ ব্যবহার করা যায়
• useContext দিয়ে value consume করা হয়
• Provider এর মাধ্যমে data supply করা হয়
• Medium-size apps এর জন্য Best Choice

✨ ছাত্রদের জন্য বোঝা সহজ ভাষায় তৈরি—আপনার React Tutorial Website এর জন্য Perfect!