Reactдаги useDeferredValue ишчанликни оптималлаштириш хуки

Ишчанликни оптималлаштириш хуки useDeferredValue, useTransition каби, график интерфейс ишлашини тезлатта ёрдам беради, лекин буни бироз бошқча қилиб бажаради.

Ўтган дарс га назар солиб кўринг ва useTransition да setFilterTerm янгилаш функциясини қандай ўраб қўйганимизга эътибор беринг. Демак, стейтни янгилаш коди ҳар доим дастурда бўлавермайди. У, масалан, сиз улантирган кутубхона ичида бекитиб қўйилган бўлиши мумкин. Бундай ҳолда биз useDeferredValue хукидан фойдаланишимиз мумкин. Унда биз стейтнинг ўзини ёки у стейт ёрдамида ҳисобланадиган натижани ўраб қўйишимиз керак, шу тарзда унинг имтиёзли даражасини пасайтириб.

Келгила, ProductList бола компонентнинг куйидаги код боғлагини таҳлил қилайлик:

import {useDeferredValue} from 'react'

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

Эътиборингизни қаратинг, бу ерда биз useDeferredValue ичида компонент пропларидан олган products ўзгарувчисини ўраб қўйдик. Сўнгра биз натижани deferredProducts га ёздик, ва клюнги ишларни шу билан олиб борамиз:

const deferredProducts = useDeferredValue(products);

Энди, агар биз ўтган дарсда кўриб ўтган бош компонент код бўлагидаги қаторни олиб ташласак:

const [isPending, startTransition] = useTransition();

Ва isPending ишлатилган қаторни:

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

Шунингдек, setFilterTerm функциясидан ўрамани олиб ташласак, биз ўтган дарсдаги каби натижага эга бўламиз:

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