Хук useContext в React: общие данные без пропсов

Q: Для чего значение по умолчанию в createContext?

Это то, что возвращает useContext, когда над компонентом нет провайдера. Оно полезно для тестов и для компонентов, отрендеренных отдельно, и никогда не меняется.

useContext читает значение, которое предоставляет родительский компонент, поэтому компонент глубоко в дереве может его получить без того, чтобы каждый компонент между ними передавал его пропсом. Вы создаёте контекст через 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 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 сам объект контекста является провайдером. Старый код пишет <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 тоже обновляется. Ни один компонент не получил пропс.

Каждый потребитель перерендеривается при изменении значения

Когда value провайдера меняется, React рендерит каждый компонент, который вызывает для него useContext, даже если этот компонент находится внутри memo и его пропсы не изменились. 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) и выбрасывает понятную ошибку, когда провайдера нет, чтобы вызывающие никогда не импортировали объект контекста напрямую.

Контекст, пропсы или библиотека состояния

Пропсы это вариант по умолчанию. Передать значение на два или три уровня вниз понятно и легко отследить.
Контекст подходит для значений, которые нужны многим компонентам на разной глубине и меняются редко: тема, язык, вошедший пользователь, объект флагов функций.
Библиотека состояния (Redux Toolkit, Zustand, Jotai и другие) подходит для большого часто обновляемого состояния, где компонент должен подписываться на один срез и пропускать рендеры, вызванные остальным. У контекста такого селектора нет: потребитель рендерится при любом изменении значения.

Прежде чем браться за контекст или библиотеку, проверьте, не убирает ли drilling передача компонентов как children. Часто убирает, и вообще без нового API.

Часто задаваемые вопросы

Что делает useContext в React?

Он возвращает текущее значение контекста, взятое из ближайшего провайдера над компонентом в дереве. Когда значение этого провайдера меняется, каждый компонент, который его читает, рендерится снова.

Для чего значение по умолчанию в createContext?

Это то, что возвращает useContext, когда над компонентом нет провайдера. Оно полезно для тестов и для компонентов, отрендеренных отдельно, и никогда не меняется.

Нужен ли Context.Provider в React 19?

Нет. В React 19 можно рендерить сам контекст как провайдер: <ThemeContext value="dark">. <ThemeContext.Provider value="dark"> по-прежнему работает, поэтому старый код продолжает работать.

Как обновить значение контекста из дочернего компонента?

Храните значение в состоянии в компоненте, который рендерит провайдер, и положите сеттер в контекст рядом со значением: value={{ theme, setTheme }}. Дочерний компонент читает setTheme через useContext и вызывает его.

Заменяет ли контекст React библиотеку Redux?

Контекст передаёт значение вниз по дереву; сам он состоянием не управляет. Вместе с useState или useReducer он покрывает многие приложения. Библиотека состояния добавляет то, чего у контекста нет, например подписку на один срез, чтобы несвязанные обновления не перерендеривали компонент, а также devtools и middleware.

Связанные концепции