ReactDebounce hoãn theo đồng hồ; useDeferredValue hoãn theo mức bận của máy.
| debounce 300ms | useDeferredValue | |
|---|---|---|
| Điều kiện chạy | hết 300ms không gõ thêm | React rảnh sau khi xong việc gấp |
| Máy khoẻ | vẫn chờ đủ 300ms | cập nhật gần như ngay |
| Máy yếu | vẫn 300ms rồi khựng dài | tự giãn ra, không khoá input |
| Render dở khi có input mới | không biết, vẫn render tiếp | bị ngắt và bỏ đi |
Điểm mấu chốt: debounce chỉ trì hoãn thời điểm bắt đầu render nặng — khi đã bắt đầu thì vẫn khoá main thread cho tới hết. useDeferredValue cho phép React ngắt giữa chừng để trả lời phím vừa gõ.
Debounce vẫn cần cho việc thật sự tốn kém bên ngoài: gọi API, ghi localStorage, bắn analytics — ở đó mục tiêu là giảm số lần gọi, không phải giảm khựng render. Thực tế hay dùng cả hai: debounce cho request mạng, useDeferredValue cho phần lọc/vẽ tại client.