Q309: What is the useTransition hook and how does it differ from useDeferredValue? - React & Modern Frontend (445 Qs)

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

jsx

import { useState, useTransition } from 'react';

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

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

return (
  <div>
    <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 />}
  </div>
);
}

Differences from useDeferredValue

Feature	useTransition	useDeferredValue
Controls	State updates (wraps `setState`)	Values (wraps a value)
Use case	When you control the state update	When you receive a value from props or other hooks
Returns	`[isPending, startTransition]`	Deferred value
Pending state	Built-in `isPending` flag	Manual comparison needed