What is useTransition in React 18?
Why Interviewers Ask This
Mid-level React.js roles require deep understanding of this topic. Interviewers ask this to separate candidates who truly understand the mechanics from those who only know surface-level concepts.
Answer
useTransition (React 18) marks state updates as non-urgent transitions, allowing React to keep the current UI responsive while preparing the new UI in the background. Syntax: const [isPending, startTransition] = useTransition();. Wrap non-urgent updates: startTransition(() => setPage(newPage));. React can interrupt this transition if a more urgent update (like user typing) comes in, and restart it later. isPending is true while the transition is in progress — use it to show a loading indicator without hiding the current content. Without useTransition: clicking a tab that triggers a slow render makes the UI feel frozen — the expensive render blocks everything. With useTransition: the tab click is instant, the current page stays visible (with an optional spinner), and the new page renders in the background. useTransition vs useDeferredValue: useTransition gives you control over the update dispatch; useDeferredValue defers a value you receive. Use useTransition for navigations, tab switches, and search filtering. startTransition can also be imported and used outside components.
Pro Tip
Before answering, structure your response: one-line definition → real-world analogy → concrete example from a project. This makes even complex React.js answers easy to follow.