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

createRoot(..., {hydrate:true}) -> hydrateRoot(...) #21687

Merged
merged 1 commit into from
Jun 15, 2021

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Jun 15, 2021

This adds a new top level API for hydrating a root. It takes the initial children as part of its constructor. These are unlike other render calls in that they have to represent what the server sent and they can't be batched with other updates.

I also changed the options to move the hydrationOptions to the top level since now these options are all hydration options.

I kept the createRoot one just temporarily to make it easier to codemod internally but I'm doing a follow up to delete.

As part of this I un-dried a couple of paths. ReactDOMLegacy was intended to be built on top of the new API but it didn't actually use those root APIs because there are special paths. It also doesn't actually use most of the common paths since all the options are ignored. It also made it hard to add only warnings for legacy only or new only code paths.

I also forked the create/hydrate paths because they're subtly different since now the options are different. The containers are also different because I now error for comment nodes during hydration which just doesn't work at all but eventually we'll error for all createRoot calls.

After some iteration it might make sense to break out some common paths but for now it's easier to iterate on the duplicates.

@facebook-github-bot facebook-github-bot added React Core Team Opened by a member of the React Core Team CLA Signed labels Jun 15, 2021
@sizebot
Copy link

sizebot commented Jun 15, 2021

Comparing: 9212d99...a8a3d8e

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 +0.26% 127.08 kB 127.40 kB +0.21% 40.74 kB 40.83 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.25% 129.89 kB 130.21 kB +0.15% 41.67 kB 41.73 kB
facebook-www/ReactDOM-prod.classic.js +0.22% 405.00 kB 405.89 kB +0.14% 74.92 kB 75.03 kB
facebook-www/ReactDOM-prod.modern.js +0.25% 393.35 kB 394.32 kB +0.19% 73.10 kB 73.24 kB
facebook-www/ReactDOMForked-prod.classic.js +0.22% 405.00 kB 405.89 kB +0.14% 74.93 kB 75.03 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable-semver/react-dom/cjs/react-dom.production.min.js +0.26% 127.08 kB 127.40 kB +0.21% 40.74 kB 40.83 kB
oss-stable/react-dom/cjs/react-dom.production.min.js +0.26% 127.08 kB 127.40 kB +0.21% 40.74 kB 40.83 kB
oss-stable-semver/react-dom/umd/react-dom.production.min.js +0.25% 127.06 kB 127.38 kB +0.18% 41.37 kB 41.45 kB
oss-stable/react-dom/umd/react-dom.production.min.js +0.25% 127.06 kB 127.38 kB +0.18% 41.37 kB 41.45 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.25% 129.89 kB 130.21 kB +0.15% 41.67 kB 41.73 kB
oss-experimental/react-dom/umd/react-dom.production.min.js +0.25% 129.85 kB 130.17 kB +0.21% 42.33 kB 42.42 kB
facebook-www/ReactDOM-prod.modern.js +0.25% 393.35 kB 394.32 kB +0.19% 73.10 kB 73.24 kB
facebook-www/ReactDOMForked-prod.modern.js +0.25% 393.35 kB 394.32 kB +0.18% 73.10 kB 73.24 kB
facebook-www/ReactDOMTesting-prod.modern.js +0.25% 385.61 kB 386.56 kB +0.16% 73.36 kB 73.48 kB
oss-stable-semver/react-dom/cjs/react-dom.profiling.min.js +0.25% 132.59 kB 132.92 kB +0.20% 42.31 kB 42.40 kB
oss-stable/react-dom/cjs/react-dom.profiling.min.js +0.25% 132.59 kB 132.92 kB +0.20% 42.31 kB 42.40 kB
oss-stable-semver/react-dom/umd/react-dom.profiling.min.js +0.24% 132.54 kB 132.87 kB +0.22% 42.97 kB 43.07 kB
oss-stable/react-dom/umd/react-dom.profiling.min.js +0.24% 132.54 kB 132.87 kB +0.22% 42.97 kB 43.07 kB
oss-experimental/react-dom/cjs/react-dom.profiling.min.js +0.24% 137.22 kB 137.55 kB +0.15% 43.87 kB 43.94 kB
oss-experimental/react-dom/umd/react-dom.profiling.min.js +0.23% 137.13 kB 137.45 kB +0.24% 44.48 kB 44.59 kB
facebook-www/ReactDOM-profiling.modern.js +0.23% 418.33 kB 419.30 kB +0.22% 77.36 kB 77.53 kB
facebook-www/ReactDOMForked-profiling.modern.js +0.23% 418.33 kB 419.30 kB +0.22% 77.36 kB 77.53 kB
facebook-www/ReactDOMTesting-prod.classic.js +0.22% 398.93 kB 399.82 kB +0.12% 75.53 kB 75.63 kB
facebook-www/ReactDOM-prod.classic.js +0.22% 405.00 kB 405.89 kB +0.14% 74.92 kB 75.03 kB
facebook-www/ReactDOMForked-prod.classic.js +0.22% 405.00 kB 405.89 kB +0.14% 74.93 kB 75.03 kB
facebook-www/ReactDOM-profiling.classic.js +0.21% 430.02 kB 430.92 kB +0.18% 79.14 kB 79.29 kB
facebook-www/ReactDOMForked-profiling.classic.js +0.21% 430.02 kB 430.92 kB +0.18% 79.15 kB 79.29 kB

Generated by 🚫 dangerJS against a8a3d8e

This adds a new top level API for hydrating a root. It takes the initial
children as part of its constructor. These are unlike other render calls
in that they have to represent what the server sent and they can't be
batched with other updates.

I also changed the options to move the hydrationOptions to the top level
since now these options are all hydration options.

I kept the createRoot one just temporarily to make it easier to codemod
internally but I'm doing a follow up to delete.

As part of this I un-dried a couple of paths. ReactDOMLegacy was intended
to be built on top of the new API but it didn't actually use those root
APIs because there are special paths. It also doesn't actually use most of
the commmon paths since all the options are ignored. It also made it hard
to add only warnings for legacy only or new only code paths.

I also forked the create/hydrate paths because they're subtly different
since now the options are different. The containers are also different
because I now error for comment nodes during hydration which just doesn't
work at all but eventually we'll error for all createRoot calls.

After some iteration it might make sense to break out some common paths but
for now it's easier to iterate on the duplicates.
@sebmarkbage sebmarkbage merged commit 7ec4c55 into facebook:master Jun 15, 2021
@tjallingt
Copy link
Contributor

tjallingt commented Jun 15, 2021

I think I saw an explanation for the new APIs in the reactwg but I can't find it now so; why is it ReactDOM.hydrateRoot(container, initialChildren, options): FiberRoot instead of FiberRoot#hydrate(initialChildren, options)?

Oh nevermind, its the same reason hydrate was an option of createRoot and not render. To hydrate a container the root needs to be created in some different way.

Then presumably you are separating these to allow code splitting of the parts that are different?

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.

5 participants