Bug: use() causes nested Suspense boundaries to not reveal

[gaearon]

Nested Suspense boundaries should reveal as the content becomes ready. However, this doesn't seem to work with use.

Repro case: https://codesandbox.io/embed/festive-archimedes-sihgkb?file=/ArtistPage.js:338-346

Expected: Suspense boundaries reveal separately
Actual: it waits for everything before revealing anything

[Chr-K]

on ArtistPage.js I swapped out

import { Suspense } from "react";
import AlbumList from "./AlbumList.js";
import Biography from "./Biography.js";
import Panel from "./Panel.js";

with

import React, { Suspense } from "react";
const AlbumList = React.lazy(()=> import("./AlbumList.js"))
const Biography = React.lazy(()=> import("./Biography.js"))
const Panel = React.lazy(()=> import("./Panel.js"))

and got the desired outcome.

Is this what you were looking for?

[gaearon]

It's still a bug though.

[Chr-K]

From my interpretation of the documentation suspense requires components to be imported dynamically, which is what lazy loading accomplishes.

from the docs: https://beta.reactjs.org/apis/react/Suspense

Only Suspense-enabled data sources will activate the Suspense component. They include:

Data fetching with Suspense-enabled frameworks
like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/)
and [Next.js](https://nextjs.org/docs/advanced-features/react-18)
Lazy-loading component code with [lazy](https://beta.reactjs.org/apis/react/lazy)

So I'm not really certain how to go about resolving this issue. I'm not saying you're wrong about it being a bug, but it's unclear to me where the issue lies. I'll update this thread if I think of / find anything though.

[sachin-hg]

@gaearon the issue doesn't seem limited to usage of use. I think a related issue was opened here: #19870

We ran into something similar but in our case the rerendering was happening over 1000 times

[gaearon]

@sachin-hg This issue isn't about re-rendering. It's about Suspense boundaries failing to reveal. I believe this bug was specific to use and was likely fixed in #25922.

As for #19870, I'm not sure it's a bug because suspending on a Promise created during render (which will be new every time until first mount even if you put it into state) is not supported. So I'm not sure what you were hitting, but #19870 is not a legitimate way to use React. If you have a different problem, please file a new issue with an example.

[gaearon]

This is fixed in main.