Skip to content

[Fizz] Add separator comment between text nodes#21099

Merged
sebmarkbage merged 1 commit intofacebook:masterfrom
sebmarkbage:fizztest
Mar 25, 2021
Merged

[Fizz] Add separator comment between text nodes#21099
sebmarkbage merged 1 commit intofacebook:masterfrom
sebmarkbage:fizztest

Conversation

@sebmarkbage
Copy link
Copy Markdown
Contributor

@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
Copy Markdown

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