Hook Pengoptimuman Prestasi useDeferredValue dalam React

Hook pengoptimuman prestasi useDeferredValue, sama seperti useTransition, membantu mempercepat kerja antara muka grafik, tetapi melakukannya dengan cara yang sedikit berbeza.

Lihatlah pelajaran sebelumnya dan perhatikan bagaimana dalam kes useTransition kita membungkus fungsi kemas kini setFilterTerm. Jadi, kod kemas kini state mungkin tidak selalu boleh diakses. Ia mungkin tersembunyi, contohnya, dalam pustaka yang anda sambungkan. Dalam kes ini, kita boleh menggunakan hook useDeferredValue. Kemudian kita perlu membungkus sama ada state itu sendiri, atau hasil, yang dikira menggunakan state tersebut, dengan itu mengurangkan keutamaan nya.

Mari kita analisis coretan kod komponen anak ProductList berikut:

import {useDeferredValue} from 'react'

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

Perhatikan bahawa di sini kita membungkus dalam useDeferredValue pembolehubah products itu sendiri, yang kita ambil dari props komponen. Kemudian kita merekodkan hasilnya dalam deferredProducts, yang akan kita gunakan seterusnya:

const deferredProducts = useDeferredValue(products);

Sekarang, jika dalam coretan kod komponen utama, yang kita lihat pada pelajaran sebelumnya, kita buang baris:

const [isPending, startTransition] = useTransition();

Dan baris dengan penggunaan isPending:

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

Serta tanggung bungkusan dari fungsi setFilterTerm, maka kita akan mendapat hasil yang sama seperti dalam pelajaran sebelumnya:

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