Hook Optimisasi Performa useTransition di React

Hook optimisasi performa useTransition memungkinkan kita untuk memperbarui state tanpa memblokir antarmuka pengguna.

Dengan hook ini, kita dapat memberikan prioritas rendah untuk pembaruan suatu state, yang memungkinkan pembaruan state lainnya memiliki prioritas tinggi dan dieksekusi tanpa penundaan.

Sebagai contoh adalah penyaringan daftar produk dropdown saat pengguna memasukkan karakter ke dalam bidang pencarian. Tentu, daftar itu sendiri dapat ditampilkan dengan beberapa penundaan, tetapi kita tidak ingin karakter dimasukkan ke dalam bidang pencarian dengan penundaan.

Mari kita lihat bagaimana dalam kasus seperti ini hook useTransition dapat membantu kita. Anggaplah, kita memiliki potongan kode dari komponen utama. Mari kita analisis:

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>
	);
}

Di sini kita melihat dua variabel untuk useTransition. Variabel isPending berisi nilai boolean dan menunjukkan apakah proses pembaruan telah selesai, sedangkan startTransition adalah fungsi yang memungkinkan untuk menurunkan prioritas pembaruan:

const [isPending, startTransition] = useTransition();

Kita juga memiliki state filterTerm, yang menyimpan ekspresi yang dimasukkan ke dalam bidang input dan fungsi setFilterTerm untuk mengaturnya:

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

Saat karakter dimasukkan ke dalam input, fungsi updateFilterHandler dipanggil setiap waktu, di mana pembaruan filterTerm terjadi. Di sinilah kita menerapkan hook useTransition kita, dengan membungkus fungsi pengaturan setFilterTerm ke dalam startTransition sebagai berikut:

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

Dengan demikian, kita telah menetapkan prioritas rendah untuk pembaruan state filterTerm dan bidang input kita akan tetap responsif.

Dengan menggunakan variabel isPending, kita dapat menunjukkan kepada pengguna bahwa pembaruan daftar masih dalam proses. Mari tampilkan informasi ini di bawah bidang input, selagi daftar sedang diperbarui:

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