Description
React version: both 18.3.1 and 19.0.0
When creating a lazy component in useMemo, and rendering inside nested Suspense, the suspense continues to render its fallback forever and never mounts the component – even after the component has had time to load.
This is reproducible with both 18.3.1 and 19.0.0.
May be related to #30582?
The current behavior
When rendering Suspense in a parent and the lazy component in a child, the lazy component never loads (line 2). However, when the child component additionally wraps its own Suspense, the loading succeeds (lines 1 & 3).
The expected behavior
All lazy components should render
Steps To Reproduce
Link to code example: https://stackblitz.com/edit/vitejs-vite-yafxnrot?file=src%2FApp.tsx
function Child({ n }: { n: number }) {
return <div>Child {n}</div>;
}
function Layout2({ withSuspense = false }: { withSuspense?: boolean }) {
const LazyChild = useMemo(() => lazy(async () => ({ default: Child })), []);
if (withSuspense) {
return (
<Suspense fallback={<div>Suspense 2</div>}>
<LazyChild n={2} />
</Suspense>
);
} else {
return <LazyChild n={2} />;
}
}
function Layout() {
const LazyChild = useMemo(() => lazy(async () => ({ default: Child })), []);
return (
<div>
<Suspense fallback={<div>Suspense 1</div>}>
<LazyChild n={1} />
</Suspense>
<Suspense fallback={<div>Suspense 2</div>}>
<Layout2 />
</Suspense>
<Suspense fallback={<div>Suspense 2</div>}>
<Layout2 withSuspense />
</Suspense>
</div>
);
}
function App() {
return <Layout />;
}
export default App;createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>
);