Add Lazy Elements Behind a Flag #19033
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
React Core Team
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 21b624a:
|
Details of bundled changes.Comparing: 6071486...21b624a react-dom
react-art
react-reconciler
ReactDOM: size: 0.0%, gzip: -0.0% Size changes (experimental) |
We really needed this for Flight before as well but we got away with it because Blocks were lazy but with the removal of Blocks, we'll need this to ensure that we can lazily stream in part of the content. Luckily LazyComponent isn't really just a Component. It's just a generic type that can resolve into anything kind of like a Promise. So we can use that to resolve elements just like we can components. This allows keys and props to become lazy as well. To accomplish this, we suspend during reconciliation. This causes us to not be able to render siblings because we don't know if the keys will reconcile. For initial render we could probably special case this and just render a lazy component fiber. Throwing in reconciliation didn't work correctly with direct nested siblings of a Suspense boundary before but it does now so it depends on new reconciler.
Details of bundled changes.Comparing: 6071486...21b624a react-dom
react-art
ReactDOM: size: 0.0%, gzip: -0.0% Size changes (stable) |
acdlite
approved these changes
May 28, 2020
Is that difference in behavior accidental or intentional? (Just curious.) |
Accidental. I mean we intentionally didn't put things that threw in reconciliation due to this quirk. So it wasn't observable before Blocks. The original source has to do with errors throwing. If an error throws inside an error boundary for whatever reason, we don't ever want to let that error boundary try to handle it. However, reconciling children isn't really part of the error boundary, it's just accidentally how it works. Even if we wanted to keep this for errors, it doesn't have to apply to suspense boundaries. It just accidentally did because we treated them same as errors. We could do the traversal one level up for throwing promises. However, since the new reconciler changes how suspense boundaries work, this issue accidentally got solved anyway. |
sebmarkbage
added a commit
to sebmarkbage/react
that referenced
this pull request
Oct 30, 2020
This now means that if a server component suspends, its value becomes a React.lazy object. I.e. the element that rendered the server component gets replaced with a lazy node. As of facebook#19033 lazy objects can be rendered in the node position. This allows us to suspend at the location of the server component while we're waiting on its content. Now server components has the same capabilities as Blocks to progressively reveal its content.
sebmarkbage
added a commit
that referenced
this pull request
Oct 31, 2020
…0137) This now means that if a server component suspends, its value becomes a React.lazy object. I.e. the element that rendered the server component gets replaced with a lazy node. As of #19033 lazy objects can be rendered in the node position. This allows us to suspend at the location of the server component while we're waiting on its content. Now server components has the same capabilities as Blocks to progressively reveal its content.
koto
pushed a commit
to koto/react
that referenced
this pull request
Jun 15, 2021
…cebook#20137) This now means that if a server component suspends, its value becomes a React.lazy object. I.e. the element that rendered the server component gets replaced with a lazy node. As of facebook#19033 lazy objects can be rendered in the node position. This allows us to suspend at the location of the server component while we're waiting on its content. Now server components has the same capabilities as Blocks to progressively reveal its content.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
We really needed this for Flight before as well but we got away with it because Blocks were lazy but with the removal of Blocks, we'll need this to ensure that we can lazily stream in part of the content.
Luckily LazyComponent isn't really just a Component. It's just a generic type that can resolve into anything kind of like a Promise.
So we can use that to resolve elements just like we can components. This allows keys and props to become lazy as well.
To accomplish this, we suspend during reconciliation. This causes us to not be able to render siblings because we don't know if the keys will reconcile. For initial render we could probably special case this and just render a lazy component fiber like we do with other lazy stuff. This is easier in blocking/concurrent mode only since the semantics for the LazyComponent tag is just to indefinitely suspend when rendered.
Throwing in reconciliation didn't work correctly with direct nested siblings of a Suspense boundary before but it does now so it depends on new reconciler.