Хук за оптимизация на производителността 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>актуализиране ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);