javascript / intermediate
Snippet
Interruptible Updates with useTransition
The useTransition hook allows you to mark a state update as a 'transition', which React treats as low priority. If a user performs a more urgent action (like clicking another link) while the transition is processing, React will interrupt the old render and start the new one.
snippet.js
javascript
1
2
3
4
5
6
7
const [isPending, startTransition] = useTransition();const selectTab = (id) => {startTransition(() => {setActiveTab(id);});};
react
Breakdown
1
const [isPending, startTransition] = useTransition();
Provides a pending flag to show loading states and a function to wrap non-urgent updates.
2
startTransition(() => { setActiveTab(id); });
Tells React that switching tabs can take a back seat to more immediate interactions.