Vì sao gọi `setState` xong đọc state vẫn thấy giá trị cũ? Batching trong React hoạt động thế nào?

Vì state trong React là snapshot của lần render hiện tại: setState không sửa biến ngay mà yêu cầu một lần render mới; mọi dòng code phía sau trong cùng handler vẫn đọc giá trị của snapshot cũ.

const [count, setCount] = useState(0)
function handleClick() {
  setCount(count + 1) // schedule a render with 1
  console.log(count)  // still 0 — same snapshot
}

Batching: React gom nhiều lần setState trong cùng một event handler và chỉ re-render MỘT lần sau khi handler chạy xong — tránh render dở dang giữa chừng. Từ React 18, batching là tự động ở mọi nơi (cả trong promise, setTimeout, native event) — trước đó chỉ trong event handler của React.

Hệ quả hay bị hỏi: gọi setCount(count + 1) ba lần liên tiếp chỉ tăng 1, vì cả ba lần đều đọc cùng snapshot count = 0. Muốn cập nhật dựa trên giá trị mới nhất trong hàng đợi → dùng updater function:

setCount(c => c + 1) // three of these do increment by 3

Cần chạy code sau khi state mới có hiệu lực → đặt trong useEffect, đừng đọc biến state ngay sau dòng setState.