Skip to content

[Fizz] Add separator comment between text nodes #21099

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

Merged
merged 1 commit into from
Mar 25, 2021

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Mar 25, 2021

This is needed to avoid mutating the DOM during hydration.

This always adds it even when it's just text children. We need to avoid this overhead but it's a somewhat tricky problem to solve so we defer the optimization to later. This is also related to #13342 which is similarly difficult.

The thing that makes this difficult in Fizz is that there might be a segment that is currently suspended that may or may not render text nodes. Before or After this text node. Or there can be consecutive suspended components that resolve in various order.

We also want the result to be deterministic so if we can't always optimize it away, regardless of if/when those things resolve, then we should always insert it.

We could possible do the determination when segments resolve but then they need pointers to their parents and siblings.

I think there's a way to solve this by determining whether to emit a separator is done at the flush stage. It adds more computation there and unfortunately we'd need data structures that likely affects all "renderers".

Dropping the determinism constraint might also be an option (id-generation isn't atm).

@sebmarkbage sebmarkbage requested a review from gaearon March 25, 2021 15:05
@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Mar 25, 2021
@sebmarkbage sebmarkbage changed the title Add separator comment between text nodes [Fizz] Add separator comment between text nodes Mar 25, 2021
@sizebot
Copy link

sizebot commented Mar 25, 2021

Comparing: 148f8e4...21dde0b

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js = 122.62 kB 122.62 kB = 39.45 kB 39.45 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 129.02 kB 129.02 kB = 41.43 kB 41.43 kB
facebook-www/ReactDOM-prod.classic.js = 407.89 kB 407.89 kB = 75.53 kB 75.53 kB
facebook-www/ReactDOM-prod.modern.js = 396.14 kB 396.14 kB = 73.62 kB 73.62 kB
facebook-www/ReactDOMForked-prod.classic.js = 407.89 kB 407.89 kB = 75.53 kB 75.53 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-dom/cjs/react-dom-unstable-fizz.node.development.js +0.52% 50.12 kB 50.38 kB +0.62% 12.78 kB 12.86 kB
oss-experimental/react-dom/cjs/react-dom-unstable-fizz.browser.development.js +0.52% 50.17 kB 50.43 kB +0.57% 12.88 kB 12.95 kB
oss-experimental/react-dom/umd/react-dom-unstable-fizz.browser.development.js +0.51% 52.78 kB 53.05 kB +0.61% 13.04 kB 13.12 kB
oss-experimental/react-dom/cjs/react-dom-unstable-fizz.browser.production.min.js +0.30% 11.38 kB 11.41 kB +0.27% 4.13 kB 4.14 kB
oss-experimental/react-dom/cjs/react-dom-unstable-fizz.node.production.min.js +0.29% 11.57 kB 11.60 kB +0.24% 4.15 kB 4.16 kB
oss-experimental/react-dom/umd/react-dom-unstable-fizz.browser.production.min.js +0.29% 11.57 kB 11.61 kB +0.40% 4.21 kB 4.23 kB

Generated by 🚫 dangerJS against 21dde0b

@sebmarkbage sebmarkbage force-pushed the fizztest branch 4 times, most recently from 61aaeba to 2372f07 Compare March 25, 2021 15:21
This is needed to avoid mutating the DOM during hydration. This *always*
adds it even when it's just text children.

We need to avoid this overhead but it's a somewhat tricky problem to solve
so we defer the optimization to later.
@sebmarkbage sebmarkbage merged commit 6a589ad into facebook:master Mar 25, 2021
koto pushed a commit to koto/react that referenced this pull request Jun 15, 2021
This is needed to avoid mutating the DOM during hydration. This *always*
adds it even when it's just text children.

We need to avoid this overhead but it's a somewhat tricky problem to solve
so we defer the optimization to later.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants