Хукот за оптимизација на перформансите 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>
);