Skip to content
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

[Fizz] Remove assignID mechanism #22410

Merged
merged 5 commits into from
Sep 24, 2021
Merged

Conversation

sebmarkbage
Copy link
Collaborator

I originally added the assignID mechanism to only lazily assign ID so that we could reuse an existing ID in the DOM that happened to be there. Even if there wasn't, it should at least be able to reuse the DOM node that was already in the fallback and just give it an ID.

This was based on the observation that it would look pretty clowny how much extra HTML we add:

<!--$?-->
<template id="..."></template>
...
<!--/$-->

Two comments and a tag that breaks CSS selectors.

However, that didn't quite work out due to an edge case where we might not yet know what the fallback might look like. To fix that edge case, we were effectively always inserting these into the fallback. It also wasn't generating deterministic HTML depending on loading order.

Also, given that we don't expect to see these a lot it might be ok. The comments are always needed to encode how much to skip and they also work as a stable node to refer to while the content in between might change during the load.

The ID is only needed if we emit a pending boundary - which only happens when something suspends and we happened to flush in between. Those should ideally be only a few steps per load. So the total amount of extra HTML isn't so bad.

We don't have to emit the template tag for client-rendered boundaries that are written as client-rendered immediately.

This refactors the code so that IDs are always lazily assigned and the template tag is only emitted in the write phase if we're actually writing a pending boundary.

This is only used to support the assignID mechanism.
This effectively isn't used anyway because we always insert a dummy tag
into the fallback.
This ensures that assigning the ID is deterministic since it's done during
writing.

This also avoids emitting it for client rendered boundaries that start as
client rendered since we never need to refer to them.
@facebook-github-bot facebook-github-bot added the React Core Team Opened by a member of the React Core Team label Sep 24, 2021
@sebmarkbage
Copy link
Collaborator Author

I suppose it would be possible to treat the template tag with some kind of special ID pattern as the start pending tag and then have the script not delete it. But then it would remain in the DOM as we hydrate because we avoid trying to remove them during hydration to avoid trigger relayout.

@sizebot
Copy link

sizebot commented Sep 24, 2021

Comparing: 1c58cfa...9a029c0

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 = 129.54 kB 129.54 kB = 41.29 kB 41.29 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 132.37 kB 132.37 kB = 42.23 kB 42.23 kB
facebook-www/ReactDOM-prod.classic.js = 411.19 kB 411.19 kB = 76.09 kB 76.09 kB
facebook-www/ReactDOM-prod.modern.js = 399.75 kB 399.75 kB = 74.38 kB 74.38 kB
facebook-www/ReactDOMForked-prod.classic.js = 411.19 kB 411.19 kB = 76.09 kB 76.09 kB
facebook-www/ReactDOMServer-dev.modern.js = 218.09 kB 213.66 kB = 51.07 kB 50.31 kB
oss-experimental/react-server/cjs/react-server.production.min.js = 17.49 kB 17.02 kB = 5.95 kB 5.90 kB
oss-stable-semver/react-server/cjs/react-server.production.min.js = 17.36 kB 16.89 kB = 5.91 kB 5.86 kB
oss-stable/react-server/cjs/react-server.production.min.js = 17.36 kB 16.89 kB = 5.91 kB 5.86 kB
oss-experimental/react-dom/cjs/react-dom-server.node.production.min.js = 32.53 kB 31.47 kB = 10.92 kB 10.67 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.production.min.js = 32.40 kB 31.34 kB = 10.86 kB 10.61 kB
oss-stable/react-dom/cjs/react-dom-server.node.production.min.js = 32.40 kB 31.34 kB = 10.86 kB 10.61 kB
oss-experimental/react-dom/umd/react-dom-server.browser.production.min.js = 32.41 kB 31.35 kB = 11.03 kB 10.75 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.production.min.js = 32.72 kB 31.65 kB = 10.85 kB 10.59 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.min.js = 32.25 kB 31.19 kB = 10.91 kB 10.65 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.production.min.js = 32.28 kB 31.21 kB = 10.96 kB 10.70 kB
oss-stable/react-dom/umd/react-dom-server.browser.production.min.js = 32.28 kB 31.21 kB = 10.96 kB 10.70 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.production.min.js = 32.59 kB 31.51 kB = 10.80 kB 10.54 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.production.min.js = 32.59 kB 31.51 kB = 10.80 kB 10.54 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.production.min.js = 32.11 kB 31.05 kB = 10.86 kB 10.60 kB
oss-stable/react-dom/cjs/react-dom-server.browser.production.min.js = 32.11 kB 31.05 kB = 10.86 kB 10.60 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.production.min.js = 32.31 kB 31.24 kB = 10.76 kB 10.50 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.production.min.js = 32.17 kB 31.11 kB = 10.71 kB 10.45 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.production.min.js = 32.17 kB 31.11 kB = 10.71 kB 10.45 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.production.min.js = 32.13 kB 31.05 kB = 10.63 kB 10.38 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.production.min.js = 31.99 kB 30.92 kB = 10.58 kB 10.33 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.production.min.js = 31.99 kB 30.92 kB = 10.58 kB 10.33 kB
facebook-www/ReactDOMServer-prod.modern.js = 70.69 kB 68.20 kB = 14.53 kB 14.21 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-noop-renderer/cjs/react-noop-renderer-server.production.min.js +1.42% 2.81 kB 2.85 kB +3.82% 1.07 kB 1.12 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-server.production.min.js +1.42% 2.81 kB 2.85 kB +3.82% 1.07 kB 1.12 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-server.production.min.js +1.42% 2.81 kB 2.85 kB +3.82% 1.07 kB 1.12 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-server.development.js +0.76% 5.79 kB 5.84 kB +2.43% 1.61 kB 1.65 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-server.development.js +0.76% 5.79 kB 5.84 kB +2.43% 1.61 kB 1.65 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-server.development.js +0.76% 5.79 kB 5.84 kB +2.43% 1.61 kB 1.65 kB
oss-experimental/react-server/cjs/react-server.development.js = 117.39 kB 116.16 kB = 28.83 kB 28.58 kB
oss-stable-semver/react-server/cjs/react-server.development.js = 116.83 kB 115.60 kB = 28.66 kB 28.43 kB
oss-stable/react-server/cjs/react-server.development.js = 116.83 kB 115.60 kB = 28.66 kB 28.43 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.development.js = 230.16 kB 226.06 kB = 52.75 kB 52.09 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.development.js = 220.54 kB 216.61 kB = 52.60 kB 51.91 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.development.js = 229.54 kB 225.44 kB = 52.59 kB 51.93 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.development.js = 229.54 kB 225.44 kB = 52.59 kB 51.93 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.development.js = 219.97 kB 216.03 kB = 52.42 kB 51.76 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.development.js = 219.97 kB 216.03 kB = 52.42 kB 51.76 kB
oss-experimental/react-dom/umd/react-dom-server.browser.development.js = 227.38 kB 223.32 kB = 52.40 kB 51.73 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.development.js = 226.76 kB 222.70 kB = 52.24 kB 51.57 kB
oss-stable/react-dom/umd/react-dom-server.browser.development.js = 226.76 kB 222.70 kB = 52.24 kB 51.57 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.development.js = 218.97 kB 215.04 kB = 52.16 kB 51.48 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.development.js = 218.40 kB 214.46 kB = 51.98 kB 51.32 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.development.js = 218.40 kB 214.46 kB = 51.98 kB 51.32 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.development.js = 216.37 kB 212.47 kB = 51.82 kB 51.14 kB
oss-experimental/react-dom/cjs/react-dom-server.node.development.js = 216.27 kB 212.37 kB = 51.66 kB 50.99 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.development.js = 215.79 kB 211.90 kB = 51.64 kB 50.99 kB
oss-stable/react-dom/cjs/react-dom-server.browser.development.js = 215.79 kB 211.90 kB = 51.64 kB 50.99 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.development.js = 215.70 kB 211.80 kB = 51.49 kB 50.83 kB
oss-stable/react-dom/cjs/react-dom-server.node.development.js = 215.70 kB 211.80 kB = 51.49 kB 50.83 kB
facebook-www/ReactDOMServer-dev.modern.js = 218.09 kB 213.66 kB = 51.07 kB 50.31 kB
oss-experimental/react-server/cjs/react-server.production.min.js = 17.49 kB 17.02 kB = 5.95 kB 5.90 kB
oss-stable-semver/react-server/cjs/react-server.production.min.js = 17.36 kB 16.89 kB = 5.91 kB 5.86 kB
oss-stable/react-server/cjs/react-server.production.min.js = 17.36 kB 16.89 kB = 5.91 kB 5.86 kB
oss-experimental/react-dom/cjs/react-dom-server.node.production.min.js = 32.53 kB 31.47 kB = 10.92 kB 10.67 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.production.min.js = 32.40 kB 31.34 kB = 10.86 kB 10.61 kB
oss-stable/react-dom/cjs/react-dom-server.node.production.min.js = 32.40 kB 31.34 kB = 10.86 kB 10.61 kB
oss-experimental/react-dom/umd/react-dom-server.browser.production.min.js = 32.41 kB 31.35 kB = 11.03 kB 10.75 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.production.min.js = 32.72 kB 31.65 kB = 10.85 kB 10.59 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.min.js = 32.25 kB 31.19 kB = 10.91 kB 10.65 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.production.min.js = 32.28 kB 31.21 kB = 10.96 kB 10.70 kB
oss-stable/react-dom/umd/react-dom-server.browser.production.min.js = 32.28 kB 31.21 kB = 10.96 kB 10.70 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.production.min.js = 32.59 kB 31.51 kB = 10.80 kB 10.54 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.production.min.js = 32.59 kB 31.51 kB = 10.80 kB 10.54 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.production.min.js = 32.11 kB 31.05 kB = 10.86 kB 10.60 kB
oss-stable/react-dom/cjs/react-dom-server.browser.production.min.js = 32.11 kB 31.05 kB = 10.86 kB 10.60 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.production.min.js = 32.31 kB 31.24 kB = 10.76 kB 10.50 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.production.min.js = 32.17 kB 31.11 kB = 10.71 kB 10.45 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.production.min.js = 32.17 kB 31.11 kB = 10.71 kB 10.45 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.production.min.js = 32.13 kB 31.05 kB = 10.63 kB 10.38 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.production.min.js = 31.99 kB 30.92 kB = 10.58 kB 10.33 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.production.min.js = 31.99 kB 30.92 kB = 10.58 kB 10.33 kB
facebook-www/ReactDOMServer-prod.modern.js = 70.69 kB 68.20 kB = 14.53 kB 14.21 kB

Generated by 🚫 dangerJS against 9a029c0

We never need an ID before we write a pending boundary. This also ensures
that ID generation is deterministic by moving it to the write phase.
We can assume that there are no text nodes before the template tag so this
simplifies the script that finds the comment node. It should be the direct
previous child.
Copy link
Contributor

@salazarm salazarm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A lot cleaner, me like!

@sebmarkbage sebmarkbage merged commit d47339e into facebook:main Sep 24, 2021
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Oct 12, 2021
Summary:
This sync includes the following changes:
- **[579c008a7](facebook/react@579c008a7 )**: [Fizz/Flight] pipeToNodeWritable(..., writable).startWriting() -> renderToPipeableStream(...).pipe(writable) ([#22450](facebook/react#22450)) //<Sebastian Markbåge>//
- **[f2c381131](facebook/react@f2c381131 )**: fix: useSyncExternalStoreExtra ([#22500](facebook/react#22500)) //<Daishi Kato>//
- **[0ecbbe142](facebook/react@0ecbbe142 )**: Sync hydrate discrete events in capture phase and dont replay discrete events ([#22448](facebook/react#22448)) //<salazarm>//
- **[a724a3b57](facebook/react@a724a3b57 )**: [RFC] Codemod invariant -> throw new Error ([#22435](facebook/react#22435)) //<Andrew Clark>//
- **[201af81b0](facebook/react@201af81b0 )**: Release pooled cache reference in complete/unwind ([#22464](facebook/react#22464)) //<Joseph Savona>//
- **[033efe731](facebook/react@033efe731 )**: Call get snapshot in useSyncExternalStore server shim ([#22453](facebook/react#22453)) //<salazarm>//
- **[7843b142a](facebook/react@7843b142a )**: [Fizz/Flight] Pass in Destination lazily to startFlowing instead of in createRequest ([#22449](facebook/react#22449)) //<Sebastian Markbåge>//
- **[d9fb383d6](facebook/react@d9fb383d6 )**: Extract queueing logic into shared functions ([#22452](facebook/react#22452)) //<Andrew Clark>//
- **[9175f4d15](facebook/react@9175f4d15 )**: Scheduling Profiler: Show Suspense resource .displayName ([#22451](facebook/react#22451)) //<Brian Vaughn>//
- **[eba248c39](facebook/react@eba248c39 )**: [Fizz/Flight] Remove reentrancy hack ([#22446](facebook/react#22446)) //<Sebastian Markbåge>//
- **[66388150e](facebook/react@66388150e )**: Remove usereducer eager bailout ([#22445](facebook/react#22445)) //<Joseph Savona>//
- **[d3e086932](facebook/react@d3e086932 )**: Make root.unmount() synchronous  ([#22444](facebook/react#22444)) //<Andrew Clark>//
- **[2cc6d79c9](facebook/react@2cc6d79c9 )**: Rename onReadyToStream to onCompleteShell ([#22443](facebook/react#22443)) //<Sebastian Markbåge>//
- **[c88fb49d3](facebook/react@c88fb49d3 )**: Improve DEV errors if string coercion throws (Temporal.*, Symbol, etc.) ([#22064](facebook/react#22064)) //<Justin Grant>//
- **[05726d72c](facebook/react@05726d72c )**: [Fix] Errors should not "unsuspend" a transition ([#22423](facebook/react#22423)) //<Andrew Clark>//
- **[3746eaf98](facebook/react@3746eaf98 )**: Packages/React/src/ReactLazy ---> changing -1 to unintialized ([#22421](facebook/react#22421)) //<BIKI DAS>//
- **[04ccc01d9](facebook/react@04ccc01d9 )**: Hydration errors should force a client render ([#22416](facebook/react#22416)) //<Andrew Clark>//
- **[029fdcebb](facebook/react@029fdcebb )**: root.hydrate -> root.isDehydrated ([#22420](facebook/react#22420)) //<Andrew Clark>//
- **[af87f5a83](facebook/react@af87f5a83 )**: Scheduling Profiler marks should include thrown Errors ([#22417](facebook/react#22417)) //<Brian Vaughn>//
- **[d47339ea3](facebook/react@d47339ea3 )**: [Fizz] Remove assignID mechanism ([#22410](facebook/react#22410)) //<Sebastian Markbåge>//
- **[3a50d9557](facebook/react@3a50d9557 )**: Never attach ping listeners in legacy Suspense ([#22407](facebook/react#22407)) //<Andrew Clark>//
- **[82c8fa90b](facebook/react@82c8fa90b )**: Add back useMutableSource temporarily ([#22396](facebook/react#22396)) //<Andrew Clark>//
- **[5b57bc6e3](facebook/react@5b57bc6e3 )**: [Draft] don't patch console during first render ([#22308](facebook/react#22308)) //<Luna Ruan>//
- **[cf07c3df1](facebook/react@cf07c3df1 )**: Delete all but one `build2` reference ([#22391](facebook/react#22391)) //<Andrew Clark>//
- **[bb0d06935](facebook/react@bb0d06935 )**: [build2 -> build] Local scripts //<Andrew Clark>//
- **[0c81d347b](facebook/react@0c81d347b )**: Write artifacts to `build` instead of `build2` //<Andrew Clark>//
- **[4da03c9fb](facebook/react@4da03c9fb )**: useSyncExternalStore React Native version ([#22367](facebook/react#22367)) //<salazarm>//
- **[48d475c9e](facebook/react@48d475c9e )**: correct typos ([#22294](facebook/react#22294)) //<Bowen>//
- **[cb6c619c0](facebook/react@cb6c619c0 )**: Remove Fiber fields that were used for hydrating useMutableSource ([#22368](facebook/react#22368)) //<Sebastian Silbermann>//
- **[64e70f82e](facebook/react@64e70f82e )**: [Fizz] add avoidThisFallback support ([#22318](facebook/react#22318)) //<salazarm>//
- **[3ee7a004e](facebook/react@3ee7a004e )**: devtools: Display actual ReactDOM API name in root type ([#22363](facebook/react#22363)) //<Sebastian Silbermann>//
- **[79b8fc667](facebook/react@79b8fc667 )**: Implement getServerSnapshot in userspace shim ([#22359](facebook/react#22359)) //<Andrew Clark>//
- **[86b3e2461](facebook/react@86b3e2461 )**: Implement useSyncExternalStore on server ([#22347](facebook/react#22347)) //<Andrew Clark>//
- **[8209de269](facebook/react@8209de269 )**: Delete useMutableSource implementation ([#22292](facebook/react#22292)) //<Andrew Clark>//

Changelog:
[General][Changed] - React Native sync for revisions e8feb11...afcb9cd

jest_e2e[run_all_tests]

Reviewed By: yungsters

Differential Revision: D31541359

fbshipit-source-id: c35941bc303fdf55cb061e9996200dc868a6f2af
zhengjitf pushed a commit to zhengjitf/react that referenced this pull request Apr 15, 2022
* Remove pushEmpty

This is only used to support the assignID mechanism.

* Remove assignID mechanism

This effectively isn't used anyway because we always insert a dummy tag
into the fallback.

* Emit the template tag with an ID directly in pending boundaries

This ensures that assigning the ID is deterministic since it's done during
writing.

This also avoids emitting it for client rendered boundaries that start as
client rendered since we never need to refer to them.

* Move lazy ID initialization to the core implementation

We never need an ID before we write a pending boundary. This also ensures
that ID generation is deterministic by moving it to the write phase.

* Simplify the inserted scripts

We can assume that there are no text nodes before the template tag so this
simplifies the script that finds the comment node. It should be the direct
previous child.
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