javascript / intermediate
Snippet
Nicht-blockierende Updates mit useTransition
Der useTransition-Hook ermöglicht es, State-Updates als 'Transitions' zu markieren. Diese Updates werden mit niedriger Priorität behandelt und blockieren die UI nicht, wodurch die Anwendung auch bei rechenintensiven Rendering-Aufgaben reaktionsfähig bleibt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function TabContainer() {const [isPending, startTransition] = useTransition();const [tab, setTab] = useState('about');function selectTab(nextTab) {startTransition(() => {setTab(nextTab);});}return (<><TabButton isActive={tab === 'about'} onClick={() => selectTab('about')}>About</TabButton>{isPending && <p>Loading heavy tab...</p>}{tab === 'about' && <AboutTab />}</>);}
react
Erklärung
1
const [isPending, startTransition] = useTransition();
Initialisiert den Hook; isPending zeigt an, ob gerade eine Transition läuft.
2
startTransition(() => { setTab(nextTab); });
Umschließt das State-Update, um React zu signalisieren, dass es unterbrochen werden kann, wenn ein Update mit höherer Priorität auftritt.