React'ta Performans Optimizasyon Kancası useDeferredValue

Performans optimizasyon kancası useDeferredValue, tıpkı useTransition gibi, grafik arayüzün çalışmasını hızlandırmaya yardımcı olur, ancak bunu biraz farklı şekilde yapar.

Önceki dersi gözden geçirin ve useTransition kullanıldığı durumda, setFilterTerm güncelleme fonksiyonunu nasıl sarmladığımıza bakın. İşte, state güncelleme kodu her zaman erişilebilir olmayabilir. Örneğin, bağladığınız bir kütüphanenin içinde gizli olabilir. Bu durumda useDeferredValue kancasından yararlanabiliriz. O zaman ya state'in kendisini ya da bu state kullanılarak hesaplanan sonucu sarmamız, böylece onun önceliğini düşürmemiz gerekir.

ProductList alt bileşeninin şu kod parçasını analiz edelim:

import {useDeferredValue} from 'react'

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

Dikkat edin, burada bileşenin props'undan aldığımız products değişkeninin kendisini useDeferredValue ile sardık. Daha sonra sonucu deferredProducts içine yazdık ve ilerleyen kısımda onunla çalışacağız:

const deferredProducts = useDeferredValue(products);

Şimdi, önceki derste incelediğimiz ana bileşenin kod parçasındaki şu satırı kaldırırsak:

const [isPending, startTransition] = useTransition();

Ve isPending kullanımı olan şu satırı:

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

Ayrıca setFilterTerm fonksiyonunun etrafındaki sarmalayıcıyı kaldırırsak, önceki derstekiyle aynı sonucu elde ederiz:

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