-
-
Notifications
You must be signed in to change notification settings - Fork 93
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fixing rendering multiple suspended components within one Suspense boundary #335
Fixing rendering multiple suspended components within one Suspense boundary #335
Conversation
|
…eactjs/preact-render-to-string into fix-multiple-suspended-children
cf81587
into
preactjs:simple-suspense-renderer-2024
const renderChildren = () => | ||
_renderToString( | ||
rendered, | ||
context, | ||
isSvgMode, | ||
selectValue, | ||
vnode, | ||
asyncMode | ||
); | ||
|
||
try { | ||
// Recurse into children before invoking the after-diff hook | ||
const str = renderChildren(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Worth benchmarking in the future. Creating inline closures is likely slower than inlining it into the various places.
* Simple Suspense renderer * update simple suspense rendere * add a possible promise string as the return value * Update test/compat/async.test.js * Create pink-gifts-kneel.md * non breaking * Update async.test.js * fixing nested Suspense boundaries (#334) * fixing multiple suspended child components (#335) --------- Co-authored-by: Chris Sauve <[email protected]> Co-authored-by: David Dios <[email protected]>
Rendering a Suspense boundary which have multiple suspended components as children fails:
I was curious so I trying to debug and fix this, what I found is:
_renderToString
(withasyncMode: true
) throws a Promise while rendering the children of a component, if any of the children is a suspended componentI changed this a bit by moving the "render children, if that throws a Promise then render again once that Promise is resolved" bit to a function and re-using that whenever rendering a children. This way if a Suspense component has multiple suspended child components, we keep rendering until all of the promises are resolved.