React-ის პროდუქტიულობის ოპტიმიზაციის ჰუკი useTransition

პროდუქტიულობის ოპტიმიზაციის ჰუკი useTransition საშუალებას გვაძლევს განვაახლოთ state-ები GUI-ს დაბლოკვის გარეშე.

ამ ჰუკის საშუალებით ჩვენ შეგვიძლია რაიმე 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('');

სიმბოლოების ინპუტში შეყვანისას ჩვენს ყოველ ჯერზე იძახება ფუნქცია 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>updating ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);