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 تلاش کرنے فائبر کے درخت کو traverses کرتا ہے۔ اگر 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 کے ساتھ فراہم کنندہ بنانا

createContext(defaultValue) فنکشن ایک سیاق آبجیکٹ بناتا ہے۔ پیرامیٹر defaultValue اس وقت استعمال ہوتا ہے جب کوئی جزو useContext کو کال کرتا ہے لیکن درخت میں اوپر کوئی متعلقہ Provider نہیں ہوتا۔ defaultValue کے بغیر، useContext undefined لوٹائے گا، جو غیر متوقع غلطیوں کا سبب بن سکتا ہے۔ ہمیشہ ایک بامعنی ڈیفالٹ ویلیو یا null بھیجنے کی سفارش کی جاتی ہے۔

ایک حسب ضرورت فراہم کنندہ بنانا سیاق منطق کو سمیٹنے کا ایک عام پیٹرن ہے۔ اس طرح کے فراہم کنندہ کے اندر، حالت (useState یا useReducer کے ذریعے) محفوظ کی جاتی ہے اور Provider کی value prop کے ذریعے فراہم کی جاتی ہے۔ یہ صارف اجزاء سے نفاذ کی تفصیلات چھپاتا ہے اور سیاق کے انتظام کی منطق کو ایک جگہ مرکوز کرتا ہے۔

// حالت کے انتظام کے ساتھ حسب ضرورت 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 سے کم اجزاء ہیں اور حالت میں کیشنگ، ڈیباؤنس اور ضمنی اثرات کے ساتھ پیچیدہ منطق شامل نہیں ہے — تو useContext + useReducer کافی سے زیادہ ہے۔ Redux boilerplate کوڈ شامل کرتا ہے اور اسے شعوری طور پر استعمال کیا جانا چاہیے۔

useContext کے ساتھ عام غلطیاں

سب سے عام غلطی ہر Provider رینڈر پر value آبجیکٹ کو دوبارہ بنانا ہے۔ اگر آپ Provider کو value={{ user, login }} بھیجتے ہیں، تو ہر Provider رینڈر پر ایک نیا آبجیکٹ بنتا ہے، جس کی وجہ سے تمام صارفین دوبارہ رینڈر ہوتے ہیں چاہے ڈیٹا تبدیل نہ ہوا ہو۔ حل useMemo کے ساتھ قیمت کو میموئیز کرنا ہے یا بار بار اور کبھی کبھار تبدیل ہونے والے ڈیٹا کے لیے علیحدہ سیاق استعمال کرنا ہے۔

• غیر ضروری دوبارہ رینڈر — ہر Provider رینڈر پر نیا value آبجیکٹ۔ قیمت کو میموئیز کرنے کے لیے useMemo استعمال کریں۔
• بہت بڑا سیاق — درجنوں فیلڈز والا ایک Provider تمام ذیلی اجزاء کو کسی بھی فیلڈ کی تبدیلی پر دوبارہ رینڈر کرتا ہے۔ معنی کے مطابق کئی سیاق میں تقسیم کریں۔
• defaultValue کی کمی — اگر کوئی Provider نہ ملے، useContext defaultValue لوٹاتا ہے، اور اگر وہ undefined ہے، تو ہر کال TypeError پھینکے گی۔
• ایک ہی قسم کے گھریلو Providers — گہری سطحوں پر سیاق کو اوور رائڈ کرنا الجھن کا باعث بن سکتا ہے اور غیر متوقع قیمتوں کا سبب بن سکتا ہے۔

// ❌ ہر رینڈر پر نیا آبجیکٹ — تمام صارفین دوبارہ رینڈر ہوتے ہیں
<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 کے ذریعے ایک بڑے سیاق کو بہتر بنانے کی کوشش کرنے سے آسان ہے اور دوبارہ رینڈر کا زیادہ متوقع رویہ دیتا ہے۔