Ngày 5 học React: Batching và Functional Updates
Tôi từng nghĩ rằng việc gọi một state setter nhiều lần sẽ gây ra nhiều lần render.
Tôi đã nhầm.
React thông minh hơn thế. Nó sử dụng một quy trình gọi là Automatic Batching.
Thay vì render sau mỗi lần cập nhật, React nhóm chúng lại với nhau. Nó thu thập tất cả các cập nhật và thực hiện một lần render duy nhất. Điều này giúp tiết kiệm hiệu năng.
Đây là những gì tôi đã học được hôm nay.
Quy trình Batching Khi bạn gọi nhiều hàm state, React sẽ tuân theo luồng sau:
- Nhiều lần cập nhật state xảy ra.
- React gom nhóm chúng lại.
- React thực hiện một lần render.
- React áp dụng các thay đổi vào UI.
Vấn đề với các cập nhật tiêu chuẩn (Standard Updates) Tôi đã thử đoạn code này: setCount(count + 1); setCount(count + 1); setCount(count + 1);
Tôi đã mong đợi count tăng từ 0 lên 3. Nhưng nó chỉ tăng từ 0 lên 1.
Điều này xảy ra vì setCount(count + 1) không có nghĩa là "tăng giá trị count lên." Nó có nghĩa là "đặt giá trị count thành một giá trị cụ thể này."
Nếu count là 0, mỗi dòng đều bảo React đặt count thành 1. React gom nhóm các lệnh này và thấy rằng chỉ thị cuối cùng là đặt count thành 1.
Giải pháp: Functional Updates Để khắc phục điều này, bạn phải sử dụng functional update. Cách này sẽ sử dụng state mới nhất có trong hàng đợi cập nhật (update queue).
Cách làm đúng: setCount((prev) => prev + 1);
Khi bạn sử dụng pattern này, React sẽ cung cấp cho mỗi lần cập nhật giá trị mới nhất.
- Lần cập nhật đầu tiên: 0 + 1 = 1
- Lần cập nhật thứ hai: 1 + 1 = 2
- Lần cập nhật thứ ba: 2 + 1 = 3
Giờ đây, bộ đếm thực sự đạt đến 3.
Một lỗi phổ biến Tôi đã từng viết: setCount((prev) => { prev + 1 });
Bộ đếm trở thành undefined. Khi bạn sử dụng dấu ngoặc nhọn trong một arrow function, bạn phải sử dụng từ khóa return. Hãy sử dụng cách này thay thế: setCount((prev) => prev + 1);
Những điểm chính cần ghi nhớ:
- React gom nhóm nhiều lần cập nhật state để cải thiện tốc độ.
- Các lời gọi setState không phải lúc nào cũng kích hoạt render ngay lập tức.
- Các cập nhật tiêu chuẩn sử dụng giá trị từ chu kỳ render hiện tại.
- Functional updates sử dụng state mới nhất từ hàng đợi cập nhật.
- React sử dụng một Update Queue nội bộ để quản lý các thay đổi này.