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 (
         <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 |