State là bất kỳ dữ liệu nào có thể thay đổi theo thời gian và mà UI phụ thuộc vào để render. Khi state thay đổi, UI cập nhật để phản ánh điều đó. Nó chính là "bộ nhớ" của ứng dụng tại mỗi thời điểm.
✓ Giá trị của một counter, văn bản nhập trong form, một toggle (bật/tắt)
✓ Một modal có đang mở hay không, tab đang active, các flag loading/error
✓ Người dùng đã đăng nhập, các sản phẩm trong giỏ hàng, dữ liệu lấy từ API
✓ Theme hiện tại (dark/light), các bộ lọc đã chọn
function Counter() {
const [count, setCount] = useState(0); // `count` là state
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times {/* UI là một hàm của state */}
</button>
);
}
Ý tưởng cốt lõi của các framework hiện đại: UI = f(state). Bạn không cập nhật DOM thủ công; bạn thay đổi state, và framework re-render UI để khớp với nó. Click vào button → count thay đổi → con số hiển thị tự động cập nhật.
State: thay đổi theo thời gian, điều khiển re-render (count, user, isOpen)
Constants: không bao giờ đổi (PI, các URL config) — không phải state
Derived: tính TỪ state (fullName từ firstName + lastName) — đừng lưu riêng
Không phải biến nào cũng là state — chỉ những dữ liệu vừa thay đổi vừa ảnh hưởng đến thứ được render. Những giá trị có thể tính từ state hiện có thì không nên lưu thành state riêng (điều đó có nguy cơ khiến chúng lệch nhau).
Local/UI state → thuộc về một component (input text, isOpen)
Global state → chia sẻ toàn app (user, theme, cart)
Server state → dữ liệu lấy từ API (cache dữ liệu remote)
URL state → nằm trên thanh địa chỉ (filters, số trang)
Hiểu state là "dữ liệu thay đổi và điều khiển UI" là nền tảng của toàn bộ frontend development.
Mô hình tư duy UI = f(state) giải thích cách React/Vue/Angular hoạt động — bạn quản lý state, và view đi theo.
Nhận biết cái gì là và không phải state (và không nhân bản những giá trị có thể tính ra được) là bước đầu tiên để quản lý state tốt; mọi thứ trong state management đều xây dựng dựa trên khái niệm này.