React · Frontend system thinking

When would you use useTransition versus useDeferredValue?

HarduseTransitionuseDeferredValueconcurrent UIUpdated Oct 2026

Short answer

Use useTransition when you control the state update and want a pending flag. Use useDeferredValue when you receive a value from outside and want a lagging copy for expensive rendering.

Both hooks separate urgent UI from non-urgent UI, but they sit on different sides of the state update. useTransition wraps the update itself. useDeferredValue takes a value and returns a version that lags behind during urgent renders.

jsx

function Search({ query }) {
  const deferredQuery = useDeferredValue(query);
  const isStale = query !== deferredQuery;

  return (
    <div style={{ opacity: isStale ? 0.6 : 1 }}>
      <Results query={deferredQuery} />
    </div>
  );
}

The input can update immediately while Results renders with the previous query until React catches up.

Choose by ownership

You own the setState call and need isPending: use useTransition
A prop or external value changes and you want to defer expensive rendering: use useDeferredValue
You need to keep the previous UI visible while new UI is prepared: either can help
You need a network request to finish: neither hook solves caching or cancellation

jsx

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

  function select(next) {
    startTransition(() => setTab(next));
  }

  return (
    <div>
      <TabButtons value={tab} onChange={select} />
      {isPending && <Spinner />}
      <TabPanel value={tab} />
    </div>
  );
}

The tab state update is wrapped in a transition, so React can keep the old panel visible while the new one renders.

Do not put an input's own value behind a transition. The controlled input must update urgently or typing will feel laggy. Transition the expensive result, not the keystroke.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

1What does isPending tell you?
2Why shouldn't the controlled input value be transitioned?
3Can useDeferredValue replace debouncing?
4How do these hooks relate to Suspense?

Say it in the interview

useTransition lets me mark a state update as non-urgent and gives me isPending while React prepares it. useDeferredValue is useful when the value comes from somewhere else and I want to render expensive UI with a lagging copy. I keep the input update urgent in both cases. Neither hook fetches data or caches results; they only adjust rendering priority.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live React mock interview and get scored feedback on depth, clarity and confidence.

Start a free React interview Browse all questions

Choose by ownership

Follow-ups you should expect

Related questions

Now say it out loud.