React-da Performans Optimizasiyasi useTransition Hook-u

Performans optimizasiyasi hook-u useTransition bizə qrafik interfeysi bloklamadan state-leri yenilemeye imkan verir.

Bu hook vasitesile her hansi bir state-in yenilenmesine asagi prioritet teyin ede bilerik, bu da diger state-lerin yenilenmesinin yuksek prioritete malik olmasina ve gecikme olmadan yerine yetirilmesine imkan verir.

Numune olaraq, istifadeci axtaris sahesine simvol daxil etdikde mehsul acilir siyahisinin filtrlenmesini gostermek olar. Elbette, siyahinin ozu bazi gecikmelerle gosterile biler, amma biz axtaris sahesine simvolların gecikmelerle daxil edilmesini istemezdik.

Gelin bele hallarda useTransition hook-unun bize necə komek ede bileceyine baxaq. Ferez edek ki, bizim esas komponentin bir hissesi var. Gelin onu analiz edek:

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>
	);
}

Burada biz useTransition ucun iki deyishen gorerik. isPending deyisheni bool qimmet saxlayir ve yenileme prosesinin bitib-bitmediyini gosterir, startTransition ise yenileme prioritetini asaltmağa imkan veren funksiyadir:

const [isPending, startTransition] = useTransition();

Ayrica bizim filterTerm state-imiz var, hansi ki, axtaris sahesine daxil edilen ifadeni saxlayir ve onu teyin etmek ucun setFilterTerm funksiyasi var:

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

Inputa simvol daxil edildikde her defe updateFilterHandler funksiyasi cagrilir, hansi ki, filterTerm-in yenilenmesini heyata keçirir. Mehz burada biz useTransition hook-unu tetbiq edirik, setFilterTerm teyin funksiyasını startTransition icine bu formada sarıyıriq:

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

Beləlikle, biz filterTerm state-inin yenilenmesi ucun asagi prioritet teyin etdik ve axtaris sahesimiz reaksiya vermeye davam edir.

isPending deyisheni vasitesile biz istifadeciye siyahi yenilenmesinin hele de davam etdiyini gostere bilerik. Siyahi yenilenirken bu melumati axtaris sahesinin altinda cekerek:

return (
	<div>
		<input type="text" onChange={updateFilterHandler} />
		{isPending && <p>yenilenir ...</p>}
		<ProductList products={filteredProducts} />
	</div>
);