Explain the useTransition hook and how it helps with concurrency.

Explain the useTransition hook and how it helps with concurrency.

• A. It marks updates as urgent to render immediately.
• B. It debounces API calls.
• C. It marks state updates as non-urgent and returns isPending and startTransition.
• D. It handles errors during transitions automatically.

Answer: (C)

Concurrence in React treats some updates as non-urgent so the UI stays responsive while heavier work runs in the background. The useTransition hook introduces a way to do exactly that by giving you a startTransition function and an isPending flag. Wrap the state update you want to treat as a non-urgent transition inside startTransition, and React can defer or interrupt that work to keep more urgent events, like typing or clicking, feeling fast. While the transition is in progress, isPending becomes true, so you can render a subtle loading indicator or otherwise adjust the UI to reflect that the new results aren’t ready yet. This pattern is especially helpful for expensive updates such as filtering a large list or computing results after user input, where keeping the input responsive is important. It’s not about marking updates as urgent, it doesn’t debounce API calls by itself, and it doesn’t automatically handle errors. To see the effect, you typically use a concurrent renderer (React 18+ with createRoot), which enables these non-urgent updates to be managed smoothly.

Concurrence in React treats some updates as non-urgent so the UI stays responsive while heavier work runs in the background. The useTransition hook introduces a way to do exactly that by giving you a startTransition function and an isPending flag. Wrap the state update you want to treat as a non-urgent transition inside startTransition, and React can defer or interrupt that work to keep more urgent events, like typing or clicking, feeling fast. While the transition is in progress, isPending becomes true, so you can render a subtle loading indicator or otherwise adjust the UI to reflect that the new results aren’t ready yet. This pattern is especially helpful for expensive updates such as filtering a large list or computing results after user input, where keeping the input responsive is important. It’s not about marking updates as urgent, it doesn’t debounce API calls by itself, and it doesn’t automatically handle errors. To see the effect, you typically use a concurrent renderer (React 18+ with createRoot), which enables these non-urgent updates to be managed smoothly.