Support new hydrate API in latest react 18 alpha release by huozhi · Pull Request #26664 · vercel/next.js

huozhi · 2021-06-28T08:09:44Z

Fixes: #26663
ReactDOM hydration API changes: reactwg/react-18#5 (comment)

Bug

Related issues linked using fixes #number
Integration tests added

timneutkens

Should be good to land now 👍

ijjk · 2021-06-30T10:05:09Z

Failing test suites

Commit: 50bfd5c9d0bc322a685f1afc9295d3fb39bc5277

test/integration/build-output/test/index.test.js

Build Output > Basic Application Output > should not deviate from snapshot
Build Output > Basic Application Output (with experimental.gzipSize: false) > should not deviate from snapshot
Build Output > Basic Application Output (with experimental.gzipSize: true) > should not deviate from snapshot

Expand output

● Build Output › Basic Application Output (with experimental.gzipSize: true) › should not deviate from snapshot

expect(received).toBeCloseTo(expected, precision)

Expected: 20.2
Received: 20.1

Expected precision:    1
Expected difference: < 0.05
Received difference:   0.09999999999999787

  150 |           )
  151 |
> 152 |           expect(parseFloat(mainSize)).toBeCloseTo(gz ? 20.2 : 62.8, 1)
      |                                        ^
  153 |           expect(mainSize.endsWith('kB')).toBe(true)
  154 |
  155 |           expect(parseFloat(frameworkSize)).toBeCloseTo(gz ? 42.0 : 130, 1)

  at Object.<anonymous> (integration/build-output/test/index.test.js:152:40)

● Build Output › Basic Application Output (with experimental.gzipSize: false) › should not deviate from snapshot

expect(received).toBeCloseTo(expected, precision)

Expected: 62.8
Received: 62.7

Expected precision:    1
Expected difference: < 0.05
Received difference:   0.09999999999999432

  150 |           )
  151 |
> 152 |           expect(parseFloat(mainSize)).toBeCloseTo(gz ? 20.2 : 62.8, 1)
      |                                        ^
  153 |           expect(mainSize.endsWith('kB')).toBe(true)
  154 |
  155 |           expect(parseFloat(frameworkSize)).toBeCloseTo(gz ? 42.0 : 130, 1)

  at Object.<anonymous> (integration/build-output/test/index.test.js:152:40)

● Build Output › Basic Application Output › should not deviate from snapshot

expect(received).toBeCloseTo(expected, precision)

Expected: 20.2
Received: 20.1

Expected precision:    1
Expected difference: < 0.05
Received difference:   0.09999999999999787

  150 |           )
  151 |
> 152 |           expect(parseFloat(mainSize)).toBeCloseTo(gz ? 20.2 : 62.8, 1)
      |                                        ^
  153 |           expect(mainSize.endsWith('kB')).toBe(true)
  154 |
  155 |           expect(parseFloat(frameworkSize)).toBeCloseTo(gz ? 42.0 : 130, 1)

  at Object.<anonymous> (integration/build-output/test/index.test.js:152:40)

ijjk · 2021-06-30T10:56:14Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js react18-hydrate	Change
buildDuration	14s	13.9s	-84ms
buildDurationCached	3.5s	3.3s	-146ms
nodeModulesSize	49.2 MB	49.2 MB	⚠️ +363 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	huozhi/next.js react18-hydrate	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.633	2.639	⚠️ +0.01
/ avg req/sec	949.58	947.27	⚠️ -2.31
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.667	1.675	⚠️ +0.01
/error-in-render avg req/sec	1499.3	1492.68	⚠️ -6.62

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	huozhi/next.js react18-hydrate	Change
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	-6 B
webpack-HASH.js gzip	810 B	810 B	✓
Overall change	63 kB	63 kB	-6 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js react18-hydrate	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	huozhi/next.js react18-hydrate	Change
_app-HASH.js gzip	803 B	803 B	✓
_error-HASH.js gzip	3.17 kB	3.17 kB	✓
amp-HASH.js gzip	526 B	526 B	✓
css-HASH.js gzip	329 B	329 B	✓
hooks-HASH.js gzip	903 B	903 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.42 kB	8.42 kB	✓

Client Build Manifests

	vercel/next.js canary	huozhi/next.js react18-hydrate	Change
_buildManifest.js gzip	391 B	391 B	✓
Overall change	391 B	391 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	huozhi/next.js react18-hydrate	Change
index.html gzip	524 B	524 B	✓
link.html gzip	536 B	536 B	✓
withRouter.html gzip	516 B	515 B	-1 B
Overall change	1.58 kB	1.57 kB	-1 B

Diffs

Diff for main-HASH.js

@@ -1421,8 +1421,9 @@
         });
       }
 
-      var reactRoot = null;
-      var shouldHydrate = typeof _reactDom["default"].hydrate === "function";
+      var reactRoot = null; // On initial render a hydrate should always happen
+
+      var shouldHydrate = true;
 
       function renderReactElement(domEl, fn) {
         // mark start of hydrate/render

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-4bbd306c4351c0299964.js"
+      src="/_next/static/chunks/main-136b7587ff7b18118687.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-4bbd306c4351c0299964.js"
+      src="/_next/static/chunks/main-136b7587ff7b18118687.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-4bbd306c4351c0299964.js"
+      src="/_next/static/chunks/main-136b7587ff7b18118687.js"
       defer=""
     ></script>
     <script

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js react18-hydrate	Change
buildDuration	12.4s	12.3s	-77ms
buildDurationCached	4.9s	4.9s	-27ms
nodeModulesSize	49.2 MB	49.2 MB	⚠️ +363 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	huozhi/next.js react18-hydrate	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.619	2.638	⚠️ +0.02
/ avg req/sec	954.56	947.73	⚠️ -6.83
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.644	1.768	⚠️ +0.12
/error-in-render avg req/sec	1520.69	1413.65	⚠️ -107.04

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	huozhi/next.js react18-hydrate	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	41.8 kB	41.8 kB	✓
main-HASH.js gzip	7.99 kB	7.99 kB	-5 B
webpack-HASH.js gzip	757 B	757 B	✓
Overall change	63.9 kB	63.9 kB	-5 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js react18-hydrate	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	huozhi/next.js react18-hydrate	Change
_app-HASH.js gzip	1.07 kB	1.07 kB	✓
_error-HASH.js gzip	3.83 kB	3.83 kB	✓
amp-HASH.js gzip	531 B	531 B	✓
css-HASH.js gzip	333 B	333 B	✓
hooks-HASH.js gzip	910 B	910 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	295 B	295 B	✓
withRouter-HASH.js gzip	292 B	292 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	9.26 kB	9.26 kB	✓

Client Build Manifests

	vercel/next.js canary	huozhi/next.js react18-hydrate	Change
_buildManifest.js gzip	422 B	422 B	✓
Overall change	422 B	422 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	huozhi/next.js react18-hydrate	Change
index.html gzip	568 B	566 B	-2 B
link.html gzip	581 B	580 B	-1 B
withRouter.html gzip	561 B	560 B	-1 B
Overall change	1.71 kB	1.71 kB	-4 B

Diffs

Diff for main-HASH.js

@@ -1224,8 +1224,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
         });
       }
 
-      var reactRoot = null;
-      var shouldHydrate = typeof _reactDom["default"].hydrate === "function";
+      var reactRoot = null; // On initial render a hydrate should always happen
+
+      var shouldHydrate = true;
 
       function renderReactElement(domEl, fn) {
         // mark start of hydrate/render

Diff for index.html

@@ -23,7 +23,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-25e5b58c1b4bd1b5be7a.js"
+      src="/_next/static/chunks/main-4008960cdf4a16d81cc2.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -23,7 +23,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-25e5b58c1b4bd1b5be7a.js"
+      src="/_next/static/chunks/main-4008960cdf4a16d81cc2.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -23,7 +23,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-25e5b58c1b4bd1b5be7a.js"
+      src="/_next/static/chunks/main-4008960cdf4a16d81cc2.js"
       defer=""
     ></script>
     <script

Commit: 6cd4141

Remove unnecessary `React.Suspense` checks, as the minimum supported version is `react@>=17.0.1`. Also removes some files from the `react-18` integration test that are no longer necessary as of #26664.

* fix: react 18 new hydration API * support react 18 * compat latest react only, fix resolved version * fix tests * Some changes based on reactwg/react-18#5 * fix test Co-authored-by: Tim Neutkens <timneutkens@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Remove unnecessary `React.Suspense` checks, as the minimum supported version is `react@>=17.0.1`. Also removes some files from the `react-18` integration test that are no longer necessary as of vercel#26664.

fix: react 18 new hydration API

9704163

huozhi requested review from divmain, ijjk, lfades, shuding and timneutkens as code owners June 28, 2021 08:09

ijjk added the type: next label Jun 28, 2021

huozhi force-pushed the react18-hydrate branch from 45f431e to c9af1cc Compare June 28, 2021 08:17

This comment has been minimized.

Sign in to view

support react 18

85db7d6

huozhi force-pushed the react18-hydrate branch from c9af1cc to 85db7d6 Compare June 28, 2021 08:34

This comment has been minimized.

Sign in to view

timneutkens reviewed Jun 28, 2021

View reviewed changes

Comment thread packages/next/client/index.tsx Outdated

This comment has been minimized.

Sign in to view

compat latest react only, fix resolved version

bcffc83

This comment has been minimized.

Sign in to view

fix tests

c920437

This comment has been minimized.

Sign in to view

huozhi requested a review from timneutkens June 28, 2021 11:44

Some changes based on reactwg/react-18#5

8d741a7

timneutkens reviewed Jun 30, 2021

View reviewed changes

Comment thread packages/next/client/index.tsx

timneutkens reviewed Jun 30, 2021

View reviewed changes

Comment thread packages/next/client/index.tsx

timneutkens previously approved these changes Jun 30, 2021

View reviewed changes

Merge branch 'canary' into react18-hydrate

f8cb2fc

This comment has been minimized.

Sign in to view

fix test

213d155

huozhi dismissed timneutkens’s stale review via 213d155 June 30, 2021 09:33

timneutkens previously approved these changes Jun 30, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

Merge branch 'canary' into react18-hydrate

6cd4141

huozhi dismissed timneutkens’s stale review via 6cd4141 June 30, 2021 10:44

huozhi force-pushed the react18-hydrate branch from 50bfd5c to 6cd4141 Compare June 30, 2021 10:44

ijjk added the created-by: Next.js team PRs by the Next.js team. label Jun 30, 2021

timneutkens merged commit ddc0e79 into vercel:canary Jun 30, 2021

devknoll mentioned this pull request Jun 30, 2021

More React 17 clean up #26775

Merged

huozhi deleted the react18-hydrate branch July 6, 2021 10:39

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Support new hydrate API in latest react 18 alpha release#26664

Support new hydrate API in latest react 18 alpha release#26664
timneutkens merged 8 commits into
vercel:canaryfrom
huozhi:react18-hydrate

huozhi commented Jun 28, 2021

Uh oh!

This comment has been minimized.

This comment has been minimized.

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

Uh oh!

Uh oh!

timneutkens left a comment

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Jun 30, 2021

Uh oh!

ijjk commented Jun 30, 2021

Diffs

Diffs

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

huozhi commented Jun 28, 2021

Bug

Uh oh!

This comment has been minimized.

This comment has been minimized.

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

Uh oh!

Uh oh!

timneutkens left a comment

Choose a reason for hiding this comment

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Jun 30, 2021

Failing test suites

Uh oh!

ijjk commented Jun 30, 2021

Stats from current PR

Diffs

Diffs

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants