Bạn đã biết tới hook useTransition trong React chưa ?

Một trong những hook cực hay ho của React mà ít người biết tới. Hook này cho phép chúng ta cập nhật state như hook useState, tuy nhiên nó sẽ không gây ra Blocking-UI. Vậy Blocking-UI là gì và sự lợi hại của hook useTransition như thế nào thì bây giờ chúng ta sẽ tìm hiểu cơ chế hoạt động của hook useTransition nha.

Cơ chế hoạt động của useTransition hook

1. Phân loại cập nhật thành “urgent” và “non-urgent”:

useTransition cho phép bạn tách các cập nhật thành hai loại:

• Cập nhật “urgent” (quan trọng): Đây là các cập nhật cần thực hiện ngay lập tức, chẳng hạn như khi các bạn nhập vào ô input để tìm kiếm hoặc nhấn vào nút chẳng hạn.
• Cập nhật “non-urgent” (không quan trọng): Đây là các cập nhật có thể thực hiện sau mà không làm gián đoạn trải nghiệm người dùng, như cập nhật danh sách dữ liệu lớn hoặc hiển thị kết quả sau khi tìm kiếm.

2. Cách hoạt động:

Khi sử dụng useTransition, React sẽ cho phép các cập nhật bất đồng bộ được xử lý trong background(hay còn gọi là chạy nền) và sẽ không chặn các cập nhật UI quan trọng khác. Điều này giúp tránh tình trạng UI bị “đóng băng” khi thực hiện các tác vụ nặng nề.

const [isPending, startTransition] = useTransition()

Như cấu trúc ở trên trong đó:

• isPending: Trả về true khi React đang xử lý các cập nhật bất đồng bộ.
• startTransition: Một hàm nhận vào một callback, bên trong callback này thực hiện các cập nhật trạng thái “non-urgent”.

3. Cơ chế tối ưu:

• Non-Blocking UI: useTransition cho phép các cập nhật quan trọng tiếp tục được xử lý ngay lập tức, trong khi các cập nhật không quan trọng được hoãn lại để thực hiện sau, do đó không gây ra tình trạng UI bị gián đoạn.
• Ưu tiên: React xử lý các cập nhật “urgent” với độ ưu tiên cao hơn so với các cập nhật “non-urgent”, từ đó cải thiện độ phản hồi của ứng dụng.

Ví dụ

Dưới đây là 1 ví dụ mình lấy từ trang chủ của React.Dev cho các bạn dễ hiểu luôn nha(Do mình lười code :)))

Về cơ bản chỉ là code thay đổi state, khi các bạn nhấn vào các tab, mỗi tab sẽ có các nội dung khác nhau, nhiều hoặc ít. Trong trường hợp này thì tab Posts(slow) có nội dung rất nhiều nên load sẽ khá lâu.

Bây giờ các bạn nhấn vào tab bất kỳ sau đó nhấn vào tab Posts( slow) rồi bấm thật nhanh qua tab Contact thì sẽ cảm thấy UI bị đứng 1 chút bởi vì nó phải chờ load nội dung bên trong tab Posts( slow)

const [tab, setTab] = useState('about');

function selectTab(nextTab) {
    setTab(nextTab);
}

Nhưng nếu các bạn sử dụng hook useTransition vào thì các bạn sẽ thấy sự thay đổi ngay lập tức. Các bạn thử làm lại giống khi nãy và sẽ thấy nó không còn bị đứng nữa mà chuyển qua tab khác một cách mượt mà luôn. Mình trích lại đoạn ở trên

useTransition cho phép các cập nhật quan trọng tiếp tục được xử lý ngay lập tức, trong khi các cập nhật không quan trọng được hoãn lại để thực hiện sau, do đó không gây ra tình trạng UI bị gián đoạn.

Thời điểm này khi các bạn nhấn vào tab Contact nó là urgent ưu tiên xử lý nó trước nên chúng ta sẽ thấy nó chuyển qua tab Contact ngay lập tức. Nhưng trước đó mình đã nhấn vào tab Posts(slow)(tab này load rất nhiều thứ và nó thuộc non-urgent) cho nên nó sẽ bị hoãn lại để thực hiện sau cho nên nó sẽ không gây ra Blocking-UI.

const [isPending, startTransition] = useTransition();
const [tab, setTab] = useState('about');

function selectTab(nextTab) {
  startTransition(() => {
    setTab(nextTab);
  });
}

Với isPending các bạn có thể dựa vào nó để có thể cập nhật giao diện như Loading chẳng hạn. Xem ví dụ dưới đây:

const [isPending, startTransition] = useTransition();
// ...
if (isPending) {
  return <b className="pending">{children}</b>;
}

Ngoài ra còn rất nhiều ví dụ khác, quan trọng là các bạn hiểu cách nó hoạt động là có thể áp dụng vào rất nhiều trường hợp. Các bạn có thể đọc thêm nhiều hơn tại: https://react.dev/reference/react/useTransition

Các bạn nhớ đọc phần Troubleshooting của bài viết tại react.dev để phòng tránh các trường hợp sử dụng sai nhé. Mình cũng lâu rồi chưa viết bài nào cho Blog, thấy bài viết ở react.dev khá hay ho và có dùng hook này trong dự án nên chia sẻ lên Blog cho các bạn, nhiều khi các bạn chưa biết tới chức năng của nó.

Cám ơn và chúc các bạn học tập tốt nhé.