A component suspends when it needs something that is not ready — a promise read with use, a lazily imported module, data loaded by a framework. React 7,897 walks up to the nearest <Suspense> boundary and renders its fallback in place of the subtree, leaving everything above and beside it untouched.
<div id="root"></div>
<style>body{font:14px system-ui} .card{border:1px solid #90a4ae;padding:2px 8px;margin:4px}</style>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@8.0.5/babel.min.js"></script>
<script type="importmap">
{ "imports": { "react": "https://esm.sh/react@19.3.0",
"react-dom/client": "https://esm.sh/react-dom@19.3.0/client" } }
</script>
<script type="text/babel" data-type="module">
import React, { Suspense, use } from 'react';
import { createRoot } from 'react-dom/client';
const after = (ms, value) => new Promise((r) => setTimeout(() => r(value), ms));
const profile = after(50, 'Ada Lovelace'); // resolves before the page is captured
const orders = after(60000, 'too late'); // still pending when it is captured
const Row = ({ label, promise }) => <p>{label}: <b>{use(promise)}</b></p>;
createRoot(document.getElementById('root')).render(<div>
<div className="card"><Suspense fallback={<p>Loading profile...</p>}>
<Row label="Name" promise={profile} /></Suspense></div>
<div className="card"><Suspense fallback={<p>Loading orders...</p>}>
<Row label="Orders" promise={orders} /></Suspense></div>
<p>Everything outside the boundaries stayed on screen and interactive.</p></div>);
</script>
Where the boundaries go is a design decision: one around the page gives a single spinner and an all-or-nothing reveal, one per card lets each part appear as its data lands. An update that would push an already visible boundary back to its fallback is suppressed when you wrap it in a Transition. And a boundary only catches components that suspend inside it, so a component cannot be both the boundary and the suspending child.