Giới thiệu

Vài ngày trước, tôi đã tìm hiểu về các chiến lược render trong React và Next.js, đặc biệt là CSR, SSR, SSG và ISR. Một bình luận đã thu hút sự chú ý của tôi:

“useEffect ❌, useTransition ✅”
Điều này khiến tôi tò mò—làm thế nào chúng ta có thể làm cho ứng dụng React của mình cảm thấy phản hồi ngay lập tức ngay cả khi có các cập nhật trạng thái nặng? Đó chính là lúc useTransition tỏa sáng. Hãy cùng tìm hiểu cách sử dụng nó một cách hiệu quả.

1. Tại sao chúng ta cần useTransition

Trong các ứng dụng React phức tạp, việc cập nhật trạng thái trong các thành phần lớn (như danh sách lớn, bảng điều khiển hoặc bảng lọc) có thể chặn luồng chính. Việc gõ, nhấp chuột hoặc cuộn cảm thấy chậm chạp. Các cập nhật truyền thống của useEffect có thể gây ra độ trễ đáng chú ý vì React coi chúng là các cập nhật khẩn cấp.

useTransition (được giới thiệu trong React 18) cho phép chúng ta đánh dấu một số cập nhật là chuyển tiếp, điều này không khẩn cấp. React có thể ưu tiên giữ cho UI luôn phản hồi trong khi xử lý các cập nhật nặng hơn ở phía sau.

2. Cách sử dụng cơ bản

import { useState, useTransition } from 'react';

function SearchList({ data }) {
  const [query, setQuery] = useState('');
  const [filtered, setFiltered] = useState(data);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value);
    startTransition(() => {
      const result = data.filter(item => item.includes(value));
      setFiltered(result);
    });
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleChange} />
      {isPending && <p>Đang tải...</p>}
      <ul>
        {filtered.map((item, idx) => (
          <li key={idx}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Giải thích:

• isPending: true trong khi chuyển tiếp đang diễn ra
• startTransition: bọc các cập nhật trạng thái mà chúng ta muốn hoãn lại
• Kết quả: việc gõ vẫn mượt mà, ngay cả với danh sách lớn

3. Khi nào nên sử dụng useTransition

• Nhập liệu/tìm kiếm trong tập dữ liệu lớn
• Lọc hoặc sắp xếp danh sách nặng
• Cập nhật bảng điều khiển với nhiều thành phần
• Tương tác UI cần giữ phản hồi

4. Thực hành tốt nhất

• Không lạm dụng: các trạng thái đơn giản không cần chuyển tiếp
• Kết hợp với React.memo để tránh re-render không cần thiết
• Sử dụng với Suspense cho các cập nhật bất đồng bộ để hiển thị loader

5. Ví dụ thực tế

Hãy tưởng tượng một catalog sản phẩm với hơn 1000 mục. Nếu không có useTransition, việc gõ trong thanh tìm kiếm sẽ chặn UI. Với useTransition:

• Gõ vẫn mượt mà
• Kết quả lọc cập nhật dần dần
• Phản hồi “Đang tải...” tùy chọn thông qua isPending

6. Đo lường cải tiến

• Sử dụng React Profiler để xem các thành phần nào được re-render
• Kiểm tra Core Web Vitals để đánh giá hiệu suất tương tác
• Đảm bảo rằng các cập nhật hoãn lại không làm giảm trải nghiệm người dùng

7. Các cạm bẫy thường gặp

• Lạm dụng useTransition cho mọi cập nhật có thể dẫn đến hiệu suất kém
• Không sử dụng nó cho các cập nhật nhỏ, đơn giản

Kết luận

useTransition đơn giản nhưng mạnh mẽ. Nó ưu tiên trải nghiệm người dùng hơn là tốc độ tính toán thô, làm cho các ứng dụng cảm thấy mượt mà và chuyên nghiệp hơn. Lần tới khi ứng dụng React của bạn cảm thấy chậm chạp trong các cập nhật lớn, hãy xem xét đánh dấu một số cập nhật là chuyển tiếp—bạn có thể sẽ ngạc nhiên bởi sự khác biệt.

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

1. useTransition có hiệu quả trong tất cả các trường hợp không?
Không, nó chủ yếu hiệu quả trong các trường hợp có nhiều cập nhật trạng thái nặng.

2. Tôi có thể kết hợp useTransition với các hook khác không?
Có, bạn có thể kết hợp nó với các hook khác như useMemo hoặc useCallback để tối ưu hóa thêm.

CTA:

Bạn đã thử useTransition chưa? Hãy chia sẻ trải nghiệm hoặc những trường hợp khó khăn trong phần bình luận—tôi rất muốn nghe cách bạn làm cho ứng dụng React của mình cảm thấy nhanh như chớp!