[Advanced React] React Concurrent Mode: Tăng hiệu suất ứng dụng lên mức tối đa

Trong thế giới phát triển web không ngừng biến đổi, hiệu năng và trải nghiệm người dùng (UX) luôn là kim chỉ nam cho mọi quyết định công nghệ. React, với vị thế là một trong những thư viện JavaScript hàng đầu, đã có một bước nhảy vọt mang tính cách mạng với sự ra đời của Concurrent Mode. Đây không chỉ là một bản cập nhật tính năng thông thường, mà là một sự thay đổi nền tảng trong cách React render và quản lý các cập nhật giao diện, hứa hẹn mang đến những ứng dụng mượt mà, thông minh và phản hồi nhanh hơn bao giờ hết.

Hãy cùng nhau khám phá sâu hơn về Concurrent Mode, để hiểu tại sao nó được coi là "kẻ thay đổi cuộc chơi" và làm thế nào nó có thể nâng tầm các dự án React của bạn.

Concurrent Mode là gì? Phá vỡ sự tắc nghẽn của Synchronous Rendering

Để hiểu được sức mạnh của Concurrent Mode, trước tiên chúng ta cần nhìn lại cách React hoạt động theo truyền thống: rendering đồng bộ (Synchronous Rendering).

Trong mô hình này, một khi React bắt đầu render một bản cập nhật (ví dụ: khi setState được gọi), nó sẽ không dừng lại cho đến khi toàn bộ cây component được render xong. Quá trình này giống như một con đường một chiều, độc đạo. Nếu có một tác vụ render lớn, nặng nề, nó sẽ chặn đứng luồng chính (main thread) của trình duyệt. Hậu quả là ứng dụng của bạn sẽ bị "đơ", không thể phản hồi lại bất kỳ tương tác nào của người dùng như click chuột, gõ phím, cho đến khi quá trình render hoàn tất. Đây chính là "nút thắt cổ chai" gây ra trải nghiệm người dùng tệ hại.

Concurrent Mode ra đời để giải quyết chính vấn đề này. "Concurrent" có nghĩa là "đồng thời", nhưng đừng nhầm lẫn nó với "parallel" (song song). React không thực sự chạy nhiều luồng cùng lúc. Thay vào đó, nó trở nên thông minh hơn rất nhiều.

Với Concurrent Mode, React có thể bắt đầu một quá trình render, tạm dừng nó giữa chừng để xử lý một công việc khác quan trọng hơn (như một cú click của người dùng), và sau đó tiếp tục lại công việc render đang dang dở sau khi đã xử lý xong. Nó thậm chí có thể vứt bỏ một quá trình render cũ nếu có một bản cập nhật mới quan trọng hơn xuất hiện.

Nói một cách ví von, rendering trong Concurrent Mode giống như một cuộc trò chuyện. Bạn có thể tạm dừng câu chuyện của mình để nghe một người khác nói, sau đó quay lại tiếp tục câu chuyện mà không làm mất đi mạch lạc. Điều này giúp cho luồng chính của trình duyệt không bao giờ bị chặn quá lâu, đảm bảo ứng dụng luôn mượt mà và phản hồi nhanh nhạy.

Những vũ khí lợi hại nhất của Concurrent Mode

Concurrent Mode không chỉ là một khái niệm trừu tượng. Nó mang đến cho chúng ta những công cụ và API mạnh mẽ để kiểm soát và ưu tiên các bản cập nhật giao diện.

1. Transitions: Phân loại ưu tiên cập nhật

Đây là trái tim của Concurrent Mode. React giờ đây cho phép chúng ta phân loại các bản cập nhật thành hai loại:

• Urgent Updates (Cập nhật khẩn cấp): Đây là những thay đổi cần được phản hồi ngay lập tức, ví dụ như việc gõ chữ vào một ô input. Người dùng kỳ vọng thấy ký tự xuất hiện ngay khi họ gõ.
• Transition Updates (Cập nhật chuyển tiếp): Đây là những cập nhật giao diện có thể mất một chút thời gian để hoàn thành và không cần phải diễn ra ngay tức khắc, ví dụ như lọc một danh sách dữ liệu lớn, chuyển tab trên giao diện...

Chúng ta có thể đánh dấu một cập nhật là "transition" bằng cách sử dụng hook useTransition hoặc hàm startTransition.

import { useTransition } from 'react'

function App() {
  const [isPending, startTransition] = useTransition()
  const [filterTerm, setFilterTerm] = useState('')

  const handleFilterChange = (e) => {
    // Cập nhật khẩn cấp: hiển thị ngay lập tức giá trị người dùng gõ
    setInputValue(e.target.value)

    // Cập nhật chuyển tiếp: việc lọc danh sách có thể diễn ra sau
    startTransition(() => {
      setFilterTerm(e.target.value)
    })
  }

  return (
    <div>
      <input onChange={handleFilterChange} />
      {/* isPending sẽ là true trong khi transition đang diễn ra */}
      {isPending ? <Spinner /> : <FilteredList term={filterTerm} />}
    </div>
  )
}

Khi bạn bọc một cập nhật trong startTransition, bạn đang nói với React rằng: "Này React, cập nhật này không quá khẩn cấp. Cậu có thể bắt đầu render nó, nhưng nếu người dùng có tương tác nào khác quan trọng hơn, hãy cứ ưu tiên xử lý nó trước nhé!". Điều này giúp cho các tương tác quan trọng không bao giờ bị gián đoạn.

2. useDeferredValue: Trì hoãn giá trị "đắt đỏ"

Hook này là một công cụ tuyệt vời khác để tối ưu hóa hiệu năng. useDeferredValue cho phép bạn trì hoãn việc cập nhật một phần của giao diện. Nó nhận một giá trị và trả về một phiên bản "bị trì hoãn" của giá trị đó. Phiên bản này sẽ "bám theo" giá trị gốc, nhưng với một độ trễ.

Hãy tưởng tượng bạn có một ô tìm kiếm và một danh sách kết quả. Việc lọc và hiển thị danh sách có thể rất nặng nề.

import { useState, useDeferredValue } from 'react'

function SearchPage() {
  const [query, setQuery] = useState('')
  const deferredQuery = useDeferredValue(query) // Trì hoãn query

  // Giao diện input sẽ cập nhật ngay lập tức với `query`
  // Nhưng danh sách kết quả sẽ chỉ render lại khi `deferredQuery` thay đổi
  // `deferredQuery` sẽ cập nhật sau `query` một chút, không làm chặn UI

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <SearchResults query={deferredQuery} />
    </div>
  )
}

Trong ví dụ này, khi người dùng gõ vào ô input, query được cập nhật ngay lập tức, khiến cho ô input luôn phản hồi nhanh. Tuy nhiên, deferredQuery sẽ chỉ cập nhật sau một khoảng thời gian ngắn. Điều này có nghĩa là component SearchResults sẽ không render lại trên mỗi lần gõ phím, mà chỉ render khi người dùng đã ngừng gõ.

3. Suspense: Trải nghiệm tải dữ liệu thanh lịch

Suspense không phải là một tính năng hoàn toàn mới, nhưng nó phát huy hết sức mạnh của mình khi kết hợp với Concurrent Mode, đặc biệt là trong việc tải dữ liệu (data fetching).

Trước đây, khi một component cần dữ liệu từ server, chúng ta thường phải tự quản lý các trạng thái isLoading, error, data. Với Suspense, mọi thứ trở nên đơn giản và khai báo hơn rất nhiều.

Bạn có thể "bọc" một component đang chờ dữ liệu bằng <Suspense>. React sẽ hiển thị một fallback UI (ví dụ như một spinner) trong khi component con đang "treo" (suspended) để đợi dữ liệu.

import { Suspense } from 'react'

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<Spinner />}>
        {/* UserProfile là một component tự tìm nạp dữ liệu của nó */}
        <UserProfile />
      </Suspense>
    </div>
  )
}

Điều kỳ diệu ở đây là: React sẽ không chỉ hiển thị spinner. Trong Concurrent Mode, React có thể bắt đầu render giao diện mới ở trong bộ nhớ mà không cần đợi dữ liệu. Khi dữ liệu về đến nơi, nó sẽ hoàn tất quá trình render một cách liền mạch. Điều này giúp tránh các hiệu ứng "nhấp nháy" khó chịu và tạo ra các chuyển đổi trạng thái tải mượt mà hơn.

Lợi ích vượt trội và tương lai của React

Việc áp dụng Concurrent Mode mang lại những lợi ích không thể chối cãi:

• Trải nghiệm người dùng vượt trội: Các ứng dụng trở nên mượt mà, phản hồi nhanh hơn, loại bỏ hoàn toàn cảm giác "bị đơ" ngay cả khi đang xử lý các tác vụ nặng.
• Trải nghiệm phát triển được cải thiện: Các API mới như useTransition và useDeferredValue giúp việc quản lý các trạng thái phức tạp và tối ưu hóa hiệu năng trở nên trực quan và dễ dàng hơn.
• Kiến trúc linh hoạt hơn: Cho phép tạo ra các luồng người dùng phức tạp và các trải nghiệm tải dữ liệu liền mạch mà không cần đến các logic quản lý trạng thái rườm rà.

Concurrent Mode không phải là một tùy chọn bật/tắt đơn giản, mà là một nền tảng mới mà toàn bộ hệ sinh thái React đang hướng tới. Các phiên bản React mới (từ React 18 trở đi) đã mặc định bật các tính năng concurrent này. Việc hiểu và nắm vững nó không chỉ giúp bạn giải quyết các vấn đề hiệu năng hiện tại, mà còn là sự chuẩn bị cần thiết cho tương lai phát triển với React.

Đây là một sự thay đổi tư duy, một bước tiến lớn giúp các nhà phát triển chúng ta xây dựng nên những sản phẩm web không chỉ mạnh mẽ về mặt tính năng mà còn tinh tế và hoàn hảo về mặt trải nghiệm. Hãy bắt đầu khám phá và áp dụng Concurrent Mode ngay hôm nay để không bỏ lỡ "làn sóng" tối ưu hóa đầy thú vị này!