What is useTransition in React 18?
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.