useContext hook là gì và cách sử dụng?

useContext 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.

Pitfall: 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>
}

Xem toàn bộ React cùng filter theo level & chủ đề con.

Mở danh sách React