Provide a prop on <Suspense> to let children mount/unmount instead of changing style

[huozhi]

Feature Request

Currently react render children of Suspense with inline style display: none !important, referenced PR. would like to have a prop like mount or sth else to remount the children when suspended state changed.

Example

const Chid = () => 
   // ... 
   return <div>{data}</div>

<Suspense mount fallback={<span>fallback</span>}>
  <Chid />
</Suspense>

the above code will only render fallback component

<span>fallback</span>

instead of

<span>fallback</span>
<div style="display: none !important;">data</div>

[threepointone]

Could you explain your specific usecase/issue that makes you desire this behaviour?

[huozhi]

@threepointone I came across this behavior when I was doing snapshot for suspense rendering results with jest. I need to filter out the hidden children and find the actual rendered fallback element to detect if it's suspended.

but I'm wondering there would be some cases that people don't want the nodes just be hidden, remounting can also be a choice. other effects like the order of elements will change, that fallback might not be the only element or can become the second element.

[threepointone]

iirc, the dom elements might be holding state, so it's actually important that they stay in the dom.

It's also a little odd to do visibility checks with snapshots. Consider that some other code, even user code, might have hidden a parent element. Then your test would pass even though it doesn't 'work' as expected. As an immediate workaround, I'd recommend making a helper, something like isVisible() that checks the snapshotted tree. I'd also recommend moving to a 'real' dom for testing (like jsdom) and using regular dom apis for assertions like isVisible() (eg - https://stackoverflow.com/a/21696585)

[eps1lon]

Sounds like a duplicate of #14536

This is a known quirk with ReactDOM.render (i.e. legacy mode) that will be fixed in blocking (createBlockingRoot) and concurrent mode (createRoot). In the experimental modes react wont trees in an inconsistent state.

It seems like the fix to this will be #15504. Note it requires that your tree is Strict Mode compliant. We can't fix this in legacy mode.

-- #14536 (comment)

[threepointone]

^ He's right, but that would require you to migrate to concurrent mode, which isn't really a recommended option at the moment.

[eps1lon]

Yeah. To make this more clear: If this is a duplicate of #14536 then this can't be fixed in stable react 16 as per comment from Dan in #14536 (comment).

[huozhi]

Thanks for clarification @eps1lon 👍. @threepointone work around on testing side make sense, thanks for the help.
close this issue as duplicate.