useContext: podstata, hook přístupu ke kontextu a providery v Reactu

Co je useContext v Reactu

useContext — je hook přidaný v React 16.8 společně s ostatními hooks, který umožňuje číst hodnotu z React kontextu. Kontext je vestavěný mechanismus v Reactu, určený k předávání dat stromem komponent bez nutnosti ručního předávání props na každé úrovni. useContext nahrazuje Consumer komponentu ze starého Context API a dělá kód konciznějším a čitelnějším.

Typické scénáře použití kontextu zahrnují motivy vzhledu (světlý/tmavý), regionální nastavení a překlady (i18n), autentizaci uživatele, nastavení aplikace a jakákoli jiná globální data, která potřebuje mnoho komponent na různých úrovních vnoření. Tým React doporučuje používat kontext pro data, která jsou globální pro podstrom komponent, ale ne pro celou aplikaci.

Podle React Team — Context documentation (2025) je nesprávné použití kontextu jednou z hlavních příčin výkonnostních problémů v React aplikacích. Každá změna hodnoty v Provideru způsobí překreslení všech spotřebitelů, bez ohledu na to, která část dat se změnila. Optimalizace pomocí useMemo a rozdělení kontextů tento problém řeší.

import { createContext, useContext } from 'react';

// Vytvořit kontext s výchozí hodnotou
const ThemeContext = createContext('světlý');

function ThemedButton() {
    const theme = useContext(ThemeContext);
    return <button className={`btn-${theme}`}>Click</button>;
}

Jak funguje kontext v Reactu

Mechanismus kontextu v Reactu je implementován prostřednictvím vzoru Provider-Consumer. createContext vrací objekt se dvěma entitami: Provider — komponenta, která předává hodnotu, a samotný objekt kontextu používaný v useContext. Provider se montuje do stromu komponent a předává hodnotu všem potomkům bez ohledu na hloubku vnoření.

Když React narazí na volání useContext, pohybuje se nahoru fiber stromem při hledání nejbližšího Provideru pro daný kontext. Pokud je Provider nalezen, vrátí se jeho hodnota. Pokud Provider nalezen není, vrátí se výchozí hodnota předaná do createContext. Toto vyhledávání probíhá při každém vykreslení, ale díky memorizaci fiber uzlů je velmi rychlé a neovlivňuje výkon.

Podle React — Context internals (2024), interní implementace useContext používá propojený seznam hooků, podobně jako useState. Každý hook uchovává odkaz na fiber uzel, což umožňuje Reactu rychle určit, který Provider odpovídá danému kontextu. Pokud Provider aktualizuje hodnotu, React označí všechny fiber uzly používající tento kontext k překreslení.

Provider a vnořené kontexty

Provider komponenty lze vkládat do sebe a vytvářet tak hierarchii kontextů. Každý dětský Provider přepisuje hodnotu rodiče pro svůj podstrom. To je užitečné, když je na jedné obrazovce potřeba světlé téma a ve vnořeném modálním okně — tmavé. useContext vždy vrací hodnotu nejbližšího Provideru výše ve stromu.

const UserContext = createContext(null);
const ThemeContext = createContext('světlý');

function App() {
    return (
        <UserContext.Provider value={{ name: 'Alice' }}>
            <ThemeContext.Provider value='dark'>
                <Profile />
            </ThemeContext.Provider>
        </UserContext.Provider>
    );
}

Vytvoření provideru s createContext

Funkce createContext(defaultValue) vytváří objekt kontextu. Parametr defaultValue se používá, když komponenta zavolá useContext, ale výše ve stromu není odpovídající Provider. Bez defaultValue vrátí useContext undefined, což může vést k neočekávaným chybám. Doporučuje se vždy předávat smysluplnou výchozí hodnotu nebo null.

Vytvoření vlastního provideru je běžný vzor pro zapouzdření logiky kontextu. Uvnitř takového provideru je uložen stav (přes useState nebo useReducer) a poskytován prostřednictvím value prop Provideru. To umožňuje skrýt detaily implementace před spotřebitelskými komponentami a centralizovat logiku správy kontextu na jednom místě.

// Vlastní provider se správou stavu
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>
    );
}

Použití useContext v dětských komponentech

Ve funkcionálních komponentách je useContext jediným způsobem, jak získat přístup ke kontextu. Nahrazuje Consumer komponentu ze starého Context API, který vyžadoval vzor render-prop: <ThemeContext.Consumer>{value => ...}</ThemeContext.Consumer>. useContext dělá kód lineárnějším a čitelnějším, zejména při práci s více kontexty v jedné komponentě.

Při použití více kontextů v jedné komponentě jednoduše zavolejte useContext několikrát pro každý kontext. Každé volání vrátí hodnotu odpovídajícího Provideru. Pořadí volání není důležité, protože každý kontext je nezávislá entita. React optimalizuje násobná volání prostřednictvím stejného systému fiber odkazů.

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: kdy co vybrat

Výběr mezi useContext a Redux závisí na měřítku a složitosti správy stavu. useContext + useReducer je lehká náhrada Redux pro malé a střední aplikace. Nevyžaduje instalaci externí knihovny, je snadnější na naučení a dostatečný pro většinu úkolů. Redux je oprávněný, když je vyžadována striktní architektura s middleware, vývojářskými nástroji a neměnnými aktualizacemi.

Hlavní výhoda Reduxu oproti useContext je optimalizace překreslování. Ve výchozím nastavení při změně hodnoty v Provideru se všichni spotřebitelé kontextu překreslí. Redux s useSelector a shallowEqual umožňuje komponentám odebírat se pouze na určité části stavu, což výrazně snižuje počet překreslení ve velkých aplikacích. Kontext lze také optimalizovat rozdělením na mnoho malých kontextů.

Podle Redux maintainers — When to use Redux (2024) 70% React aplikací Redux nepotřebuje. Pokud máte méně než 50 komponent a stav nemá složitou logiku s cacheováním, debounce a vedlejšími účinky — useContext + useReducer je více než dostatečný. Redux přidává boilerplate a měl by být používán vědomě.

Typické chyby s useContext

Nejčastější chybou je znovuvytváření objektu value při každém vykreslení Provideru. Pokud předáváte do Provideru value={{ user, login }}, při každém vykreslení Provideru vzniká nový objekt, což způsobí překreslení všech spotřebitelů, i když se data nezměnila. Řešení — memorizace value pomocí useMemo nebo použití samostatných kontextů pro často a zřídka se měnící data.

• Zbytečná překreslení — nový objekt value při každém vykreslení Provideru. Použijte useMemo pro memorizaci value.
• Příliš velký kontext — jeden Provider s desítkami polí způsobí, že se všechny dětské komponenty překreslí při změně libovolného pole. Rozdělte na několik kontextů podle významu.
• Chybějící defaultValue — pokud Provider není nalezen, useContext vrátí defaultValue, a pokud je undefined — každé volání selže s TypeError.
• Vnořené Provider stejného typu — přepisování kontextu na hlubokých úrovních může být matoucí a vést k neočekávaným hodnotám.

// ❌ Nový objekt při každém vykreslení — všichni spotřebitelé se překreslí
<AuthContext.Provider value={{ user, login }}>{children}</AuthContext.Provider>

// ✅ Memorizovaná hodnota — překreslení pouze když se změní uživatel nebo login
const authValue = useMemo(() => ({ user, login }), [user, login]);
<AuthContext.Provider value={authValue}>{children}</AuthContext.Provider>

K vyřešení problému „velkého kontextu” rozdělte globální stav do logických skupin: AuthContext, ThemeContext, I18nContext. Každý kontext odpovídá za svou doménu a aktualizuje se nezávisle. To je jednodušší než se snažit optimalizovat jeden gigantický kontext pomocí useMemo a poskytuje předvídatelnější chování překreslování.