A useDeferredValue teljesítményoptimalizáló hook a React-ban

A useDeferredValue teljesítményoptimalizáló hook, éppúgy mint a useTransition, segít felgyorsítani a felhasználói felület működését, de ezt egy kicsit másképp teszi.

Vessen egy pillantást az előző leckére és nézze meg, hogy a useTransition esetében hogyan csomagoltuk be a setFilterTerm frissítő függvényt. Nos, az állapotfrissítő kód nem mindig lehet elérhető. Elrejtve lehet például egy olyan könyvtárban, amelyet csatlakoztatott. Ebben az esetben használhatjuk a useDeferredValue hookot. Ekkor magát az állapotot, vagy az azzal kiszámolt eredményt kell becsomagolnunk, ezzel csökkentve annak prioritását.

Elemezzük a következő kódrészletet a ProductList gyermek komponensből:

import {useDeferredValue} from 'react'

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

Figyeljük meg, hogy itt magát a products változót csomagoltuk be a useDeferredValue-ba, amelyet a komponens props-ából vettünk. Az eredményt eltároltuk a deferredProducts-ban, amellyel ezután dolgozni fogunk:

const deferredProducts = useDeferredValue(products);

Most, ha a fő komponens azon kódrészletében, amelyet az előző leckén vizsgáltunk, eltávolítjuk a következő sort:

const [isPending, startTransition] = useTransition();

És a isPending használatával kapcsolatos sort:

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

Valamint eltávolítjuk a setFilterTerm függvény körüli csomagolást, akkor ugyanazt az eredményt kapjuk, mint az előző leckén:

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