React Hooks Tìm hiểu Sâu: Phần 2 - useContext và useReducer

Chào mừng đến Phần 2 của loạt bài React Hooks! Hôm nay chúng ta sẽ khám phá useContext và useReducer cho các tình huống quản lý state nâng cao hơn.

useContext Hook

Hook useContext cho phép bạn sử dụng các giá trị context mà không cần prop drilling:

TypeScript

import { createContext, useContext } from 'react';
 
const ThemeContext = createContext('light');
 
function ThemedButton() {
  const theme = useContext(ThemeContext);
 
  return (
    <button className={`btn-${theme}`}

Khi nào sử dụng

Chia sẻ dữ liệu qua nhiều components
Tránh prop drilling
Global state không thay đổi thường xuyên

useReducer Hook

useReducer giống như useState nhưng cho logic state phức tạp: