javascript / expert
Snippet
Concurrent Rendering mit useTransition
Der useTransition-Hook ermöglicht es, Zustandsaktualisierungen als nicht dringende Übergänge zu markieren. Dies verhindert, dass schwere Berechnungen den Haupt-Thread blockieren, und hält die UI während komplexer Re-Renders reaktionsfähig.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function SearchComponent() {const [isPending, startTransition] = useTransition();const [query, setQuery] = useState('');const [results, setResults] = useState([]);const handleChange = (e) => {setQuery(e.target.value);startTransition(() => {const filtered = largeDataset.filter(item => item.includes(e.target.value));setResults(filtered);});};return (<div style={{ opacity: isPending ? 0.5 : 1 }}><input type="text" onChange={handleChange} />{isPending && <p>Updating list...</p>}<ul>{results.map(r => <li key={r}>{r}</li>)}</ul></div>);}
react
Erklärung
1
const [isPending, startTransition] = useTransition();
Extrahiert das 'pending'-Flag und die Funktion zum Starten des Übergangs.
2
startTransition(() => { ... });
Umschließt die schwere Zustandsaktualisierung, um sie als weniger prioritär zu markieren.