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

პროდუქტიულობის ოპტიმიზაციის ჰუკი useDeferredValue, ისევე როგორც useTransition, ეხმარება გრაფიკული ინტერფეისის მუშაობის დაჩქარებას, მაგრამ ამას ოდნავ განსხვავებულად აკეთებს.

გადახედეთ წინა გაკვეთილს და ნახეთ, როგორ შემთხვევაში useTransition-თან ჩვენ ვახვევდით განახლების ფუნქციას setFilterTerm. მაშ, სტეიტის განახლების კოდი ყოველთვის შეიძლება ხელმისაწვდომი არ იყოს. ის შეიძლება იყოს დამალული, მაგალითად, ბიბლიოთეკაში, რომელიც თქვენ შეაერთეთ. ამ შემთხვევაში ჩვენ შეგვიძლია გამოვიყენოთ ჰუკი useDeferredValue. მაშინ ჩვენ გვჭირდება შევახვიოთ ან თავად სტეიტი, ან შედეგი, რომელიც გამოითვლება ამ სტეიტის გამოყენებით, ამით შევამციროთ მისი პრიორიტეტი.

მოდით გავაანალიზოთ შემდეგი კოდის ნაწილი ProductList შვილობილი კომპონენტის:

import {useDeferredValue} from 'react'

function ProductList({ products }) {
	const deferredProducts = useDeferredValue(products);
	
	return (
		<ul>
			{deferredProducts.map((product) => (
				<li>{product}</li>
			))}
		</ul>
	);
}

ყურადღება მიაქციეთ, რომ აქ ჩვენ შევახვიეთ useDeferredValue-ში თავად ცვლადი products, რომელიც ჩვენ ავიღეთ კომპონენტის პროფებიდან. შემდეგ ჩავწერეთ შედეგი deferredProducts-ში, რომელთანაც ვიმუშავებთ შემდგომ:

const deferredProducts = useDeferredValue(products);

ახლა, თუ მთავარი კომპონენტის კოდის ნაწილში, რომელსაც ჩვენ განვიხილეთ წინა გაკვეთილზე, ამოვიღებთ სტრიქონს:

const [isPending, startTransition] = useTransition();

და სტრიქონს isPending-ის გამოყენებასთან:

{isPending && <p>updating ...</p>}

და ასევე ავიღოთ სახვევი ფუნქციიდან setFilterTerm, მაშინ მივიღებთ იგივე შედეგს, როგორც წინა გაკვეთილზე:

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