useContext & Pattern Kết Hợp useReducer

Xây dựng hệ thống quản lý State nội bộ mạnh mẽ với Context API + useReducer, phân tách Context để tránh re-render diện rộng.

Core Mental Model

Context giống như mạng lưới phát thanh nội bộ cho một nhánh component. useReducer đóng vai trò bộ não tiếp nhận các Action và cập nhật state một cách có dự đoán (Predictable State Machine).

Key Takeaways & Principles

useReducer là sự lựa chọn tối ưu khi State có nhiều logic phức tạp, nhiều giá trị phụ thuộc lẫn nhau hoặc có cấu trúc lồng nhau.

Cạm bẫy của Context: MỌI component gọi `useContext(MyContext)` đều sẽ re-render khi giá trị Context Value thay đổi.

Kỹ thuật tối ưu: Tách State Context và Dispatch Context riêng biệt để các component chỉ phát Action không bị re-render khi State đổi.

React Hooks Mastery

intermediate

20 phút

#useContext

#useReducer

#State Management