ReactuseContext nhận Context object và trả về value hiện tại từ Provider gần nhất bên trên.
- Khi value của Provider thay đổi, mọi component gọi useContext đó đều re-render.
- Lưu ý: nếu không có Provider bên trên, trả về giá trị default từ createContext.
tsx
// 1. Tạo context
const ThemeContext = createContext<'light' | 'dark'>('light')
// 2. Provider bọc cây component
const App = () => (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
)
// 3. Consume ở bất kỳ component con nào
const Toolbar = () => {
const theme = useContext(ThemeContext)
return <div className={theme}>Current theme: {theme}</div>
}useContext accepts a Context object and returns the current value from the nearest Provider above in the tree.
- When the Provider's value changes, every component calling that useContext will re-render.
Pitfall: if there is no Provider above, it returns the default value from createContext.
tsx
// 1. Create context
const ThemeContext = createContext<'light' | 'dark'>('light')
// 2. Provider wraps the component tree
const App = () => (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
)
// 3. Consume in any descendant component
const Toolbar = () => {
const theme = useContext(ThemeContext)
return <div className={theme}>Current theme: {theme}</div>
}