ההוק useContext ב-React: שיתוף נתונים בלי props

useContext קורא ערך שקומפוננטת הורה מספקת, כך שקומפוננטה עמוק בעץ יכולה לקבל אותו בלי שכל קומפוננטה בדרך תעביר אותו כ-prop. יוצרים קונטקסט עם createContext, עוטפים חלק מהעץ ב-provider עם 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 שהן לא משתמשות בו, וזו בעיית ה-prop drilling שקונטקסט פותר.

שלושת הצעדים

// 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 אובייקט הקונטקסט עצמו הוא ה-provider. קוד ישן כותב <ThemeContext.Provider value={theme}>, שעדיין עובד, אז תראו את שתי הצורות.

useContext מחפש למעלה בעץ את ה-provider הקרוב ביותר של אותו קונטקסט. קומפוננטה קוראת את הקרוב ביותר, כך שאפשר לקנן providers כדי לדרוס ערך עבור אזור אחד.

ערך ברירת המחדל

הארגומנט של createContext הוא מה ש-useContext מחזיר כשאין provider מעל הקומפוננטה. הוא לא משתנה כש-state משתנה; הוא ערך גיבוי.

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 הראשונה אין provider מעליה והיא מקבלת את ברירת המחדל 'en'. השנייה קוראת 'es', והשלישית קוראת את ה-'ja' הקרוב יותר. שנו את value="es" החיצוני ל-value="ja" ורק השורה השנייה משתנה.

עדכון קונטקסט מילד

קונטקסט רק מעביר ערך מטה. כדי לאפשר לילד עמוק לשנות אותו, החזיקו את הערך ב-state במקום שבו נמצא ה-provider, ושימו את ה-setter בקונטקסט לידו.

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, ה-state ב-App משתנה, ה-provider מקבל ערך חדש, וגם Header מתעדכנת. אף אחת מהקומפוננטות לא קיבלה prop.

כל צרכן מתרנדר מחדש כשהערך משתנה

כשה-value של provider משתנה, 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 נשאר במקום. זה משנה רק כשהרינדור נהיה איטי; באפליקציה קטנה, אובייקט חדש בכל רינדור זה בסדר.

פיצול קונטקסטים

ערך שמשתנה הרבה וערך שאף פעם לא משתנה לא צריכים לחלוק קונטקסט. אם ה-setter חי עם ה-state, קומפוננטה שרק צריכה לקרוא ל-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) וזורק שגיאה ברורה כשה-provider חסר, כך שמי שקורא לו אף פעם לא מייבא את אובייקט הקונטקסט ישירות.

קונטקסט, props או ספריית state

• props הם ברירת המחדל. העברת ערך שתיים או שלוש רמות מטה ברורה וקל לעקוב אחריה.
• קונטקסט מתאים לערכים שהרבה קומפוננטות צריכות בהרבה עומקים ושמשתנים לעיתים רחוקות: ערכת נושא, שפה, המשתמש המחובר, אובייקט של feature flags.
• ספריית state (Redux Toolkit, Zustand, Jotai ואחרות) מתאימה ל-state גדול שמתעדכן הרבה, כשרוצים שקומפוננטה תירשם לחלק אחד ותדלג על רינדורים שנגרמים מהשאר. לקונטקסט אין selector כזה: צרכן מתרנדר בכל שינוי בערך.

לפני שפונים לקונטקסט או לספרייה, בדקו אם העברת קומפוננטות בתור children מבטלת את ה-drilling. לעיתים קרובות כן, בלי שום API חדש.