React'ta Performans Optimizasyon Kancası useTransition

Performans optimizasyon kancası useTransition, kullanıcı arayüzünü bloke etmeden state'leri güncellememize izin verir.

Bu kancayı kullanarak, bir state'in güncellemesine düşük öncelik verebiliriz, bu da diğer state güncellemelerinin yüksek önceliğe sahip olmasını ve gecikme olmadan gerçekleşmesini sağlar.

Bir örnek olarak, kullanıcı arama alanına karakterler girdiğinde bir ürün açılır listesinin filtrelenmesi verilebilir. Elbette, listenin kendisi bir gecikmeyle görüntülenebilir, ancak arama alanına karakterlerin gecikmeli girilmesini istemeyiz.

Bu gibi durumlarda useTransition kancasının bize nasıl yardımcı olabileceğine bakalım. Ana bileşenimize ait bir kod parçası olduğunu varsayalım. Hadi analiz edelim:

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

Burada useTransition için iki değişken görüyoruz. isPending değişkeni bir boolean değer tutar ve güncelleme işleminin bitip bitmediğini gösterir, startTransition ise güncelleme önceliğini düşürmeye izin veren fonksiyondur:

const [isPending, startTransition] = useTransition();

Ayrıca, arama alanına girilen ifadenin tutulduğu filterTerm state'i ve onu ayarlamak için setFilterTerm fonksiyonumuz var:

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

Arama girişine karakterler yazıldığında, updateFilterHandler fonksiyonu her seferinde çağrılır ve içinde filterTerm güncellenir. useTransition kancamızı tam burada uyguluyoruz, setFilterTerm kurulum fonksiyonunu startTransition içine şu şekilde sararak:

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

Böylece, filterTerm state'inin güncellenmesi için düşük öncelik belirlemiş olduk ve arama girişimiz duyarlı kalacak.

isPending değişkenini kullanarak, kullanıcıya liste güncellemesinin devam ettiğini gösterebiliriz. Liste güncellenirken bu bilgiyi arama girişinin altında gösterelim:

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