Hook Optimisasi Performa useDeferredValue di React

Hook optimisasi performa useDeferredValue, sama seperti useTransition, membantu mempercepat kerja antarmuka grafis, tetapi melakukannya dengan cara yang sedikit berbeda.

Lihatlah pelajaran sebelumnya dan perhatikan bagaimana dalam kasus useTransition kita membungkus fungsi pembaruan setFilterTerm. Jadi, kode pembaruan state tidak selalu dapat diakses. Kode itu mungkin tersembunyi, misalnya, di dalam library yang Anda sambungkan. Dalam hal ini, kita dapat menggunakan hook useDeferredValue. Kemudian kita perlu membungkus state itu sendiri atau hasil yang dihitung menggunakan state tersebut, sehingga menurunkan prioritasnya.

Mari kita analisis cuplikan kode berikut dari komponen anak ProductList:

import {useDeferredValue} from 'react'

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

Perhatikan bahwa di sini kita membungkus variable products itu sendiri dengan useDeferredValue, yang kita ambil dari props komponen. Kemudian kita menuliskan hasilnya ke dalam deferredProducts, yang akan kita gunakan selanjutnya:

const deferredProducts = useDeferredValue(products);

Sekarang, jika dalam cuplikan kode komponen utama, yang kita bahas pada pelajaran sebelumnya, kita hapus baris:

const [isPending, startTransition] = useTransition();

Dan baris yang menggunakan isPending:

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

Serta melepas pembungkus dari fungsi setFilterTerm, maka kita akan mendapatkan hasil yang sama seperti pada pelajaran sebelumnya:

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