Trạng thái là gì?

Cho đến giờ, mọi thứ đều cố định: dữ liệu đi vào, một trang xuất hiện, không có gì thay đổi. Ứng dụng thực tế ghi nhớ những thứ thay đổi: số lượt thích, menu đang mở, nội dung trong ô tìm kiếm. Bộ nhớ đó được gọi là state.

React cung cấp state cho các component thông qua hook useState:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    ...
}

Một dòng, ba phần:

• count: giá trị hiện tại
• setCount: hàm thay đổi giá trị đó
• useState(0): giá trị bắt đầu

Quy tắc vàng: không bao giờ gán trực tiếp cho state. count = 5 gây ra lỗi vì count là một const. Ngay cả khi giá trị này có thể thay đổi, React cũng sẽ không biết. setCount(5) thay đổi state và kết xuất lại component. Việc kết xuất lại đó giúp cập nhật màn hình.