AceDevHub
Advanced React Interview QuestionsAdvancedConcept

React · Question 72

What does useTransition do in React?

Direct answer

useTransition lets a component mark selected state updates as non-blocking Transitions and exposes an isPending flag while that Transition is still in progress.

Tabs.jsx
function Tabs() {
  const [tab, setTab] = useState("overview");
  const [isPending, startTransition] = useTransition();

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <>
      <TabButtons onSelect={selectTab} />
      {isPending && <span>Updating…</span>}
      <TabContent tab={tab} />
    </>
  );
}

The update inside startTransition() is treated as non-urgent, so React can interrupt it to handle more urgent work such as typing or another interaction.