useContext: lényeg, hozzáférési hook a kontextushoz és providerek a Reactben

Mi az a useContext a Reactben

useContext — egy hook, amelyet a React 16.8-ban adtak hozzá a többi hookkal együtt, és lehetővé teszi az érték olvasását a React kontextusból. A kontextus egy beépített mechanizmus a Reactben, amelyet adatok komponensfán keresztül történő továbbítására terveztek anélkül, hogy minden szinten kézzel kellene propsokat továbbítani. A useContext helyettesíti a Consumer komponenst a régi Context API-ból, és tömörebbé és olvashatóbbá teszi a kódot.

A kontextus használatának tipikus forgatókönyvei közé tartoznak a dizájn témák (világos/sötét), regionális beállítások és fordítások (i18n), felhasználói hitelesítés, alkalmazás beállítások és bármilyen más globális adat, amelyre számos komponensnek van szüksége különböző egymásba ágyazási szinteken. A React csapat azt ajánlja, hogy a kontextust olyan adatokhoz használd, amelyek globálisak a komponensek részfájához, de nem az egész alkalmazáshoz.

A React Team — Context documentation (2025) szerint a kontextus helytelen használata az egyik fő oka a teljesítményproblémáknak a React alkalmazásokban. A Provider értékének minden változása az összes fogyasztó újratöltését okozza, függetlenül attól, hogy az adatok mely része változott meg. A useMemo-n keresztüli optimalizálás és a kontextusok szétválasztása megoldja ezt a problémát.

import { createContext, useContext } from 'react';

// Kontextus létrehozása alapértelmezett értékkel
const ThemeContext = createContext('világos');

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

Hogyan működik a kontextus a Reactben

A kontextus mechanizmusa a Reactben a Provider-Consumer minta segítségével van megvalósítva. A createContext egy objektumot ad vissza két entitással: Provider — a komponens, amely továbbítja az értéket, és maga a kontextus objektum, amelyet a useContext használ. A Provider beépül a komponensfába, és továbbítja az értéket az összes gyermek elem számára, függetlenül az egymásba ágyazás mélységétől.

Amikor a React egy useContext hívással találkozik, felfelé halad a fiber fában, hogy megtalálja a legközelebbi Providert az adott kontextushoz. Ha a Provider megtalálható, az értéke kerül visszaadásra. Ha a Provider nem található, a createContext-nek átadott alapértelmezett érték kerül visszaadásra. Ez a keresés minden betöltésnél megtörténik, de a fiber csomópontok memorizálásának köszönhetően nagyon gyors és nem befolyásolja a teljesítményt.

A React — Context internals (2024) szerint a useContext belső megvalósítása a hookok láncolt listáját használja, hasonlóan a useState-hez. Minden hook tárol egy referenciát a fiber csomóponthoz, ami lehetővé teszi a React számára, hogy gyorsan meghatározza, melyik Provider tartozik az adott kontextushoz. Ha a Provider frissíti az értéket, a React megjelöli az összes fiber csomópontot, amely ezt a kontextust használja, újratöltés céljából.

Provider és egymásba ágyazott kontextusok

A Provider komponensek egymásba ágyazhatók, kontextusok hierarchiáját hozva létre. Minden gyermek Provider felülírja a szülő értékét a saját részfájához. Ez akkor hasznos, ha az egyik képernyőn világos téma szükséges, egy egymásba ágyazott modális ablakban pedig sötét. A useContext mindig a fában feljebb található legközelebbi Provider értékét adja vissza.

const UserContext = createContext(null);
const ThemeContext = createContext('világos');

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

Provider létrehozása createContext segítségével

A createContext(defaultValue) függvény létrehoz egy kontextus objektumot. A defaultValue paraméter akkor használatos, amikor egy komponent meghívja a useContext-et, de a fában feljebb nincs megfelelő Provider. defaultValue nélkül a useContext undefined értéket ad vissza, ami váratlan hibákhoz vezethet. Ajánlott mindig értelmes alapértelmezett értéket vagy null átadni.

Egyéni provider létrehozása gyakori minta a kontextus logikájának enkapszulálásához. Az ilyen provider belső részében tárolódik az állapot (useState vagy useReducer segítségével), és a Provider value propján keresztül elérhető. Ez lehetővé teszi a megvalósítási részletek elrejtését a fogyasztó komponensek elől, és a kontextuskezelési logika egy helyre történő központosítását.

// Egyéni provider állapotkezeléssel
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>
    );
}

A useContext használata gyermek komponensekben

Funkcionális komponensekben a useContext az egyetlen mód a kontextushoz való hozzáférésre. Helyettesíti a régi Context API Consumer komponensét, amely render-prop mintát igényelt: <ThemeContext.Consumer>{value => ...}</ThemeContext.Consumer>. A useContext lineárisabbá és olvashatóbbá teszi a kódot, különösen több kontextus használata esetén egy komponensben.

Több kontextus használata esetén egy komponensben egyszerűen hívd meg a useContext-et többször, minden kontextushoz külön-külön. Minden hívás visszaadja a megfelelő Provider értékét. A hívások sorrendje nem számít, mert minden kontextus független entitás. A React optimalizálja a többszörös hívásokat ugyanazon fiber-referencia rendszeren keresztül.

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: mikor mit válassz

A useContext és a Redux közötti választás az állapotkezelés méretétől és összetettségétől függ. A useContext + useReducer egy könnyű helyettesítője a Redux-nak kis és közepes alkalmazásokhoz. Nem igényel külső könyvtár telepítését, könnyebben megtanulható és a legtöbb feladathoz elegendő. A Redux akkor indokolt, ha szigorú architektúra szükséges middleware-rel, fejlesztői eszközökkel és megváltoztathatatlan frissítésekkel.

A Redux fő előnye a useContext-szel szemben az újratöltések optimalizálása. Alapértelmezés szerint, amikor a Provider értéke megváltozik, az összes kontextus fogyasztó újratöltődik. A Redux a useSelector és a shallowEqual segítségével lehetővé teszi a komponensek számára, hogy csak az állapot bizonyos részeire iratkozzanak fel, ami jelentősen csökkenti az újratöltések számát nagy alkalmazásokban. A kontextus is optimalizálható több kis kontextusra bontással.

A Redux maintainers — When to use Redux (2024) szerint a React alkalmazások 70%-a nem igényel Redux-ot. Ha kevesebb mint 50 komponensed van és az állapot nem rendelkezik összetett logikával gyorsítótárral, debounce-szal és mellékhatásokkal — a useContext + useReducer bőven elegendő. A Redux boilerplate-et ad hozzá, és tudatosan kell használni.

Gyakori hibák a useContext használatában

A leggyakoribb hiba a value objektum újralétrehozása a Provider minden betöltésekor. Ha a Providernek value={{ user, login }} értéket adsz át, minden Provider betöltéskor új objektum jön létre, ami az összes fogyasztó újratöltését okozza, még akkor is, ha az adatok nem változtak. Megoldás — a value memorizálása useMemo segítségével, vagy külön kontextusok használata a gyakran és ritkán változó adatokhoz.

• Felesleges újratöltések — new value objektum minden Provider renderelésnél. Használj useMemo-t a value memorizálásához.
• Túl nagy kontextus — egyetlen Provider tucatnyi mezővel az összes gyermek komponens újratöltését okozza bármely mező változásakor. Oszd fel több kontextusra jelentés szerint.
• Hiányzó defaultValue — ha a Provider nem található, a useContext visszaadja a defaultValue-t, ha pedig undefined — minden hívás TypeError hibával fog meghiúsulni.
• Egymásba ágyazott azonos típusú Provider-ek — a kontextus felülírása mély szinteken zavaró lehet és váratlan értékekhez vezethet.

// ❌ Új objektum minden renderelésnél — az összes fogyasztó újratöltődik
<AuthContext.Provider value={{ user, login }}>{children}</AuthContext.Provider>

// ✅ Memorizált érték — újratöltés csak akkor, amikor a felhasználó vagy a login megváltozik
const authValue = useMemo(() => ({ user, login }), [user, login]);
<AuthContext.Provider value={authValue}>{children}</AuthContext.Provider>

A „nagy kontextus” probléma megoldásához oszd fel a globális állapotot logikai csoportokra: AuthContext, ThemeContext, I18nContext. Minden kontextus a saját területéért felel és függetlenül frissül. Ez egyszerűbb, mint egyetlen gigantikus kontextus optimalizálása useMemo segítségével, és kiszámíthatóbb újratöltési viselkedést biztosít.