Giới thiệu về Hook useTransition trong React

1. useTransition là gì?

Hook useTransition trong React cho phép bạn đánh dấu một số cập nhật trạng thái là "chuyển tiếp". Điều này có nghĩa là chúng có thể được thực hiện trong nền mà không làm tắc nghẽn luồng chính của giao diện người dùng. Điều này giúp giữ cho ứng dụng của bạn phản hồi trong quá trình cập nhật có thể chậm hoặc không khẩn cấp, chẳng hạn như tải nội dung mới hoặc chuyển đổi giữa các chế độ xem.

Hook này trả về một mảng với hai giá trị:

• isPending: Một boolean cho biết có phải đang có một chuyển tiếp đang diễn ra hay không (true khi cập nhật đang chờ).
• startTransition: Một hàm bạn bao bọc quanh cập nhật trạng thái của mình để đánh dấu nó là một chuyển tiếp.

Bạn gọi useTransition ở cấp độ cao nhất của thành phần, tương tự như các hook khác như useState.

2. Tại sao sử dụng useTransition?

Mục đích chính của useTransition là cải thiện trải nghiệm người dùng bằng cách ngăn chặn giao diện không bị đóng băng hoặc hiển thị các trạng thái tải không mong muốn trong quá trình cập nhật không quan trọng. Ví dụ:

• Trong các kịch bản như chuyển tab, tìm kiếm hoặc điều hướng giữa các trang, bạn muốn có phản hồi ngay lập tức (chẳng hạn như tab được làm nổi bật ngay lập tức) trong khi nội dung mới tải trong nền.
• Nếu không có nó, các cập nhật nặng có thể chặn các tương tác, làm cho ứng dụng cảm thấy chậm chạp.
• Nó giúp tránh làm gián đoạn các cập nhật khẩn cấp (như nhập liệu trong ô nhập) với các cập nhật ít quan trọng hơn.
• Các chuyển tiếp có thể bị ngắt nếu có một cập nhật khẩn cấp hơn đến, đảm bảo ứng dụng ưu tiên phản hồi.

2.1 Lợi ích chính

• Duy trì tương tác mượt mà.
• Giảm độ trễ cảm nhận được.
• Cung cấp cách để hiển thị trạng thái chờ (thông qua isPending) mà không cần dùng đến các loader toàn cầu.

Tuy nhiên, nó không phải là giải pháp cho mọi thứ: Các chuyển tiếp không thể kiểm soát trực tiếp các ô nhập văn bản và nhiều chuyển tiếp được nhóm lại với nhau (đây là một hạn chế hiện tại).

3. Ví dụ về tác vụ không đồng bộ với useTransition

Dưới đây là một ví dụ cụ thể về việc sử dụng useTransition của React với một tác vụ không đồng bộ: lấy kết quả tìm kiếm dựa trên đầu vào của người dùng. Điều này giữ cho giao diện người dùng phản hồi trong quá trình lấy dữ liệu không đồng bộ (ví dụ: không có độ trễ khi nhập) và sử dụng isPending để hiển thị chỉ báo tải.

import { useState, useTransition } from 'react';

// Hàm mô phỏng gọi API không đồng bộ
async function fetchSearchResults(query) {
  // Giả lập độ trễ mạng 1 giây
  await new Promise(resolve => setTimeout(resolve, 1000));
  // Kết quả giả lập dựa trên truy vấn
  return query ? [`Kết quả cho "${query}" 1`, `Kết quả cho "${query}" 2`] : [];
}

export default function SearchWithTransition() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleSearch = (newQuery) => {
    setQuery(newQuery);
    startTransition(async () => {
      const fetchedResults = await fetchSearchResults(newQuery);
      setResults(fetchedResults);
    });
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => handleSearch(e.target.value)}
        placeholder="Nhập để tìm kiếm..."
      />
      {isPending && <p>Đang tải kết quả...</p>}
      <ul>
        {results.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

4. Cách thức hoạt động

• Xử lý nhập liệu: Khi người dùng nhập, handleSearch cập nhật trạng thái truy vấn ngay lập tức (cập nhật khẩn cấp, vì vậy không có độ trễ trong ô nhập).
• Lấy dữ liệu không đồng bộ trong chuyển tiếp: Việc lấy dữ liệu không đồng bộ và cập nhật kết quả được bao bọc trong startTransition, đánh dấu chúng là không khẩn cấp. Điều này cho phép React giữ giao diện người dùng tương tác trong thời gian chờ.
• Trạng thái đang chờ: isPending là true trong khi chuyển tiếp (lấy dữ liệu + cập nhật) đang diễn ra, hiển thị "Đang tải kết quả...".
• Khả năng phản hồi: Nếu người dùng nhập nhanh, các chuyển tiếp đang diễn ra có thể bị ngắt bởi các chuyển tiếp mới, ưu tiên đầu vào mới nhất mà không bị chặn.

Điều này rất hữu ích cho việc tìm kiếm có debounce hoặc bất kỳ cập nhật không đồng bộ nào mà bạn muốn tránh tình trạng đóng băng giao diện. Đối với các ứng dụng thực tế, hãy thay thế việc lấy dữ liệu mô phỏng bằng một cuộc gọi API thực sự như fetch('/api/search?q=' + query).

5. Thực hành tốt nhất khi sử dụng useTransition

• Chỉ sử dụng trong các trường hợp không khẩn cấp: Hãy đảm bảo bạn chỉ sử dụng useTransition cho các cập nhật không quá khẩn cấp để tối ưu hóa trải nghiệm người dùng.
• Kết hợp với các state khác: Kết hợp useTransition với các hook khác như useState để quản lý trạng thái một cách hiệu quả hơn.

6. Những cạm bẫy thường gặp

• Không sử dụng cho các cập nhật khẩn cấp: Nếu bạn sử dụng useTransition cho các cập nhật khẩn cấp, điều này có thể gây ra sự chậm trễ không cần thiết.
• Nhiều chuyển tiếp: Khi có nhiều chuyển tiếp cùng lúc, chúng có thể bị nhóm lại mà không có cách nào để kiểm soát thứ tự.

7. Mẹo tối ưu hóa hiệu suất

• Giảm thiểu số lần gọi API: Hãy chắc chắn rằng bạn không gọi API quá nhiều lần trong quá trình nhập liệu. Sử dụng debounce hoặc throttle nếu cần.
• Tối ưu hóa việc render: Sử dụng React.memo hoặc các kỹ thuật tối ưu hóa khác để giảm thiểu việc render không cần thiết.

8. Kết luận

Hook useTransition là một công cụ mạnh mẽ giúp cải thiện trải nghiệm người dùng trong các ứng dụng React. Bằng cách cho phép các cập nhật không khẩn cấp diễn ra trong nền, nó giúp giữ cho ứng dụng phản hồi và mượt mà hơn. Hãy áp dụng useTransition một cách hợp lý để tạo ra trải nghiệm người dùng tốt hơn cho ứng dụng của bạn.

Câu hỏi thường gặp (FAQ)

1. useTransition có thể được sử dụng với tất cả các loại cập nhật không?
Không, chỉ nên sử dụng useTransition cho các cập nhật không khẩn cấp.
2. Làm thế nào để xử lý các lỗi trong quá trình lấy dữ liệu?
Bạn nên thêm các khối try/catch để xử lý các lỗi trong quá trình gọi API.

Tài nguyên tham khảo

• Tài liệu chính thức về React
• Hướng dẫn sử dụng useTransition