Хук оптимизације перформанси useTransition у React-у

Хук за оптимизацију перформанси useTransition нам омогућава да ажурирамо state-ове без блокирања графичког интерфејса.

Помоћу овог хука можемо подесити да ажурирање неког state-а има низак приоритет, што ће дозволити да ажурирања других state-ова имају висок приоритет и извршавају се без одлагања.

Као пример можемо навести филтрирање падајућег списка производа при уносу симбола од стране корисника у поље претраге. Наравно, сам списак може да се приказује са одређеним закашњењем, али не бисмо желели да се симболи уносе у поље претраге са закашњењем.

Хајде да погледамо како нам у таквим случајевима може помоћи хук 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();

Такође имамо state filterTerm, у коме се чува израз који се уноси у поље за унос и функцију setFilterTerm за његово постављање:

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

При уносу симбола у input код нас сваки пут позива функција updateFilterHandler, у којој се дешава ажурирање filterTerm. Управо овде примењујемо наш хук useTransition, обавијајући функцију постављања setFilterTerm у startTransition на следећи начин:

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

На тај начин смо поставили за ажурирање state-а filterTerm низак приоритет и наше поље за унос ће остати респонзивно.

Помоћу променљиве isPending можемо показати кориснику да је ажурирање списка још у току. Приказаћемо ту информацију испод поља за унос, док се списак ажурира:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>ажурирање у току ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);