Hook za optimizaciju performansi useDeferredValue u React-u

Hook za optimizaciju performansi useDeferredValue, baš kao i useTransition, pomaže da se ubrza rad grafičkog interfejsa, ali to čini na malo drugačiji način.

Pogledajte prethodnu lekciju i vidite kako smo u slučaju sa useTransition obavijali funkciju za ažuriranje setFilterTerm. E pa, kod za ažuriranje stanja (state-a) ne mora uvek biti dostupan. On može biti skriven, na primer, u biblioteci koju ste priključili. U ovom slučaju možemo iskoristiti hook useDeferredValue. Tada nam treba da obavijemo ili samo stanje, ili rezultat koji se izračunava pomoću tog stanja, time smanjujući njegov prioritet.

Hajde da analiziramo sledeći deo koda child komponente ProductList:

import {useDeferredValue} from 'react'

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

Obratite pažnju da smo ovde obavili u useDeferredValue samu varijablu products, koju smo uzeli iz prop-ova komponente. Zatim smo zapisali rezultat u deferredProducts, s kojom ćemo i raditi dalje:

const deferredProducts = useDeferredValue(products);

Sada, ako u delu koda glavnog komponenta, koji smo razmatrali u prošloj lekciji, uklonimo liniju:

const [isPending, startTransition] = useTransition();

I liniju sa korišćenjem isPending:

{isPending && <p>ažuriranje u toku ...</p>}

A takođe skinemo oblogu sa funkcije setFilterTerm, onda ćemo dobiti isti rezultat kao u prošloj lekciji:

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