Đừng để UI bị chặn: Interruptible Rendering trong React
Quá trình render của React có thể làm đóng băng giao diện người dùng của bạn.
Các tính toán nặng sẽ chặn luồng chính (main thread). Người dùng sẽ thấy màn hình bị treo. Điều này làm hỏng trải nghiệm người dùng.
Interruptible rendering giải quyết vấn đề này. Nó cho phép React tạm dừng công việc để xử lý các thao tác nhập liệu của người dùng.
Cách thức hoạt động:
- React chia nhỏ công việc thành các phần nhỏ.
- Nó kiểm tra các tác vụ có độ ưu tiên cao như click hoặc gõ phím.
- Nếu người dùng tương tác, React sẽ tạm dừng tác vụ chạy ngầm.
- React xử lý đầu vào trước.
- React tiếp tục tác vụ chạy ngầm sau đó.
Bạn sử dụng transitions để quản lý việc này. Hãy sử dụng useTransition để đánh dấu các cập nhật không khẩn cấp. Điều này báo cho React biết cần giữ cho UI luôn phản hồi.
Đừng để việc xử lý dữ liệu nặng làm giảm hiệu suất ứng dụng của bạn.
Nguồn: https://dev.to/iprajapatiparesh/stop-blocking-the-ui-interruptible-rendering-in-react-32mb