Reactдаги useTransition ишчилик хукини оптимизациялаш

Ишчиликни оптимизациялаш хуки useTransition бизга график интерфейсини блокаламасдан стейтларни янгілаш имконияти беради.

Бу хук ёрдамида биз бирор стейтни янгилаш учун паст тартиб белгилашимиз mumkin, бу esa бошқа стейтларнинг янгиланиши юқори тартибга эга бўлишига ва кечиктирмасдан бажарилишига имкон беради.

Мисол тариқасида фойдаланувчи излов maydoniga белгилар киритганда товарларнинг тушум рўйхатини фильтралашни келтириш мумкин. Албатта, рўйхат ўзи бирор кечиктириш билан кўрсатилиши мумкин, лекин биз излов майдонига белгилар кечиктириш билан киритилишини истамаймиз.

Келинг, бугунги кунда useTransition хуки бизга қандай ёрдам бериши мумкинлигини кўрамиз. Фарз қилайлик, бизда асосий компонентнинг бир бурчаги мавжуд. Келинг уни таҳлил қилайлик:

import { useTransition } from 'react';
import { useState } from 'react';

function App() {
	const [isPending, startTransition] = useTransition();
	const [filterTerm, setFilterTerm] = useState('');
  
	const filteredProducts = filterProducts(filterTerm);
  
	function updateFilterHandler(event) {
		startTransition(() => {
			setFilterTerm(event.target.value);
		});
	}
 
	return (
		<div>
			<input type="text" onChange={updateFilterHandler} />
			<ProductList products={filteredProducts} />
		</div>
	);
}

Бу ерда биз useTransition учун икки та ўзгарувчини кўряпмиз. isPending ўзгарувчиси бул қийматни ўз ичига олади ва янгілаш жараёни тугаганини кўрсатади, startTransition эса янгилаш тартибини пасайтириш имконини беради:

const [isPending, startTransition] = useTransition();

Шунингдек, бизда filterTerm стейти мавжуд, у киритиш майдонига киритилаётган ифодани сақлайди ва уни ўрнатиш учун setFilterTerm функцияси мавжуд:

const [filterTerm, setFilterTerm] = useState('');

Киритиш майдонига белгилар киритилганда ҳар сафар updateFilterHandler функцияси чақирилади, у ерда filterTerm янгіланади. Айнан шу ерда биз useTransition хукини қўллаймиз, setFilterTerm функциясини startTransition ичига қуйидагича ўраймиз:

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

Шу тарзда, биз filterTerm стейтини янгилаш учун паст тартиб белгиладик ва бизнинг киритиш майдонимиз жавоб бера олади.

isPending ўзгарувчиси ёрдамида биз фойдаланувчига рўйхат янгіланиши ҳали жараёнда эканлигини кўрсатишимиз мумкин. Бу маълумотни рўйхат янгіланayotganda киритиш майдони ostida кўрсатамиз:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>янгіланяпти ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);