useContext: същност, хук за достъп до контекста и провайдъри в React

Какво е useContext в React

useContext — е хук, добавен в React 16.8 заедно с останалите хукове, който позволява да четете стойност от React контекста. Контекстът е вграден механизъм в React, предназначен за пренасяне на данни чрез дървото от компоненти, без да се налага ръчно да пренасяте props на всяко ниво. useContext заменя Consumer компонента от стария Context API и прави кода по-кратък и по-четим.

Типични сценарии за използване на контекст включват дизайн теми (светла/тъмна), регионални настройки и преводи (i18n), удостовяване на потребители, настройки на приложението и всички други глобални данни, които са нужни на много компоненти на различни нива на вложеност. React екип препоръчва да използвате контекст за данни, които са глобални за поддървото от компоненти, но не за цялото приложение.

Според React Team — Context documentation (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, той се движи нагоре през fiber дървото в търсене на най-близкия Provider за този контекст. Ако Provider бъде намерен, неговата стойност се връща. Ако Provider не бъде намерен, се връща стандартната стойност, предадена на createContext. Това търсене се случва при всяко изрисоване, но благодарение на мемоизацията на fiber възлите е много бързо и не влияе на производителността.

Според React — Context internals (2024), вътрешната реализация на useContext използва свързан списък от хукове, подобно на useState. Всяка хук съхранява референция към fiber възел, което позволява на React да определи бързо кой Provider съответства на този контекст. Ако Provider актуализира стойността, React маркира всички fiber възли, използващи този контекст, за преизрисоване.

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) и се предоставя чрез 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 е единственият начин за достъп до контекста. Той заменя Consumer компонента от стария Context API, който изискваше модела render-prop: <ThemeContext.Consumer>{value => ...}</ThemeContext.Consumer>. useContext прави кода по-линеен и по-четим, особено при работа с няколко контекста в един компонент.

При използване на няколко контекста в един компонент, просто извикайте useContext няколко пъти за всяка контекст. Всяко извикване връща стойността на съответния Provider. Редът на извикванията няма значение, тъй като всяка контекст е независима единица. React оптимизира множествените извиквания чрез същата fiber референтна система.

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 vs Redux: кога какво да изберем

Изборът между useContext и Redux зависи от мащаба и сложността на управлението на състоянието. useContext + useReducer е лека замяна на Redux за малки и средни приложения. Не изисква инсталация на външна библиотека, по-лесно е за научване и достатъчно за повечето задачи. Redux е оправдан, когато се изисква строга архитектура с middleware, инструменти за разработчици и непроменяеми актуализации.

Основното предимство на Redux пред useContext е оптимизацията на преизрисованията. По подразбиране, при промяна на стойността в Provider-а, всички потребители на контекста се преизрисоват. Redux с useSelector и shallowEqual позволява на компонентите да се абонират само за определени части от състоянието, което значително намалява броя на преизрисованията в големи приложения. Контекстът също може да се оптимизира чрез разделяне на много малки контекстове.

Според Redux maintainers — When to use Redux (2024), 70% от React приложенията не се нуждаят от Redux. Ако имате по-малко от 50 компонента и състоянието няма сложна логика с кеширане, debounce и нежелани ефекти — useContext + useReducer е повече от достатъчно. Redux добавя boilerplate и трябва да се използва осознато.

Типични грешки с useContext

Най-често срещаната грешка е повторното създаване на value обекта при всяко изрисоване на Provider-а. Ако предадете на Provider-а value={{ user, login }}, при всяко изрисоване на Provider-а се създава нов обект, което причинява преизрисоване на всички потребители, дори ако данните не са се променили. Решението — мемоизация на value чрез useMemo или използване на отделни контекстове за често и рядко променящи се данни.

• Налишни преизрисования — нов value обект при всяко изрисоване на Provider-а. Използвайте useMemo за мемоизация на value.
• Тъмън голям контекст — един Provider с десетки полета причинява преизрисоване на всички децки компоненти при промяна на която и да е полето. Разделете на няколко контекста по значение.
• Липса на defaultValue — ако Provider не бъде намерен, useContext връща defaultValue, а ако е undefined — всяко извикване ще се провали с TypeError.
• Вложени Provider от един и същ тип — променянето на контекста на дълбоки нива може да обърка и да доведе до неочаквани стойности.

// ❌ Нов обект при всяко изрисоване — всички потребители се преизрисоват
<AuthContext.Provider value={{ user, login }}>{children}</AuthContext.Provider>

// ✅ Мемоизирана стойност — преизрисоване само когато се промени потребителят или login
const authValue = useMemo(() => ({ user, login }), [user, login]);
<AuthContext.Provider value={authValue}>{children}</AuthContext.Provider>

За да решите проблема с „голям контекст”, разделете глобалното състояние на логически групи: AuthContext, ThemeContext, I18nContext. Всяка контекст отговаря за своя област и се актуализира независимо. Това е по-просто от опит за оптимизация на един гигантски контекст чрез useMemo и осигурява по-предвидимо поведение на преизрисованията.