javascript / intermediate
Snippet
Blockierungsfreie UI mit useTransition
useTransition ermöglicht es, Zustandsaktualisierungen als nicht-blockierende 'Übergänge' zu markieren. Dies stellt sicher, dass dringende Updates (wie das Tippen) reaktionsschnell bleiben, während langsamere Updates im Hintergrund ablaufen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { useState, useTransition } from 'react';export function FilterableList({ items }) {const [isPending, startTransition] = useTransition();const [filter, setFilter] = useState('');const handleChange = (e) => {const val = e.target.value;setFilter(val); // High priority updatestartTransition(() => {// Lower priority update// Expensive filtering logic here});};return <input type="text" onChange={handleChange} />;}
nextjs
Erklärung
1
const [isPending, startTransition] = useTransition();
Gibt einen Status ('isPending') und eine Funktion zum Starten des Übergangs zurück.
2
startTransition(() => { ... });
Umschließt das Update mit niedriger Priorität, um UI-Blockaden zu vermeiden.
3
isPending
Kann verwendet werden, um während des Übergangs eine Ladeanzeige anzuzeigen.