Hook tối ưu hiệu suất useTransition trong React

Hook tối ưu hiệu suất useTransition cho phép chúng ta cập nhật state mà không chặn giao diện người dùng.

Với hook này, chúng ta có thể đặt mức độ ưu tiên thấp cho việc cập nhật một state nào đó, cho phép việc cập nhật các state khác có độ ưu tiên cao và thực hiện mà không bị trì hoãn.

Một ví dụ có thể là việc lọc danh sách sản phẩm thả xuống khi người dùng nhập ký tự vào trường tìm kiếm. Tất nhiên, bản thân danh sách có thể hiển thị với một độ trễ nào đó, nhưng chúng ta không muốn các ký tự được nhập vào trường tìm kiếm với độ trễ.

Hãy xem, trong những trường hợp như vậy hook useTransition có thể giúp chúng ta như thế nào. Giả sử, chúng ta có một đoạn mã của component chính. Hãy phân tích nó:

import { useTransition } from 'react';
import { useState } from 'react';

function App() {
	const [isPending, startTransition] = useTransition();
	const [filterTerm, setFilterTerm] = useState('');
  
	const filteredProducts = filterProducts(filterTerm);
  
	function updateFilterHandler(event) {
		startTransition(() => {
			setFilterTerm(event.target.value);
		});
	}
 
	return (
		<div>
			<input type="text" onChange={updateFilterHandler} />
			<ProductList products={filteredProducts} />
		</div>
	);
}

Ở đây chúng ta thấy hai biến cho useTransition. Biến isPending chứa giá trị boolean và cho biết quá trình cập nhật đã kết thúc chưa, còn startTransition là một hàm cho phép giảm mức độ ưu tiên của việc cập nhật:

const [isPending, startTransition] = useTransition();

Chúng ta cũng có state filterTerm, nơi lưu trữ biểu thức được nhập vào trường nhập liệu và hàm setFilterTerm để thiết lập nó:

const [filterTerm, setFilterTerm] = useState('');

Khi nhập ký tự vào input, hàm updateFilterHandler được gọi mỗi lần, trong đó việc cập nhật filterTerm diễn ra. Chính tại đây chúng ta áp dụng hook useTransition của mình, bằng cách bao bọc hàm thiết lập setFilterTerm trong startTransition như sau:

function updateFilterHandler(event) {
	startTransition(() => {
		setFilterTerm(event.target.value);
	});
}

Bằng cách này, chúng ta đã đặt mức độ ưu tiên thấp cho việc cập nhật state filterTerm và trường nhập liệu của chúng ta vẫn sẽ phản hồi nhanh.

Thông qua biến isPending, chúng ta có thể hiển thị cho người dùng thấy rằng việc cập nhật danh sách vẫn đang diễn ra. Hãy xuất thông tin này bên dưới trường nhập liệu, trong khi danh sách đang được cập nhật:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>updating ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);