الخطاف useContext في React: مشاركة البيانات دون props

يقرأ useContext قيمة يوفرها مكوّن أب، فيستطيع مكوّن في عمق الشجرة الحصول عليها دون أن يمررها كل مكوّن بينهما كـ prop. تنشئ سياقًا بـ createContext، وتغلّف جزءًا من الشجرة بمزوّد له value، وتستدعي useContext(TheContext) حيثما احتجت إلى تلك القيمة.

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

const ThemeContext = createContext('light');

function Button({ children }) {
    const theme = useContext(ThemeContext);
    const dark = theme === 'dark';
    return (
        <button style={{ background: dark ? '#222' : '#eee', color: dark ? '#fff' : '#000' }}>
            {children} ({theme})
        </button>
    );
}

function Toolbar() {
    return (
        <div>
            <Button>Save</Button> <Button>Cancel</Button>
        </div>
    );
}

export default function App() {
    const [theme, setTheme] = useState('light');
    return (
        <div>
            <label>
                <input
                    type="checkbox"
                    checked={theme === 'dark'}
                    onChange={(e) => setTheme(e.target.checked ? 'dark' : 'light')}
                />
                Dark mode
            </label>
            <ThemeContext value={theme}>
                <Toolbar />
            </ThemeContext>
        </div>
    );
}

لا يذكر Toolbar السمة أبدًا، ومع ذلك يتغير الزران كلاهما عندما تحدد المربع. هذه هي فكرة السياق كلها: لا تحمل المكوّنات الوسيطة prop لا تستخدمها، وهي مشكلة تمرير props عبر الطبقات التي يحلها السياق.

الخطوات الثلاث

// 1. Create it once, outside any component, usually in its own file
export const ThemeContext = createContext('light');

// 2. Provide a value to a part of the tree
<ThemeContext value={theme}>
    <Page />
</ThemeContext>

// 3. Read it in any component inside that part
const theme = useContext(ThemeContext);

في React 19 يكون كائن السياق نفسه هو المزوّد. ويكتب الكود الأقدم <ThemeContext.Provider value={theme}>، الذي ما زال يعمل، فسترى الشكلين.

يبحث useContext إلى أعلى الشجرة عن أقرب مزوّد لذلك السياق. يقرأ المكوّن الأقرب، فيمكنك تداخل المزوّدين لتجاوز قيمة في قسم واحد.

القيمة الافتراضية

وسيط createContext هو ما يُرجعه useContext عندما لا يوجد مزوّد فوق المكوّن. لا يتغير عندما تتغير الحالة؛ إنه قيمة احتياطية.

import { createContext, useContext } from 'react';

const LanguageContext = createContext('en');

const GREETINGS = { en: 'Hello', es: 'Hola', ja: 'こんにちは' };

function Greeting() {
    const lang = useContext(LanguageContext);
    return <p>{GREETINGS[lang]} ({lang})</p>;
}

export default function App() {
    return (
        <div>
            <Greeting />
            <LanguageContext value="es">
                <Greeting />
                <LanguageContext value="ja">
                    <Greeting />
                </LanguageContext>
            </LanguageContext>
        </div>
    );
}

ليس فوق Greeting الأول أي مزوّد فيحصل على القيمة الافتراضية 'en'. ويقرأ الثاني 'es'، ويقرأ الثالث القيمة الأقرب 'ja'. غيّر value="es" الخارجية إلى value="ja" فلا يتغير إلا السطر الثاني.

تحديث السياق من ابن

لا يمرر السياق إلا قيمة إلى الأسفل. ولتمكين ابن عميق من تغييرها، احتفظ بالقيمة في الحالة حيث يوجد المزوّد، وضع دالة الضبط في السياق بجانبها.

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

const UserContext = createContext(null);

function LoginButton() {
    const { user, setUser } = useContext(UserContext);
    if (user) {
        return <button onClick={() => setUser(null)}>Log out {user}</button>;
    }
    return <button onClick={() => setUser('Ada')}>Log in as Ada</button>;
}

function Header() {
    const { user } = useContext(UserContext);
    return <p>{user ? `Signed in as ${user}` : 'Not signed in'}</p>;
}

export default function App() {
    const [user, setUser] = useState(null);
    return (
        <UserContext value={{ user, setUser }}>
            <Header />
            <div style={{ padding: 12, border: '1px solid #ccc' }}>
                <LoginButton />
            </div>
        </UserContext>
    );
}

يستدعي LoginButton الدالة setUser، فتتغير الحالة في App، ويحصل المزوّد على قيمة جديدة، ويتحدث Header أيضًا. لم يستقبل أي من المكوّنين prop.

كل مستهلك يُعاد عرضه عندما تتغير القيمة

عندما تتغير value لمزوّد، تعرض React كل مكوّن يستدعي useContext له، حتى لو كان ذلك المكوّن داخل memo وبقيت props الخاصة به نفسها. تقارن React القيمة القديمة بالجديدة باستخدام Object.is. لذا فإن value={{ user, setUser }} كائن جديد في كل عرض لـ App، فيُعاد عرض كل مستهلك حتى عندما لا تتغير user.

import { createContext, useContext, useMemo, useState, memo } from 'react';

const PlainContext = createContext(null);
const MemoContext = createContext(null);

const PlainReader = memo(function PlainReader() {
    const { name } = useContext(PlainContext);
    console.log('PlainReader rendered');
    return <p>Plain: {name}</p>;
});

const MemoReader = memo(function MemoReader() {
    const { name } = useContext(MemoContext);
    console.log('MemoReader rendered');
    return <p>Memoized: {name}</p>;
});

export default function App() {
    const [name, setName] = useState('Ada');
    const [clicks, setClicks] = useState(0);

    const plainValue = { name, setName };
    const memoValue = useMemo(() => ({ name, setName }), [name]);

    return (
        <div>
            <button onClick={() => setClicks(clicks + 1)}>Unrelated update ({clicks})</button>
            <PlainContext value={plainValue}>
                <PlainReader />
            </PlainContext>
            <MemoContext value={memoValue}>
                <MemoReader />
            </MemoContext>
        </div>
    );
}

يسجّل القارئان مرة في العرض الأول. انقر الزر: لا يسجّل من جديد إلا PlainReader، لأن سياقه حصل على كائن جديد. يسلّم useMemo إلى MemoContext الكائن نفسه حتى تتغير name، فيبقى MemoReader ثابتًا. لا يهم هذا إلا عندما يصبح العرض بطيئًا؛ أما في تطبيق صغير فلا بأس بكائن جديد في كل عرض.

تقسيم السياقات

ينبغي ألا تتشارك قيمة تتغير كثيرًا وقيمة لا تتغير أبدًا سياقًا واحدًا. إذا كانت دالة الضبط مع الحالة، فإن المكوّن الذي يحتاج فقط إلى استدعاء setUser يظل يُعاد عرضه في كل مرة تتغير فيها user. ضعهما في سياقين فيشترك كل مستهلك فقط في ما يقرؤه:

const UserContext = createContext(null);
const SetUserContext = createContext(() => {});

function UserProvider({ children }) {
    const [user, setUser] = useState(null);
    return (
        <SetUserContext value={setUser}>
            <UserContext value={user}>{children}</UserContext>
        </SetUserContext>
    );
}

تحتفظ setUser المأخوذة من useState بالهوية نفسها إلى الأبد، فالمكوّنات التي لا تقرأ إلا SetUserContext لا يُعاد عرضها أبدًا بسبب تسجيل دخول. والفكرة نفسها تنطبق على البيانات غير المترابطة: السمة وسلة المشتريات مكانهما سياقان منفصلان، لا AppContext كبير واحد.

ومن اللمسات الأخيرة الشائعة خطاف مخصص مثل useUser() يستدعي useContext(UserContext) ويرمي خطأ واضحًا عندما يغيب المزوّد، فلا يستورد المستدعون كائن السياق مباشرة أبدًا.

السياق أم props أم مكتبة حالة

• props هي الخيار الافتراضي. تمرير قيمة مستويين أو ثلاثة إلى الأسفل واضح وسهل التتبع.
• السياق يناسب القيم التي تحتاجها مكوّنات كثيرة على أعماق كثيرة ونادرًا ما تتغير: السمة، واللغة، والمستخدم المسجّل، وكائن أعلام الميزات.
• مكتبة الحالة (Redux Toolkit وZustand وJotai وغيرها) تناسب الحالة الكبيرة التي تتحدث كثيرًا، حيث تريد أن يشترك مكوّن في جزء واحد ويتخطى مرات العرض التي يسببها الباقي. ليس للسياق محدد كهذا: يُعاد عرض المستهلك مع أي تغيير في القيمة.

قبل اللجوء إلى السياق أو إلى مكتبة، تحقق مما إذا كان تمرير المكوّنات على أنها children يزيل التمرير عبر الطبقات. كثيرًا ما يفعل، دون أي واجهة جديدة على الإطلاق.