React-da Performans Optimallashdirmə Hook-u useDeferredValue

Performans optimallashdirmə hook-u useDeferredValue, eynilə useTransition kimi, qrafik interfeysin işini sürətləndirməyə kömək edir, amma bunu biraz fərqli şəkildə edir.

Keçən dərsə nəzər yetirin və useTransition istifadə edərkən setFilterTerm yeniləmə funksiyasını necə əhatə etdiyimizə baxın. Beləliklə, state yeniləmə kodu həmişə əlçatan olmaya bilər. O, məsələn, qoşduğunuz kitabxananın içərisində gizlənmiş ola bilər. Bu halda biz useDeferredValue hook-undan istifadə edə bilərik. O zaman biz ya state-in özünü, ya da həmin state vasitəsilə hesablanan nəticəni əhatə etməli oluruq, beləliklə onun prioritetini aşağı salırıq.

Gəlin ProductList uşaq komponentinin aşağıdakı kod parçasını təhlil edək:

import {useDeferredValue} from 'react'

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

Diqqət yetirin ki, burada biz komponentin props-larından götürdüyümüz products dəyişəninin özünü useDeferredValue ilə əhatə etdik. Sonra nəticəni deferredProducts-ə yazdıq və bundan sonra onunla işləyəcəyik:

const deferredProducts = useDeferredValue(products);

İndi, əvvəlki dərsdə baxdığımız əsas komponentin kod parçasından aşağıdakı sətri silək:

const [isPending, startTransition] = useTransition();

Və isPending istifadə edən sətri:

{isPending && <p>yenilənir ...</p>}

Həmçinin setFilterTerm funksiyasından əhatəni aradan qaldırsaq, əvvəlki dərsdəki ilə eyni nəticəni alarıq:

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