useTransition in React
From the React Design Patterns cheat sheet · Concurrent Rendering · verified Jul 2026
useTransition
Mark state updates as non-urgent transitions to keep the UI responsive
jsx
const [isPending, startTransition] = useTransition();
function handleClick() {
startTransition(() => {
setTab('posts'); // non-urgent update
});
}
return (
<div>
{isPending && <Spinner />}
<Content tab={tab} />
</div>
);💡 useTransition tells React "this update is not urgent - keep the UI responsive"
⚡ Use it for tab switches, search filtering, and any heavy re-render triggered by user input
📌 React 19 supports async functions inside startTransition - perfect for form submissions
🟢 isPending lets you show subtle loading hints without blocking the click feedback
useTransitionconcurrentpending
Continue with React Design Patterns
Save the full cheat sheet or work through every related task.