React Hooks
Context Hook
useContext – globális adat olvasása, prop drilling elkerülése.
Context Hook
A context lehetővé teszi, hogy adatot adj át mélyen egymásba ágyazott komponenseknek anélkül, hogy minden szinten "átpasszolnád" props-ként (prop drilling).
useContext
Mire való?
Egy korábban létrehozott Context értékének olvasására a komponensben.
Mikor használjuk?
- Globális témakezelés (dark/light mode).
- Bejelentkezett felhasználó adatai.
- Nyelvi beállítások (i18n).
import { createContext, useContext, useState } from 'react';
// 1. Context létrehozása
const ThemeContext = createContext('light');
// 2. Provider: az értéket itt állítod be
function App() {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={theme}>
<Toolbar />
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Téma váltás
</button>
</ThemeContext.Provider>
);
}
// 3. Fogyasztó: bárhol mélyen a fában
function Toolbar() {
const theme = useContext(ThemeContext);
return <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>Tartalom</div>;
}💡 Tipp: A useContext nem pótol egy state management library-t (pl. Zustand, Redux) – nagyobb, komplex globális állapothoz azok jobbak.