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.