M

MLOG

Tiếng Việt

Tìm hiểu sâu về hook useDeferredValue của React. Học cách khắc phục lag UI, hiểu về đồng thời, so sánh với useTransition và xây dựng ứng dụng nhanh hơn cho người dùng toàn cầu.

useDeferredValue của React: Hướng Dẫn Toàn Diện về Hiệu Suất UI Không Chặn

Trong thế giới phát triển web hiện đại, trải nghiệm người dùng là tối quan trọng. Một giao diện nhanh, phản hồi tốt không còn là một thứ xa xỉ—đó là một kỳ vọng. Đối với người dùng trên toàn cầu, trên nhiều loại thiết bị và điều kiện mạng khác nhau, một giao diện người dùng (UI) bị lag, giật có thể là sự khác biệt giữa một khách hàng quay trở lại và một khách hàng đã mất. Đây là lúc các tính năng đồng thời (concurrent) của React 18, đặc biệt là hook useDeferredValue, thay đổi cuộc chơi.

Nếu bạn đã từng xây dựng một ứng dụng React với trường tìm kiếm để lọc một danh sách lớn, một lưới dữ liệu cập nhật theo thời gian thực, hoặc một bảng điều khiển phức tạp, bạn có thể đã gặp phải tình trạng UI bị "đóng băng" đáng sợ. Người dùng gõ, và trong một khoảnh khắc, toàn bộ ứng dụng trở nên không phản hồi. Điều này xảy ra bởi vì việc render truyền thống trong React là chặn (blocking). Một cập nhật state sẽ kích hoạt một lần render lại, và không có gì khác có thể xảy ra cho đến khi nó hoàn tất.

Hướng dẫn toàn diện này sẽ đưa bạn đi sâu vào hook useDeferredValue. Chúng ta sẽ khám phá vấn đề mà nó giải quyết, cách nó hoạt động ngầm với bộ máy đồng thời mới của React, và cách bạn có thể tận dụng nó để xây dựng các ứng dụng phản hồi cực nhanh, mang lại cảm giác nhanh ngay cả khi chúng đang thực hiện nhiều công việc. Chúng ta sẽ bao gồm các ví dụ thực tế, các mẫu nâng cao, và các thực hành tốt nhất quan trọng cho người dùng toàn cầu.

Hiểu Vấn Đề Cốt Lõi: Giao Diện Người Dùng Bị Chặn (Blocking UI)

Trước khi chúng ta có thể đánh giá cao giải pháp, chúng ta phải hiểu đầy đủ vấn đề. Trong các phiên bản React trước 18, việc render là một quá trình đồng bộ và không thể bị gián đoạn. Hãy tưởng tượng một con đường một làn: một khi một chiếc xe (một lần render) đi vào, không có chiếc xe nào khác có thể vượt qua cho đến khi nó đến cuối đường. Đây là cách React đã hoạt động.

Hãy xem xét một kịch bản cổ điển: một danh sách sản phẩm có thể tìm kiếm. Người dùng gõ vào hộp tìm kiếm, và một danh sách hàng nghìn mục bên dưới sẽ lọc dựa trên đầu vào của họ.

Một Cách Triển Khai Điển Hình (và Gây Lag)

Đây là cách mã nguồn có thể trông như thế nào trong thế giới trước React 18, hoặc không sử dụng các tính năng đồng thời:

Cấu trúc Component:

Tệp: SearchPage.js

import React, { useState } from 'react'; import ProductList from './ProductList'; import { generateProducts } from './data'; // một hàm tạo ra một mảng lớn const allProducts = generateProducts(20000); // Hãy tưởng tượng có 20,000 sản phẩm function SearchPage() { const [query, setQuery] = useState(''); const filteredProducts = allProducts.filter(product => { return product.name.toLowerCase().includes(query.toLowerCase()); }); function handleChange(e) { setQuery(e.target.value); } return (

); } export default SearchPage;

Tại sao lại chậm?

Hãy theo dõi hành động của người dùng:

  1. Người dùng gõ một chữ cái, ví dụ 'a'.
  2. Sự kiện onChange được kích hoạt, gọi hàm handleChange.
  3. setQuery('a') được gọi. Điều này lên lịch một lần render lại cho component SearchPage.
  4. React bắt đầu render lại.
  5. Bên trong lần render, dòng const filteredProducts = allProducts.filter(...) được thực thi. Đây là phần tốn kém. Việc lọc một mảng 20,000 mục, ngay cả với một kiểm tra 'includes' đơn giản, cũng mất thời gian.
  6. Trong khi việc lọc này đang diễn ra, luồng chính của trình duyệt hoàn toàn bị chiếm dụng. Nó không thể xử lý bất kỳ đầu vào mới nào của người dùng, không thể cập nhật trực quan trường nhập liệu, và không thể chạy bất kỳ JavaScript nào khác. Giao diện người dùng bị chặn.
  7. Khi việc lọc hoàn tất, React tiếp tục render component ProductList, bản thân nó cũng có thể là một hoạt động nặng nếu nó đang render hàng ngàn nút DOM.
  8. Cuối cùng, sau tất cả công việc này, DOM được cập nhật. Người dùng thấy chữ 'a' xuất hiện trong hộp nhập liệu, và danh sách được cập nhật.

Nếu người dùng gõ nhanh—ví dụ, "apple"—toàn bộ quá trình chặn này xảy ra cho 'a', rồi 'ap', rồi 'app', 'appl', và 'apple'. Kết quả là một sự chậm trễ đáng chú ý, nơi trường nhập liệu bị giật và khó theo kịp tốc độ gõ của người dùng. Đây là một trải nghiệm người dùng kém, đặc biệt là trên các thiết bị yếu hơn phổ biến ở nhiều nơi trên thế giới.

Giới Thiệu Tính Năng Concurrency của React 18

React 18 thay đổi cơ bản mô hình này bằng cách giới thiệu tính đồng thời (concurrency). Concurrency không giống như song song (parallelism - làm nhiều việc cùng một lúc). Thay vào đó, đó là khả năng của React để tạm dừng, tiếp tục, hoặc hủy bỏ một lần render. Con đường một làn bây giờ có các làn vượt và một người điều khiển giao thông.

Với concurrency, React có thể phân loại các cập nhật thành hai loại:

React bây giờ có thể bắt đầu một lần render "transition" không khẩn cấp, và nếu một cập nhật khẩn cấp hơn (như một lần nhấn phím khác) đến, nó có thể tạm dừng lần render đang chạy dài, xử lý cái khẩn cấp trước, và sau đó tiếp tục công việc của mình. Điều này đảm bảo giao diện người dùng luôn tương tác. Hook useDeferredValue là một công cụ chính để tận dụng sức mạnh mới này.

`useDeferredValue` là gì? Giải Thích Chi Tiết

Về cốt lõi, useDeferredValue là một hook cho phép bạn nói với React rằng một giá trị nhất định trong component của bạn không khẩn cấp. Nó chấp nhận một giá trị và trả về một bản sao mới của giá trị đó, bản sao này sẽ "tụt lại phía sau" nếu có các cập nhật khẩn cấp đang diễn ra.

Cú Pháp

Hook này cực kỳ đơn giản để sử dụng:

import { useDeferredValue } from 'react'; const deferredValue = useDeferredValue(value);

Chỉ vậy thôi. Bạn truyền cho nó một giá trị, và nó sẽ trả về cho bạn một phiên bản trì hoãn của giá trị đó.

Cách Hoạt Động Bên Dưới

Hãy làm sáng tỏ sự kỳ diệu này. Khi bạn sử dụng useDeferredValue(query), đây là những gì React làm:

  1. Render ban đầu: Trong lần render đầu tiên, deferredQuery sẽ giống với query ban đầu.
  2. Một cập nhật khẩn cấp xảy ra: Người dùng gõ một ký tự mới. State query cập nhật từ 'a' thành 'ap'.
  3. Render ưu tiên cao: React ngay lập tức kích hoạt một lần render lại. Trong lần render khẩn cấp, đầu tiên này, useDeferredValue biết rằng có một cập nhật khẩn cấp đang diễn ra. Vì vậy, nó vẫn trả về giá trị trước đó, 'a'. Component của bạn render lại nhanh chóng vì giá trị của trường nhập liệu trở thành 'ap' (từ state), nhưng phần giao diện người dùng phụ thuộc vào deferredQuery (danh sách chậm) vẫn sử dụng giá trị cũ và không cần phải tính toán lại. Giao diện người dùng vẫn phản hồi tốt.
  4. Render ưu tiên thấp: Ngay sau khi lần render khẩn cấp hoàn tất, React bắt đầu một lần render thứ hai, không khẩn cấp, ở chế độ nền. Trong lần render *này*, useDeferredValue trả về giá trị mới, 'ap'. Lần render nền này là thứ kích hoạt hoạt động lọc tốn kém.
  5. Khả năng bị gián đoạn: Đây là phần quan trọng nhất. Nếu người dùng gõ một chữ cái khác ('app') trong khi lần render ưu tiên thấp cho 'ap' vẫn đang diễn ra, React sẽ hủy bỏ lần render nền đó và bắt đầu lại. Nó ưu tiên cập nhật khẩn cấp mới ('app'), và sau đó lên lịch một lần render nền mới với giá trị trì hoãn mới nhất.

Điều này đảm bảo rằng công việc tốn kém luôn được thực hiện trên dữ liệu gần đây nhất, và nó không bao giờ chặn người dùng cung cấp đầu vào mới. Đó là một cách mạnh mẽ để giảm ưu tiên các tính toán nặng mà không cần logic debouncing hoặc throttling thủ công phức tạp.

Triển Khai Thực Tế: Sửa Lỗi Tìm Kiếm Bị Lag

Hãy tái cấu trúc ví dụ trước của chúng ta bằng cách sử dụng useDeferredValue để xem nó hoạt động.

Tệp: SearchPage.js (Đã tối ưu hóa)

import React, { useState, useDeferredValue, useMemo } from 'react'; import ProductList from './ProductList'; import { generateProducts } from './data'; const allProducts = generateProducts(20000); // Một component để hiển thị danh sách, được memo hóa để tăng hiệu suất const MemoizedProductList = React.memo(ProductList); function SearchPage() { const [query, setQuery] = useState(''); // 1. Trì hoãn giá trị query. Giá trị này sẽ tụt lại phía sau state 'query'. const deferredQuery = useDeferredValue(query); // 2. Việc lọc tốn kém bây giờ được điều khiển bởi deferredQuery. // Chúng ta cũng bọc nó trong useMemo để tối ưu hóa thêm. const filteredProducts = useMemo(() => { console.log('Đang lọc cho:', deferredQuery); return allProducts.filter(product => { return product.name.toLowerCase().includes(deferredQuery.toLowerCase()); }); }, [deferredQuery]); // Chỉ tính toán lại khi deferredQuery thay đổi function handleChange(e) { // Cập nhật state này là khẩn cấp và sẽ được xử lý ngay lập tức setQuery(e.target.value); } return (

{/* 3. Ô nhập liệu được kiểm soát bởi state 'query' ưu tiên cao. Nó cho cảm giác tức thì. */} {/* 4. Danh sách được render bằng kết quả của cập nhật trì hoãn, ưu tiên thấp. */}
); } export default SearchPage;

Sự Thay Đổi trong Trải Nghiệm Người Dùng

Với thay đổi đơn giản này, trải nghiệm người dùng được biến đổi:

Ứng dụng bây giờ cảm thấy nhanh hơn và chuyên nghiệp hơn đáng kể.

`useDeferredValue` và `useTransition`: Khác Biệt Là Gì?

Đây là một trong những điểm gây nhầm lẫn phổ biến nhất cho các nhà phát triển học về concurrent React. Cả useDeferredValue và useTransition đều được sử dụng để đánh dấu các cập nhật là không khẩn cấp, nhưng chúng được áp dụng trong các tình huống khác nhau.

Sự khác biệt chính là: bạn có quyền kiểm soát ở đâu?

`useTransition`

Bạn sử dụng useTransition khi bạn có quyền kiểm soát mã nguồn kích hoạt việc cập nhật state. Nó cung cấp cho bạn một hàm, thường được gọi là startTransition, để bọc quanh việc cập nhật state của bạn.

const [isPending, startTransition] = useTransition(); function handleChange(e) { const nextValue = e.target.value; // Cập nhật phần khẩn cấp ngay lập tức setInputValue(nextValue); // Bọc cập nhật chậm trong startTransition startTransition(() => { setSearchQuery(nextValue); }); }

`useDeferredValue`

Bạn sử dụng useDeferredValue khi bạn không kiểm soát mã nguồn cập nhật giá trị. Điều này thường xảy ra khi giá trị đến từ props, từ một component cha, hoặc từ một hook khác được cung cấp bởi một thư viện bên thứ ba.

function SlowList({ valueFromParent }) { // Chúng ta không kiểm soát cách valueFromParent được thiết lập. // Chúng ta chỉ nhận nó và muốn trì hoãn việc render dựa trên nó. const deferredValue = useDeferredValue(valueFromParent); // ... sử dụng deferredValue để render phần chậm của component }

Tóm Tắt So Sánh

Tính năng `useTransition` `useDeferredValue`
Thứ được bọc Một hàm cập nhật state (ví dụ: startTransition(() => setState(...))) Một giá trị (ví dụ: useDeferredValue(myValue))
Điểm kiểm soát Khi bạn kiểm soát trình xử lý sự kiện hoặc trình kích hoạt cho việc cập nhật. Khi bạn nhận được một giá trị (ví dụ: từ props) và không có quyền kiểm soát nguồn của nó.
Trạng thái tải Cung cấp một biến boolean `isPending` tích hợp sẵn. Không có cờ tích hợp, nhưng có thể được suy ra bằng `const isStale = originalValue !== deferredValue;`.
Phép loại suy Bạn là người điều phối, quyết định đoàn tàu nào (cập nhật state) sẽ khởi hành trên đường ray chậm. Bạn là một quản lý nhà ga, thấy một giá trị đến bằng tàu và quyết định giữ nó tại ga một lát trước khi hiển thị nó trên bảng thông báo chính.

Các Trường Hợp Sử Dụng và Mẫu Nâng Cao

Ngoài việc lọc danh sách đơn giản, useDeferredValue mở ra một số mẫu mạnh mẽ để xây dựng các giao diện người dùng tinh vi.

Mẫu 1: Hiển Thị Giao Diện "Cũ" (Stale) để Phản Hồi

Một giao diện người dùng cập nhật với một độ trễ nhỏ mà không có bất kỳ phản hồi trực quan nào có thể tạo cảm giác lỗi cho người dùng. Họ có thể tự hỏi liệu đầu vào của họ có được ghi nhận hay không. Một mẫu tuyệt vời là cung cấp một dấu hiệu tinh tế cho thấy dữ liệu đang được cập nhật.

Bạn có thể đạt được điều này bằng cách so sánh giá trị ban đầu với giá trị trì hoãn. Nếu chúng khác nhau, điều đó có nghĩa là một lần render nền đang chờ xử lý.

function SearchPage() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); // Biến boolean này cho chúng ta biết nếu danh sách đang tụt lại phía sau ô nhập liệu const isStale = query !== deferredQuery; const filteredProducts = useMemo(() => { // ... lọc tốn kém sử dụng deferredQuery }, [deferredQuery]); return (

setQuery(e.target.value)} />
); }

Trong ví dụ này, ngay khi người dùng gõ, isStale trở thành true. Danh sách mờ đi một chút, cho thấy nó sắp được cập nhật. Khi lần render trì hoãn hoàn tất, query và deferredQuery lại bằng nhau, isStale trở thành false, và danh sách mờ trở lại độ mờ hoàn toàn với dữ liệu mới. Đây là cách tương đương với cờ isPending từ useTransition.

Mẫu 2: Trì Hoãn Cập Nhật trên Biểu Đồ và Trực Quan Hóa Dữ Liệu

Hãy tưởng tượng một biểu đồ trực quan hóa dữ liệu phức tạp, như bản đồ địa lý hoặc biểu đồ tài chính, render lại dựa trên một thanh trượt do người dùng kiểm soát cho một khoảng ngày. Việc kéo thanh trượt có thể cực kỳ giật nếu biểu đồ render lại trên mỗi pixel di chuyển.

Bằng cách trì hoãn giá trị của thanh trượt, bạn có thể đảm bảo tay cầm của thanh trượt vẫn mượt mà và phản hồi tốt, trong khi component biểu đồ nặng nề sẽ render lại một cách uyển chuyển ở chế độ nền.

function ChartDashboard() { const [year, setYear] = useState(2023); const deferredYear = useDeferredValue(year); // HeavyChart là một component đã được memo hóa thực hiện các tính toán tốn kém // Nó sẽ chỉ render lại khi giá trị deferredYear ổn định. const chartData = useMemo(() => computeChartData(deferredYear), [deferredYear]); return (

setYear(parseInt(e.target.value, 10))} /> Năm đã chọn: {year}
); }

Các Thực Hành Tốt Nhất và Cạm Bẫy Phổ Biến

Mặc dù mạnh mẽ, useDeferredValue nên được sử dụng một cách thận trọng. Dưới đây là một số thực hành tốt nhất cần tuân theo:

Tác Động đến Trải Nghiệm Người Dùng (UX) Toàn Cầu

Việc áp dụng các công cụ như useDeferredValue không chỉ là một tối ưu hóa kỹ thuật; đó là một cam kết cho một trải nghiệm người dùng tốt hơn, toàn diện hơn cho khán giả toàn cầu.

Kết Luận

Hook useDeferredValue của React là một sự thay đổi mô hình trong cách chúng ta tiếp cận tối ưu hóa hiệu suất. Thay vì dựa vào các kỹ thuật thủ công và thường phức tạp như debouncing và throttling, giờ đây chúng ta có thể khai báo cho React biết phần nào của giao diện người dùng của chúng ta ít quan trọng hơn, cho phép nó lên lịch công việc render một cách thông minh và thân thiện với người dùng hơn nhiều.

Bằng cách hiểu các nguyên tắc cốt lõi của concurrency, biết khi nào nên sử dụng useDeferredValue so với useTransition, và áp dụng các thực hành tốt nhất như memoization và phản hồi người dùng, bạn có thể loại bỏ tình trạng giật lag của giao diện người dùng và xây dựng các ứng dụng không chỉ hoạt động tốt mà còn thú vị khi sử dụng. Trong một thị trường toàn cầu cạnh tranh, việc cung cấp một trải nghiệm người dùng nhanh, phản hồi tốt và dễ tiếp cận là tính năng cuối cùng, và useDeferredValue là một trong những công cụ mạnh mẽ nhất trong kho vũ khí của bạn để đạt được điều đó.