What is the useTransition hook and how does it differ from useDeferredValue?

The useTransition hook allows you to mark certain state updates as non-urgent transitions, keeping the UI responsive during expensive re-renders. It returns a isPending flag and a startTransition function.

Syntax

const [isPending, startTransition] = useTransition();

Example: Tab Switching

import { useState, useTransition } from 'react';

function TabContainer() {
const [isPending, startTransition] = useTransition();
const [tab, setTab] = useState('home');

function selectTab(nextTab) {
startTransition(() => {
setTab(nextTab);
});
}

return (
<button onClick={() => selectTab('home')}>Home</button>
<button onClick={() => selectTab('posts')}>Posts (slow)</button>
<button onClick={() => selectTab('contact')}>Contact</button>

{isPending && <Spinner />}

{tab === 'home' && <HomeTab />}
{tab === 'posts' && <PostsTab />}  {/* Expensive component */}
{tab === 'contact' && <ContactTab />}
);
}

Differences from useDeferredValue