In React, what does calling useTransition() give you, and what does the isPending value it returns tell you?

## The signature `useTransition` is a built-in React hook that takes no arguments and returns an array of exactly two things: ```js import { useTransition } from 'react'; function TabBar() { const [isPending, startTransition] = useTransition(); // isPending: boolean // startTransition: (scope: () => void) => void } ``` Like every hook, it must be called at the top level of a component or of another hook. The array is destructured by position, so the names are yours to choose, but `[isPending, startTransition]` is the universal convention. ## What startTransition actually marks `startTransition` takes a callback, usually called the *scope* function, and calls it immediately and synchronously. It does not delay anything, it does not debounce, and it does not make your code asynchronous. What it does is tag every state update triggered while that callback runs as a **Transition** — React's label for "this update is not urgent". ```js function handleSelect(nextTab) { startTransition(() => { setTab(nextTab); // marked as a Transition }); } ``` A normal update, such as one made straight from a click or keypress handler, is urgent: React wants it on screen as fast as possible. A Transition tells React the opposite — the resulting render may take a while, and if something urgent arrives in the meantime, that urgent work should be served first. The user keeps interacting with the currently displayed UI while the transition's render proceeds. Because the marking depends on the update being triggered *during* the synchronous scope, an update scheduled later escapes it. This does not mark anything: ```js startTransition(() => { setTimeout(() => setTab(nextTab), 0); // urgent, not a Transition }); ``` ## What isPending is for `isPending` is a boolean piece of state the hook maintains. It becomes `true` as soon as a transition started from *this* hook instance is in flight, and returns to `false` when React commits the resulting UI. Reading it re-renders your component when it flips, which is exactly what you want for feedback: ```js <button onClick={() => startTransition(() => setTab('posts'))} disabled={isPending}> Posts </button> {isPending && <Spinner />} ``` The important property is that the *old* UI is still on screen while `isPending` is `true`. That is the difference from a plain loading flag around a blank area: nothing was torn down, so you can style the stale content as inactive rather than replacing it with a placeholder. If you do not need that flag, React also exports a standalone `startTransition` function that marks updates the same way but gives you no pending state. ## React 19: async scopes In React 19 the scope function may be `async`. React keeps `isPending` `true` from the start of the async function until the final state update it makes has been committed, which is what lets a submit handler show pending state for the whole request rather than only for the render: ```js startTransition(async () => { await saveName(name); setSaved(true); }); ``` Functions used this way are what React 19 calls **Actions**, and the form-oriented hooks build on the same idea. ## Common mistakes Candidates often describe `startTransition` as "making the update async" or "debouncing it". Neither is true: no time is inserted, and the update is never dropped for being late — it is only allowed to yield to more urgent work. Another frequent error is expecting `useTransition` to take the setter or the value as an argument; it takes nothing. Finally, `isPending` belongs to the hook call that started the transition, so a component that only imports the standalone `startTransition` has no pending flag at all and must get one another way. ## Where it fits Reach for `useTransition` when *you* trigger the expensive state update and want a pending affordance: switching a heavy tab, applying a filter, navigating within a client-rendered view. When the expensive render is driven by a value you receive rather than one you set, the companion API `useDeferredValue` is the better shape.