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

Hook tối ưu hiệu suất useDeferredValue, cũng giống như useTransition, giúp tăng tốc giao diện đồ họa, nhưng thực hiện điều đó theo cách hơi khác một chút.

Hãy xem lại bài học trước và xem, trong trường hợp với useTransition chúng ta đã bọc hàm cập nhật setFilterTerm như thế nào. Vâng, đoạn mã cập nhật state không phải lúc nào cũng có thể truy cập được. Nó có thể bị ẩn, ví dụ, trong một thư viện mà bạn đã kết nối. Trong trường hợp này, chúng ta có thể sử dụng hook useDeferredValue. Khi đó chúng ta cần bọc chính state đó, hoặc kết quả được tính toán bằng state đó, từ đó giảm mức độ ưu tiên của nó.

Hãy phân tích đoạn mã sau của component con ProductList:

import {useDeferredValue} from 'react'

function ProductList({ products }) {
	const deferredProducts = useDeferredValue(products);
	
	return (
		<ul>
			{deferredProducts.map((product) => (
				<li>{product}</li>
			))}
		</ul>
	);
}

Lưu ý rằng ở đây chúng ta đã bọc trong useDeferredValue chính biến products, mà chúng ta lấy từ props của component. Sau đó chúng ta ghi kết quả vào deferredProducts, và sẽ làm việc với nó sau này:

const deferredProducts = useDeferredValue(products);

Bây giờ, nếu trong đoạn mã của component chính, mà chúng ta đã xem xét ở bài học trước, bỏ đi dòng:

const [isPending, startTransition] = useTransition();

Và dòng sử dụng isPending:

{isPending && <p>updating ...</p>}

Đồng thời bỏ wrapper khỏi hàm setFilterTerm, thì chúng ta sẽ nhận được kết quả tương tự như bài học trước:

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