React Context API Explained: One Context, Many Components

React Context Explained

🧠 React Context সহজ ভাষায়: ট্যাংক একটাই, কল অনেকগুলো 🚰

React শেখার সময় Context API অনেকের কাছেই confusing লাগে।
আজ আমি একদম সহজ বাস্তব উদাহরণ দিয়ে বোঝাবো।

🤔 Context আসলে কেন দরকার?

ধরো তোমার App-এ অনেক component আছে।

App
 └─ ThemeColor
     └─ Child

theme, name, setTheme এই ডাটা যদি props দিয়ে পাঠাও,
তাহলে হবে prop drilling 😵

👉 এই সমস্যার সমাধানই React Context API

🧠 সহজভাবে বোঝার চেষ্টা করি

ধরো একটা বাড়ি 🏠

1️⃣ createContext() = পানির ট্যাংক 🚰

import { createContext } from "react";

const UserContext = createContext();

export default UserContext;

এটা শুধু একটা খালি ট্যাংক।
এখনো কোনো পানি নাই।

Get MD Mehedi Hasan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

📌 একটা App-এ সাধারণত একটাই ট্যাংক লাগে

2️⃣ Provider = ট্যাংকে পানি ভরা 💧

<UserContext.Provider value={{ theme, setTheme, name }}>
  <ThemeColor />
</UserContext.Provider>

এখানে তুমি বলতেছো:

• পানি কী? → theme, setTheme, name
• কারা পাবে? → ভিতরের সব component

⚠️ Provider ছাড়া context কাজই করবে না

3️⃣ useContext(UserContext) = বালতি দিয়ে পানি নেওয়া 🪣

useContext(UserContext);

এটা React-এর built-in hook।
কিন্তু বারবার লিখতে গেলে code ভারী হয়ে যায়।

4️⃣ useUserContext() = কল খুলে পানি নেওয়া 🚰😄

import { useContext } from "react";
import UserContext from "./Component/ContexAPI";

export const useUserContext = () => {
  return useContext(UserContext);
};

⚠️ এটা নতুন context না
এটা শুধু একটা custom hook

👉 সুন্দর করে পানি নেওয়ার একটা কল

এখন যেকোনো component-এ লিখলেই হবে:

const { theme, name } = useUserContext();

🧠 সবচেয়ে গুরুত্বপূর্ণ লাইন

❗ ট্যাংক একটাই, কল অনেকগুলো

• createContext() → একবার
• Provider → একবার
• useUserContext() → যত খুশি component-এ

✅ মনে রাখার মন্ত্র

Context বানাও একবার
Provider দাও একবার
Hook ব্যবহার করো যতবার দরকার