AceDevHub
Advanced React Interview QuestionsAdvancedConcept

React · Question 77

How do Transitions interact with Suspense when already visible content suspends again?

Direct answer

When a non-urgent Transition causes already revealed content to suspend, React can keep the existing content visible instead of immediately replacing it with the nearest Suspense fallback.

Router.jsx
function Router() {
  const [page, setPage] = useState("/");

  function navigate(nextPage) {
    startTransition(() => {
      setPage(nextPage);
    });
  }

  return (
    <Suspense fallback={<FullPageSpinner />}>
      <Page page={page} navigate={navigate} />
    </Suspense>
  );
}
  • Urgent update: if visible content suspends, the closest boundary may show its fallback immediately.
  • Transition update: React can keep already revealed content visible while preparing the replacement.
  • New nested boundaries: newly introduced Suspense boundaries may still show their own fallbacks rather than blocking the whole transition.