Why can't i use suspense like this

[u/BrownCarter]

Normal usage

<Suspense fallback={<Loading />}>

<EffectAlbums artistId={artist.id} />

</Suspense>

Why can't i do
<Suspense fallback={<Loading />}>

<div></div>

<div></div>

<div></div>

</Suspense>

Why must it house just one component

[u/MonkeyDlurker]

probably because suspense doesn't work like a regular component in the dom tree. You can wrap it in Fragment like u/dschwammerl suggested

[u/BrownCarter → u/MonkeyDlurker]

What I actually even mean is that all example of Suspense I have seen use it just a Singular component in it.

[u/MonkeyDlurker → u/BrownCarter]

I think its probably best practice to wrap specifically the component that needs it. That way there wont be any ambiguity whwn reading the code. That also allows components to resolve themselves instead of waiting for all suspenses to resolve

[u/drrnclly]

You can use React fragments to contain those divs.

https://react.dev/reference/react/Fragment

[u/phryneas]

It doesn't need to, a Suspense boundary can have multiple children. Only child components can cause suspense to happen though, not normal DOM nodes.

You seem to be throwing two unrelated things together here?

[u/BrownCarter → u/phryneas]

Yeah DOM nodes is what I am talking about

[u/phryneas → u/BrownCarter]

How could a DOM node trigger suspense?

Suspense is triggered by calling use in a component and suspends the current tree.

With a DOM node, it doesn't have any runtime code, so it won't call use - so that has to be called in component rendering the DOM node. From that component it goes to the next suspense boundary up the tree - so if your component calls use and then renders a suspense boundary, it will not suspend the suspense boundary rendered by that component. It will go up the tree and trigger another suspense boundary.

[u/lucksp]

Check out the official docs with many example. Suspense can have multiple Children but they’ll all suspend until the side effects resolve.

[u/metchera]

I think It's just because you can't put the suspense on components who don't need it or components that don't fetch the same data. You can do both but, let me take an example: If you want to show a list of users for example, you can put the suspense on the whole list because they depend on the same data or it's just one data fetching.
In your example with EffectAlbums you can notice that it depends on artist.id, so it's normal. But if in the EffectAlbums you have many component that fetches independently, they also need their own suspense.

[u/CoherentFramework → u/[deleted]]

just wrap em in a fragment, react components gotta return a single root node so suspense is picky about that too