useContext: সারমর্ম, কনটেক্সট অ্যাক্সেস হুক এবং React-এ প্রোভাইডার

React-এ useContext কী

useContext হল একটি হুক যা React 16.8-এ অন্যান্য হুকের সাথে যুক্ত করা হয়েছে যা React কনটেক্সট থেকে মান পড়ার অনুমতি দেয়। কনটেক্সট হল React-এ নির্মিত একটি প্রক্রিয়া যা কম্পোনেন্ট ট্রির মাধ্যমে ম্যানুয়ালি প্রতিটি স্তরে props পাস করার প্রয়োজন ছাড়াই ডেটা পাস করার জন্য ডিজাইন করা হয়েছে। useContext পুরানো Context API-এর Consumer কম্পোনেন্ট প্রতিস্থাপন করে এবং কোডকে আরও সংক্ষিপ্ত ও পঠনযোগ্য করে তোলে।

কনটেক্সটের সাধারণ ব্যবহারের ক্ষেত্রগুলির মধ্যে রয়েছে থিম (হালকা/গাঢ়), লোকেল এবং অনুবাদ (i18n), ব্যবহারকারী প্রমাণীকরণ, অ্যাপ্লিকেশন সেটিংস এবং অন্য যেকোনো বৈশ্বিক ডেটা যা বিভিন্ন নেস্টিং স্তরে অনেক কম্পোনেন্টের প্রয়োজন। React টিম সেই ডেটার জন্য কনটেক্সট ব্যবহার করার পরামর্শ দেয় যা কম্পোনেন্টের একটি উপ-ট্রির জন্য বৈশ্বিক, কিন্তু পুরো অ্যাপ্লিকেশনের জন্য নয়।

React Team — কনটেক্সট ডকুমেন্টেশন (2025) অনুসারে, কনটেক্সটের ভুল ব্যবহার React অ্যাপ্লিকেশনে কর্মক্ষমতা সমস্যার অন্যতম প্রধান কারণ। Provider-এ প্রতিটি মান পরিবর্তন সব ভোক্তার পুনরায় রেন্ডার ঘটায়, ডেটার কোন অংশ পরিবর্তিত হয়েছে তা নির্বিশেষে। useMemo এবং কনটেক্সট বিভাজনের মাধ্যমে অপ্টিমাইজেশন এই সমস্যার সমাধান করে।

import { createContext, useContext } from 'react';

// ডিফল্ট মান সহ কনটেক্সট তৈরি করুন
const ThemeContext = createContext('হালকা');

function ThemedButton() {
    const theme = useContext(ThemeContext);
    return <button className={`btn-${theme}`}>Click</button>;
}

React-এ কনটেক্সট কীভাবে কাজ করে

React-এ কনটেক্সট প্রক্রিয়াটি Provider-Consumer প্যাটার্নের মাধ্যমে বাস্তবায়িত হয়। createContext দুটি সত্তা সহ একটি অবজেক্ট ফেরত দেয়: Provider — একটি কম্পোনেন্ট যা মান প্রেরণ করে, এবং কনটেক্সট অবজেক্ট নিজেই, যা useContext-এ ব্যবহৃত হয়। Provider কম্পোনেন্ট ট্রিতে মাউন্ট হয় এবং নেস্টিং গভীরতা নির্বিশেষে সব চাইল্ড এলিমেন্টে মান প্রেরণ করে।

যখন React একটি useContext কল পায়, এটি সেই কনটেক্সটের জন্য নিকটতম Provider খুঁজতে ফাইবার ট্রি ট্রাভার্স করে। যদি একটি Provider পাওয়া যায়, তার মান ফেরত দেওয়া হয়। যদি কোনো Provider না পাওয়া যায়, createContext-এ পাস করা ডিফল্ট মান ফেরত দেওয়া হয়। এই অনুসন্ধান প্রতিটি রেন্ডারে ঘটে, কিন্তু ফাইবার নোড মেমোইজেশন-এর কারণে এটি খুব দ্রুত এবং কর্মক্ষমতাকে প্রভাবিত করে না।

React — কনটেক্সট অভ্যন্তরীণ (2024) অনুসারে, useContext-এর অভ্যন্তরীণ বাস্তবায়ন useState-এর মতো হুকের একটি লিঙ্কড লিস্ট ব্যবহার করে। প্রতিটি হুক একটি ফাইবার নোডের রেফারেন্স সংরক্ষণ করে, যা React-কে দ্রুত নির্ধারণ করতে দেয় কোন Provider সেই কনটেক্সটের সাথে সামঞ্জস্যপূর্ণ। যখন কোনো Provider তার মান আপডেট করে, React সেই কনটেক্সট ব্যবহার করে এমন সব ফাইবার নোডকে পুনরায় রেন্ডারের জন্য চিহ্নিত করে।

Provider এবং নেস্টেড কনটেক্সট

Provider কম্পোনেন্ট একে অপরের ভিতরে নেস্ট করা যেতে পারে, কনটেক্সটের একটি শ্রেণিবিন্যাস তৈরি করে। প্রতিটি চাইল্ড Provider নিজস্ব উপ-ট্রির জন্য পিতামাতার মান ওভাররাইড করে। এটি উপযোগী যখন একটি স্ক্রিনে হালকা থিম প্রয়োজন অথচ একটি নেস্টেড মডাল উইন্ডোতে গাঢ় থিম প্রয়োজন। useContext সর্বদা ট্রিতে উপরের নিকটতম Provider-এর মান ফেরত দেয়।

const UserContext = createContext(null);
const ThemeContext = createContext('হালকা');

function App() {
    return (
        <UserContext.Provider value={{ name: 'Alice' }}>
            <ThemeContext.Provider value='dark'>
                <Profile />
            </ThemeContext.Provider>
        </UserContext.Provider>
    );
}

createContext দিয়ে Provider তৈরি

createContext(defaultValue) ফাংশন একটি কনটেক্সট অবজেক্ট তৈরি করে। প্যারামিটার defaultValue ব্যবহার করা হয় যখন কোনো কম্পোনেন্ট useContext কল করে কিন্তু ট্রিতে উপরে কোনো সংশ্লিষ্ট Provider নেই। defaultValue ছাড়া, useContext undefined ফেরত দেবে, যা অপ্রত্যাশিত ত্রুটির কারণ হতে পারে। সর্বদা একটি অর্থপূর্ণ ডিফল্ট মান বা null পাস করার পরামর্শ দেওয়া হয়।

কাস্টম Provider তৈরি করা কনটেক্সট লজিক এনক্যাপসুলেট করার একটি সাধারণ প্যাটার্ন। এই ধরনের Provider-এর ভিতরে, অবস্থা (useState বা useReducer-এর মাধ্যমে) সংরক্ষিত হয় এবং Provider-এর value প্রপের মাধ্যমে প্রদান করা হয়। এটি ভোক্তা কম্পোনেন্ট থেকে বাস্তবায়নের বিবরণ লুকায় এবং কনটেক্সট পরিচালনার লজিককে এক জায়গায় কেন্দ্রীভূত করে।

// স্টেট ম্যানেজমেন্ট সহ কাস্টম Provider
const AuthContext = createContext(null);

function AuthProvider({ children }) {
    const [user, setUser] = useState(null);

    const login = useCallback(async (email, pass) => {
        const u = await loginApi(email, pass);
        setUser(u);
    }, []);

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

চাইল্ড কম্পোনেন্টে useContext ব্যবহার

ফাংশনাল কম্পোনেন্টে, useContext কনটেক্সট অ্যাক্সেস করার একমাত্র উপায়। এটি পুরানো Context API-এর Consumer কম্পোনেন্ট প্রতিস্থাপন করে, যার জন্য render-prop প্যাটার্ন প্রয়োজন ছিল: <ThemeContext.Consumer>{value => ...}</ThemeContext.Consumer>। useContext কোডকে আরও রৈখিক এবং পঠনযোগ্য করে তোলে, বিশেষ করে একটি কম্পোনেন্টে একাধিক কনটেক্সট নিয়ে কাজ করার সময়।

একটি কম্পোনেন্টে একাধিক কনটেক্সট ব্যবহার করার সময়, প্রতিটি কনটেক্সটের জন্য একাধিকবার useContext কল করুন। প্রতিটি কল সংশ্লিষ্ট Provider-এর মান ফেরত দেয়। কলের ক্রম গুরুত্বপূর্ণ নয়, যেহেতু প্রতিটি কনটেক্সট একটি স্বাধীন সত্তা। React একই ফাইবার রেফারেন্স সিস্টেমের মাধ্যমে একাধিক কল অপ্টিমাইজ করে।

function Dashboard() {
    const { user } = useContext(AuthContext);
    const theme = useContext(ThemeContext);
    const { locale } = useContext(I18nContext);

    return (
        <div className={`dashboard-${theme}`}>
            <h1>{locale.greeting}, {user.name}</h1>
        </div>
    );
}

useContext বনাম Redux: কখন কী বেছে নেবেন

useContext এবং Redux-এর মধ্যে পছন্দ স্টেট ম্যানেজমেন্টের স্কেল এবং জটিলতার উপর নির্ভর করে। useContext + useReducer ছোট এবং মাঝারি অ্যাপ্লিকেশনের জন্য Redux-এর একটি হালকা বিকল্প। এটির জন্য বাহ্যিক লাইব্রেরি ইনস্টল করার প্রয়োজন নেই, শেখা সহজ এবং বেশিরভাগ কাজের জন্য যথেষ্ট। Redux ন্যায্য যখন middleware, ডেভটুলস এবং অপরিবর্তনীয় আপডেট সহ কঠোর আর্কিটেকচার প্রয়োজন।

useContext-এর উপর Redux-এর প্রধান সুবিধা হল পুনরায় রেন্ডার অপ্টিমাইজেশন। ডিফল্টভাবে, যখন Provider-এ মান পরিবর্তিত হয়, সব কনটেক্সট ভোক্তা পুনরায় রেন্ডার হয়। Redux useSelector এবং shallowEqual-এর সাথে কম্পোনেন্টকে শুধুমাত্র অবস্থার নির্দিষ্ট অংশে সাবস্ক্রাইব করতে দেয়, যা বড় অ্যাপ্লিকেশনে পুনরায় রেন্ডারের সংখ্যা উল্লেখযোগ্যভাবে হ্রাস করে। কনটেক্সটকে অনেক ছোট কনটেক্সটে বিভক্ত করেও অপ্টিমাইজ করা যেতে পারে।

Redux রক্ষণাবেক্ষণকারী — কখন Redux ব্যবহার করবেন (2024) অনুসারে, 70% React অ্যাপ্লিকেশনের Redux প্রয়োজন হয় না। যদি আপনার 50টির কম কম্পোনেন্ট থাকে এবং অবস্থায় ক্যাশিং, debounce এবং সাইড ইফেক্ট সহ জটিল লজিক না থাকে — তাহলে useContext + useReducer যথেষ্ট বেশি। Redux বয়লারপ্লেট যোগ করে এবং সচেতনভাবে ব্যবহার করা উচিত।

useContext নিয়ে সাধারণ ভুল

সবচেয়ে সাধারণ ভুলটি হল প্রতিটি Provider রেন্ডারে value অবজেক্ট পুনরায় তৈরি করা। যদি আপনি Provider-এ value={{ user, login }} পাস করেন, প্রতিটি Provider রেন্ডারে একটি নতুন অবজেক্ট তৈরি হয়, যার ফলে সব ভোক্তা পুনরায় রেন্ডার হয় এমনকি যদি ডেটা পরিবর্তিত না হয়। সমাধান হল useMemo দিয়ে মান মেমোইজ করা বা ঘন ঘন এবং কদাচিৎ পরিবর্তিত ডেটার জন্য আলাদা কনটেক্সট ব্যবহার করা।

• অপ্রয়োজনীয় পুনরায় রেন্ডার — প্রতিটি Provider রেন্ডারে নতুন value অবজেক্ট। মান মেমোইজ করতে useMemo ব্যবহার করুন।
• অতিরিক্ত বড় কনটেক্সট — ডজনখানেক ফিল্ড সহ একটি Provider সব চাইল্ড কম্পোনেন্টকে যেকোনো ফিল্ড পরিবর্তনে পুনরায় রেন্ডার করে। অর্থ অনুসারে একাধিক কনটেক্সটে বিভক্ত করুন।
• defaultValue-এর অভাব — যদি কোনো Provider না পাওয়া যায়, useContext defaultValue ফেরত দেবে, এবং যদি তা undefined হয়, প্রতিটি কল TypeError ছুঁড়বে।
• একই ধরনের নেস্টেড Provider — গভীর স্তরে কনটেক্সট ওভাররাইড করা বিভ্রান্তিকর হতে পারে এবং অপ্রত্যাশিত মানের দিকে নিয়ে যেতে পারে।

// ❌ প্রতিটি রেন্ডারে নতুন অবজেক্ট — সব ভোক্তা পুনরায় রেন্ডার হয়
<AuthContext.Provider value={{ user, login }}>{children}</AuthContext.Provider>

// ✅ মেমোইজড মান — শুধুমাত্র user বা login পরিবর্তিত হলে পুনরায় রেন্ডার
const authValue = useMemo(() => ({ user, login }), [user, login]);
<AuthContext.Provider value={authValue}>{children}</AuthContext.Provider>

“বড় কনটেক্সট” সমস্যা সমাধানের জন্য, বৈশ্বিক অবস্থাকে যৌক্তিক গ্রুপে বিভক্ত করুন: AuthContext, ThemeContext, I18nContext। প্রতিটি কনটেক্সট নিজস্ব এলাকার জন্য দায়ী এবং স্বাধীনভাবে আপডেট হয়। এটি useMemo-এর মাধ্যমে একটি বিশাল কনটেক্সট অপ্টিমাইজ করার চেষ্টা করার চেয়ে সরল এবং আরও অনুমানযোগ্য পুনরায় রেন্ডার আচরণ দেয়।