useTransition và useDeferredValue khác nhau như thế nào? Khi nào dùng cái nào để giữ UI mượt khi cập nhật nặng?

Cả hai đánh dấu một cập nhật là non-urgent để React được phép gián đoạn, ưu tiên input của người dùng. Khác nhau ở chỗ bạn nắm được gì.

useTransition — bạn kiểm soát hành động cập nhật state. Bọc setState trong startTransition để nó thành low-priority; nhận lại cờ isPending để hiện trạng thái loading.

const [isPending, startTransition] = useTransition()
startTransition(() => setQuery(value)) // update này nhường chỗ cho gõ phím

Dùng khi bạn sở hữu setter (đổi tab, lọc list ngay trong component, navigation).

useDeferredValue — bạn chỉ có một value (từ props hay state người khác quản), không gọi được setState của nó. Tạo bản "trễ" của value đó:

const deferredQuery = useDeferredValue(query)
// render list nặng theo deferredQuery; input vẫn cập nhật ngay theo query

Dùng khi value đến từ trên xuống (prop), hoặc khi defer một phần render nặng dựa trên giá trị có sẵn.

Quy tắc nhanh: kiểm soát được setState → useTransition. Chỉ có value, không có setter → useDeferredValue. Cả hai không làm code chạy nhanh hơn, chỉ giúp giữ UI phản hồi bằng cách hoãn phần nặng.