React-daky useDeferredValue ýagdaylyk guraly

Ýagdaylyk guraly useDeferredValue, şonuň ýaly useTransition, grafik interfeşiniň işleşini çaltlaşdyrýar, ýöne muny azajyk başgaca ýola goýýar.

Öňki sapaga serez ýüz tutuň we useTransition ulanylanda setFilterTerm ýagdayyny üýtgetmek funksiýasyny nädip gapdaladygymyzy göriň. Şeýlelik bilen, ýagdayy üýtgetmek kody elýeterli bolup bilmeýär. Mysal üçin, goşan kitaphanalaryňyzda gizlenip bilner. Bu ýagdaýda biz useDeferredValue ýagdaylyk guralyndan peýdalanyp bileris. Onda biz ýagdayyň özüni ýa-da şol ýagday arkaly hasaplanýan netijäni gapdalamaly, şeýlelik bilen onuň priortetini peseltmeli.

Geliň, ProductList çaga komponentiniň aşakdaky kod bölegini analiz edeliň:

import {useDeferredValue} from 'react'

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

Üns beriň, bu ýerde biz useDeferredValue bilen komponentiň alnan maglumatlaryndan alynan products üýtgeýjisiniň özüni gapdaladyk. Soňra netijäni deferredProducts-a ýazdyk, we indi şol bilen işläris:

const deferredProducts = useDeferredValue(products);

Indi, öňki sapakda seredýän esasy komponentimiziň kod böleginden setiri aýyrsak:

const [isPending, startTransition] = useTransition();

We isPending ulanylan setiri aýyrsak:

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

Şeýle hem setFilterTerm funksiýasynyň gapdalgysyny aýyrsak, öňki sapakdaky netijäni aýdyň alarys:

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