React Hooks
Transition Hookok
useTransition és useDeferredValue – nem blokkoló UI frissítések.
Transition Hookok
Ezek a hookok segítenek elkülöníteni az azonnali (sürgős) UI frissítéseket a nem sürgős (lassabb) frissítésektől, hogy az UI folyamatosan reagáljon.
useTransition
Mire való?
Egy state frissítést "nem blokkoló"-nak jelöl – a React más frissítések után, alacsonyabb prioritással végzi el.
Mikor használjuk?
- Lassú renderelés esetén (pl. nagy lista szűrése): amíg a lista frissül, az input azonnal reagál.
- Tab váltások, oldalak közötti navigáció animálásánál.
import { useState, useTransition } from 'react';
function SearchPage() {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
const [isPending, startTransition] = useTransition();
function handleSearch(e) {
setQuery(e.target.value); // Azonnali – input frissül rögtön
startTransition(() => {
// Nem sürgős – a nehéz számítás alacsonyabb prioritású
setResults(filterBigList(e.target.value));
});
}
return (
<div>
<input value={query} onChange={handleSearch} />
{isPending && <p>Töltés...</p>}
<ResultList results={results} />
</div>
);
}useDeferredValue
Mire való?
Egy érték frissítését "késlelteti" – a UI a régi értékkel dolgozik, amíg az új érték frissítése folyamatban van.
Mikor használjuk?
- Ha nem te irányítod a state frissítést (pl. props-ból jön az érték), de a renderelést szeretnéd késleltetni.
- Keresés közbeni lista lassú újrarenderelésének kezelésére.
import { useDeferredValue } from 'react';
function ProductList({ searchTerm }) {
// A deferredTerm "le van maradva" a valós searchTerm mögött
// A lista a régi értékkel renderel, amíg az új frissül
const deferredTerm = useDeferredValue(searchTerm);
const filtered = filterProducts(deferredTerm); // a lassú számítás
return <ul>{filtered.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}💡 useTransition vs useDeferredValue:
useTransition: te irányítod a state frissítést (sajátsetState).useDeferredValue: props-ból jövő értéket késleltetsz.