Хук аптымізацыі прадукцыйнасці useTransition у React

Хук аптымізацыі прадукцыйнасці useTransition дазваляе нам абнаўляць стэйты без блакіроўкі графічнага інтэрфейсу.

З дапамогай гэтага хуку мы можам задаць абнаўленню якога-небудзь стэйта нізкі прыярытэт, што дазволіць абнаўленню іншых стэйтаў мець высокі прыярытэт і выконвацца без затрымак.

У якасці прыкладу можна прывесці фільтрацыю выпадаючага спісу тавараў пры ўводзе карыстальнікам сімвалаў у поле пошуку. Вядома, сам спіс можа адлюстроўвацца з нейкай затрымкай, але нам бы не хацелася, каб сімвалы ўводзіліся ў поле пошуку з затрымкай.

Давайце паглядзім, як у такіх выпадках нам можа дапамагчы хук 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 мы можам паказаць карыстальніку, што абнаўленне спісу яшчэ ў працэсе. Вывядзем гэтую інфармацыю пад полем уводу, пакуль спіс абнаўляецца:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>updating ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);