Add experimental config for React Mode #9207

devknoll · 2019-10-26T19:17:37Z

Allow opting in to experimental React modes using the reactMode option. Can be legacy, blocking, or concurrent. Defaults to legacy.

You're responsible for setting up the experimental version in your package.json.

ijjk · 2019-10-26T19:24:06Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
buildDuration	16.3s	16.4s	⚠️ +181ms
nodeModulesSize	48.7 MB	48.7 MB	⚠️ +1.83 kB

Client Bundles (main, webpack, commons)

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
main-HASH.js	16.6 kB	16.6 kB	✓
main-HASH.js gzip	5.86 kB	5.86 kB	✓
webpack-HASH.js	1.53 kB	1.53 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
16b1a7225520..b6ebb586e.js	19.8 kB	19.8 kB	✓
16b1a7225520..586e.js gzip	7.25 kB	7.25 kB	✓
4952ddcd88e7..bfe360fe6.js	10.5 kB	10.5 kB	✓
4952ddcd88e7..0fe6.js gzip	4.06 kB	4.06 kB	✓
commons.HASH.js	11.3 kB	11.3 kB	✓
commons.HASH.js gzip	4.23 kB	4.23 kB	✓
de003c3a9d30..9e9c1d310.js	28.6 kB	28.6 kB	✓
de003c3a9d30..d310.js gzip	10.8 kB	10.8 kB	✓
framework.1b..cdcfe1283.js	125 kB	125 kB	✓
framework.1b..1283.js gzip	39.4 kB	39.4 kB	✓
Overall change	214 kB	214 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
main-HASH.module.js	14 kB	14 kB	✓
main-HASH.module.js gzip	5.25 kB	5.25 kB	✓
webpack-HASH.module.js	1.53 kB	1.53 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
16b1a7225520..4c.module.js	15.9 kB	15.9 kB	✓
16b1a7225520..dule.js gzip	6.08 kB	6.08 kB	✓
4952ddcd88e7..4a.module.js	12.8 kB	12.8 kB	✓
4952ddcd88e7..dule.js gzip	4.75 kB	4.75 kB	✓
de003c3a9d30..c0.module.js	22.1 kB	22.1 kB	✓
de003c3a9d30..dule.js gzip	8.67 kB	8.67 kB	✓
framework.5b..d3.module.js	125 kB	125 kB	✓
framework.5b..dule.js gzip	39.4 kB	39.4 kB	✓
Overall change	192 kB	192 kB	✓

Client Pages

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
_app.js	1.63 kB	1.63 kB	✓
_app.js gzip	788 B	788 B	✓
_error.js	12.3 kB	12.3 kB	✓
_error.js gzip	4.79 kB	4.79 kB	✓
hooks.js	1.92 kB	1.92 kB	✓
hooks.js gzip	941 B	941 B	✓
index.js	318 B	318 B	✓
index.js gzip	222 B	222 B	✓
link.js	5.81 kB	5.81 kB	✓
link.js gzip	2.56 kB	2.56 kB	✓
routerDirect.js	413 B	413 B	✓
routerDirect.js gzip	285 B	285 B	✓
withRouter.js	423 B	423 B	✓
withRouter.js gzip	284 B	284 B	✓
Overall change	22.8 kB	22.8 kB	✓

Client Pages Modern

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
_app.module.js	1.53 kB	1.53 kB	✓
_app.module.js gzip	749 B	749 B	✓
_error.module.js	10.5 kB	10.5 kB	✓
_error.module.js gzip	4.26 kB	4.26 kB	✓
hooks.module.js	1.52 kB	1.52 kB	✓
hooks.module.js gzip	792 B	792 B	✓
index.module.js	292 B	292 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js	5.47 kB	5.47 kB	✓
link.module.js gzip	2.46 kB	2.46 kB	✓
routerDirect.module.js	399 B	399 B	✓
routerDirect..dule.js gzip	285 B	285 B	✓
withRouter.module.js	409 B	409 B	✓
withRouter.m..dule.js gzip	282 B	282 B	✓
Overall change	20.1 kB	20.1 kB	✓

Client Build Manifests

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
_buildManifest.js	244 B	244 B	✓
_buildManifest.js gzip	200 B	200 B	✓
_buildManifest.module.js	251 B	251 B	✓
_buildManife..dule.js gzip	209 B	209 B	✓
Overall change	495 B	495 B	✓

Rendered Page Sizes

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
index.html	3.94 kB	3.94 kB	✓
index.html gzip	1 kB	1 kB	⚠️ +2 B
link.html	4.47 kB	4.47 kB	✓
link.html gzip	1.08 kB	1.08 kB	⚠️ +1 B
withRouter.html	4.47 kB	4.47 kB	✓
withRouter.html gzip	1.07 kB	1.07 kB	⚠️ +2 B
Overall change	12.9 kB	12.9 kB	✓

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
buildDuration	17.1s	16.9s	-230ms
nodeModulesSize	48.7 MB	48.7 MB	⚠️ +1.83 kB

Client Bundles (main, webpack, commons)

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
main-HASH.js	16.6 kB	16.6 kB	✓
main-HASH.js gzip	5.86 kB	5.86 kB	✓
webpack-HASH.js	1.53 kB	1.53 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
16b1a7225520..b6ebb586e.js	19.8 kB	19.8 kB	✓
16b1a7225520..586e.js gzip	7.25 kB	7.25 kB	✓
4952ddcd88e7..bfe360fe6.js	10.5 kB	10.5 kB	✓
4952ddcd88e7..0fe6.js gzip	4.06 kB	4.06 kB	✓
commons.HASH.js	11.3 kB	11.3 kB	✓
commons.HASH.js gzip	4.23 kB	4.23 kB	✓
de003c3a9d30..9e9c1d310.js	28.6 kB	28.6 kB	✓
de003c3a9d30..d310.js gzip	10.8 kB	10.8 kB	✓
framework.1b..cdcfe1283.js	125 kB	125 kB	✓
framework.1b..1283.js gzip	39.4 kB	39.4 kB	✓
Overall change	214 kB	214 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
main-HASH.module.js	14 kB	14 kB	✓
main-HASH.module.js gzip	5.25 kB	5.25 kB	✓
webpack-HASH.module.js	1.53 kB	1.53 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
16b1a7225520..4c.module.js	15.9 kB	15.9 kB	✓
16b1a7225520..dule.js gzip	6.08 kB	6.08 kB	✓
4952ddcd88e7..4a.module.js	12.8 kB	12.8 kB	✓
4952ddcd88e7..dule.js gzip	4.75 kB	4.75 kB	✓
de003c3a9d30..c0.module.js	22.1 kB	22.1 kB	✓
de003c3a9d30..dule.js gzip	8.67 kB	8.67 kB	✓
framework.5b..d3.module.js	125 kB	125 kB	✓
framework.5b..dule.js gzip	39.4 kB	39.4 kB	✓
Overall change	192 kB	192 kB	✓

Client Pages

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
_app.js	1.63 kB	1.63 kB	✓
_app.js gzip	788 B	788 B	✓
_error.js	12.3 kB	12.3 kB	✓
_error.js gzip	4.79 kB	4.79 kB	✓
hooks.js	1.92 kB	1.92 kB	✓
hooks.js gzip	941 B	941 B	✓
index.js	318 B	318 B	✓
index.js gzip	222 B	222 B	✓
link.js	5.81 kB	5.81 kB	✓
link.js gzip	2.56 kB	2.56 kB	✓
routerDirect.js	413 B	413 B	✓
routerDirect.js gzip	285 B	285 B	✓
withRouter.js	423 B	423 B	✓
withRouter.js gzip	284 B	284 B	✓
Overall change	22.8 kB	22.8 kB	✓

Client Pages Modern

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
_app.module.js	1.53 kB	1.53 kB	✓
_app.module.js gzip	749 B	749 B	✓
_error.module.js	10.5 kB	10.5 kB	✓
_error.module.js gzip	4.26 kB	4.26 kB	✓
hooks.module.js	1.52 kB	1.52 kB	✓
hooks.module.js gzip	792 B	792 B	✓
index.module.js	292 B	292 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js	5.47 kB	5.47 kB	✓
link.module.js gzip	2.46 kB	2.46 kB	✓
routerDirect.module.js	399 B	399 B	✓
routerDirect..dule.js gzip	285 B	285 B	✓
withRouter.module.js	409 B	409 B	✓
withRouter.m..dule.js gzip	282 B	282 B	✓
Overall change	20.1 kB	20.1 kB	✓

Client Build Manifests

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
_buildManifest.js	244 B	244 B	✓
_buildManifest.js gzip	200 B	200 B	✓
_buildManifest.module.js	251 B	251 B	✓
_buildManife..dule.js gzip	209 B	209 B	✓
Overall change	495 B	495 B	✓

Serverless bundles

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
_error.js	241 kB	241 kB	✓
_error.js gzip	64.3 kB	64.3 kB	⚠️ +9 B
hooks.html	4.08 kB	4.08 kB	✓
hooks.html gzip	1.03 kB	1.03 kB	⚠️ +3 B
index.js	241 kB	241 kB	✓
index.js gzip	64.4 kB	64.4 kB	⚠️ +8 B
link.js	273 kB	273 kB	✓
link.js gzip	73.4 kB	73.4 kB	⚠️ +7 B
routerDirect.js	267 kB	267 kB	✓
routerDirect.js gzip	71.4 kB	71.4 kB	⚠️ +8 B
withRouter.js	266 kB	266 kB	✓
withRouter.js gzip	71.5 kB	71.5 kB	⚠️ +8 B
Overall change	1.29 MB	1.29 MB	✓

Commit: 4495519

…act-mode

hannesj · 2019-10-28T08:46:09Z

Should strict be added as an option? It would use the legacy mode, but wrap the react element with a StrictMode component. This would make it easy to check for compliance with concurrent mode.

timneutkens · 2019-10-28T09:15:51Z

@hannesj that's already covered by #9161

ijjk · 2019-10-30T13:32:45Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
buildDuration	14.1s	14.3s	⚠️ +201ms
nodeModulesSize	48.4 MB	48.4 MB	⚠️ +1.88 kB

Client Bundles (main, webpack, commons)

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
main-HASH.js	16.6 kB	16.6 kB	✓
main-HASH.js gzip	5.85 kB	5.85 kB	✓
webpack-HASH.js	1.53 kB	1.53 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
16b1a7225520..63e75d588.js	19.7 kB	19.7 kB	✓
16b1a7225520..d588.js gzip	7.23 kB	7.23 kB	✓
4952ddcd88e7..bfe360fe6.js	10.5 kB	10.5 kB	✓
4952ddcd88e7..0fe6.js gzip	4.06 kB	4.06 kB	✓
commons.HASH.js	11.3 kB	11.3 kB	✓
commons.HASH.js gzip	4.23 kB	4.23 kB	✓
de003c3a9d30..9e9c1d310.js	28.6 kB	28.6 kB	✓
de003c3a9d30..d310.js gzip	10.8 kB	10.8 kB	✓
framework.1b..cdcfe1283.js	125 kB	125 kB	✓
framework.1b..1283.js gzip	39.4 kB	39.4 kB	✓
Overall change	214 kB	214 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
main-HASH.module.js	14 kB	14 kB	✓
main-HASH.module.js gzip	5.25 kB	5.25 kB	✓
webpack-HASH.module.js	1.53 kB	1.53 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
16b1a7225520..51.module.js	15.8 kB	15.8 kB	✓
16b1a7225520..dule.js gzip	6.06 kB	6.06 kB	✓
4952ddcd88e7..4a.module.js	12.8 kB	12.8 kB	✓
4952ddcd88e7..dule.js gzip	4.75 kB	4.75 kB	✓
de003c3a9d30..c0.module.js	22.1 kB	22.1 kB	✓
de003c3a9d30..dule.js gzip	8.67 kB	8.67 kB	✓
framework.5b..d3.module.js	125 kB	125 kB	✓
framework.5b..dule.js gzip	39.4 kB	39.4 kB	✓
Overall change	192 kB	192 kB	✓

Client Pages

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
_app.js	1.63 kB	1.63 kB	✓
_app.js gzip	788 B	788 B	✓
_error.js	12.3 kB	12.3 kB	✓
_error.js gzip	4.79 kB	4.79 kB	✓
hooks.js	1.92 kB	1.92 kB	✓
hooks.js gzip	941 B	941 B	✓
index.js	318 B	318 B	✓
index.js gzip	222 B	222 B	✓
link.js	5.81 kB	5.81 kB	✓
link.js gzip	2.56 kB	2.56 kB	✓
routerDirect.js	413 B	413 B	✓
routerDirect.js gzip	285 B	285 B	✓
withRouter.js	423 B	423 B	✓
withRouter.js gzip	284 B	284 B	✓
Overall change	22.8 kB	22.8 kB	✓

Client Pages Modern

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
_app.module.js	1.53 kB	1.53 kB	✓
_app.module.js gzip	749 B	749 B	✓
_error.module.js	10.5 kB	10.5 kB	✓
_error.module.js gzip	4.26 kB	4.26 kB	✓
hooks.module.js	1.52 kB	1.52 kB	✓
hooks.module.js gzip	792 B	792 B	✓
index.module.js	292 B	292 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js	5.47 kB	5.47 kB	✓
link.module.js gzip	2.46 kB	2.46 kB	✓
routerDirect.module.js	399 B	399 B	✓
routerDirect..dule.js gzip	285 B	285 B	✓
withRouter.module.js	409 B	409 B	✓
withRouter.m..dule.js gzip	282 B	282 B	✓
Overall change	20.1 kB	20.1 kB	✓

Client Build Manifests

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
_buildManifest.js	244 B	244 B	✓
_buildManifest.js gzip	199 B	199 B	✓
_buildManifest.module.js	251 B	251 B	✓
_buildManife..dule.js gzip	210 B	210 B	✓
Overall change	495 B	495 B	✓

Rendered Page Sizes

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
index.html	3.94 kB	3.94 kB	✓
index.html gzip	1 kB	1 kB	✓
link.html	4.47 kB	4.47 kB	✓
link.html gzip	1.08 kB	1.08 kB	-1 B
withRouter.html	4.47 kB	4.47 kB	✓
withRouter.html gzip	1.07 kB	1.07 kB	✓
Overall change	12.9 kB	12.9 kB	✓

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
buildDuration	14.5s	14.6s	⚠️ +69ms
nodeModulesSize	48.4 MB	48.4 MB	⚠️ +1.88 kB

Client Bundles (main, webpack, commons)

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
main-HASH.js	16.6 kB	16.6 kB	✓
main-HASH.js gzip	5.85 kB	5.85 kB	✓
webpack-HASH.js	1.53 kB	1.53 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
16b1a7225520..63e75d588.js	19.7 kB	19.7 kB	✓
16b1a7225520..d588.js gzip	7.23 kB	7.23 kB	✓
4952ddcd88e7..bfe360fe6.js	10.5 kB	10.5 kB	✓
4952ddcd88e7..0fe6.js gzip	4.06 kB	4.06 kB	✓
commons.HASH.js	11.3 kB	11.3 kB	✓
commons.HASH.js gzip	4.23 kB	4.23 kB	✓
de003c3a9d30..9e9c1d310.js	28.6 kB	28.6 kB	✓
de003c3a9d30..d310.js gzip	10.8 kB	10.8 kB	✓
framework.1b..cdcfe1283.js	125 kB	125 kB	✓
framework.1b..1283.js gzip	39.4 kB	39.4 kB	✓
Overall change	214 kB	214 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
main-HASH.module.js	14 kB	14 kB	✓
main-HASH.module.js gzip	5.25 kB	5.25 kB	✓
webpack-HASH.module.js	1.53 kB	1.53 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
16b1a7225520..51.module.js	15.8 kB	15.8 kB	✓
16b1a7225520..dule.js gzip	6.06 kB	6.06 kB	✓
4952ddcd88e7..4a.module.js	12.8 kB	12.8 kB	✓
4952ddcd88e7..dule.js gzip	4.75 kB	4.75 kB	✓
de003c3a9d30..c0.module.js	22.1 kB	22.1 kB	✓
de003c3a9d30..dule.js gzip	8.67 kB	8.67 kB	✓
framework.5b..d3.module.js	125 kB	125 kB	✓
framework.5b..dule.js gzip	39.4 kB	39.4 kB	✓
Overall change	192 kB	192 kB	✓

Client Pages

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
_app.js	1.63 kB	1.63 kB	✓
_app.js gzip	788 B	788 B	✓
_error.js	12.3 kB	12.3 kB	✓
_error.js gzip	4.79 kB	4.79 kB	✓
hooks.js	1.92 kB	1.92 kB	✓
hooks.js gzip	941 B	941 B	✓
index.js	318 B	318 B	✓
index.js gzip	222 B	222 B	✓
link.js	5.81 kB	5.81 kB	✓
link.js gzip	2.56 kB	2.56 kB	✓
routerDirect.js	413 B	413 B	✓
routerDirect.js gzip	285 B	285 B	✓
withRouter.js	423 B	423 B	✓
withRouter.js gzip	284 B	284 B	✓
Overall change	22.8 kB	22.8 kB	✓

Client Pages Modern

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
_app.module.js	1.53 kB	1.53 kB	✓
_app.module.js gzip	749 B	749 B	✓
_error.module.js	10.5 kB	10.5 kB	✓
_error.module.js gzip	4.26 kB	4.26 kB	✓
hooks.module.js	1.52 kB	1.52 kB	✓
hooks.module.js gzip	792 B	792 B	✓
index.module.js	292 B	292 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js	5.47 kB	5.47 kB	✓
link.module.js gzip	2.46 kB	2.46 kB	✓
routerDirect.module.js	399 B	399 B	✓
routerDirect..dule.js gzip	285 B	285 B	✓
withRouter.module.js	409 B	409 B	✓
withRouter.m..dule.js gzip	282 B	282 B	✓
Overall change	20.1 kB	20.1 kB	✓

Client Build Manifests

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
_buildManifest.js	244 B	244 B	✓
_buildManifest.js gzip	199 B	199 B	✓
_buildManifest.module.js	251 B	251 B	✓
_buildManife..dule.js gzip	210 B	210 B	✓
Overall change	495 B	495 B	✓

Serverless bundles

	zeit/next.js canary	devknoll/next.js experimental-react-mode	Change
_error.js	241 kB	241 kB	✓
_error.js gzip	64.4 kB	64.4 kB	⚠️ +1 B
hooks.html	4.08 kB	4.08 kB	✓
hooks.html gzip	1.03 kB	1.03 kB	⚠️ +4 B
index.js	241 kB	241 kB	✓
index.js gzip	64.5 kB	64.5 kB	⚠️ +1 B
link.js	274 kB	274 kB	✓
link.js gzip	73.5 kB	73.5 kB	✓
routerDirect.js	267 kB	267 kB	✓
routerDirect.js gzip	71.5 kB	71.5 kB	✓
withRouter.js	267 kB	267 kB	✓
withRouter.js gzip	71.6 kB	71.6 kB	⚠️ +1 B
Overall change	1.29 MB	1.29 MB	✓

Commit: 2fd1c63

Add experimental config for React Mode

4495519

devknoll marked this pull request as ready for review October 26, 2019 19:44

devknoll requested review from ijjk, lfades, Timer and timneutkens as code owners October 26, 2019 19:44

timneutkens approved these changes Oct 26, 2019

View reviewed changes

devknoll added 3 commits October 26, 2019 20:01

Use latest types

29414e9

Use latest types

36d13d7

Merge branch 'canary' of github.com:zeit/next.js into experimental-re…

c50d4ec

…act-mode

Timer added this to the 9.1.3 milestone Oct 27, 2019

Timer added the Type: Enhancement label Oct 27, 2019

Merge branch 'canary' into experimental-react-mode

2fd1c63

Timer added the ready to land label Oct 30, 2019

Timer approved these changes Oct 30, 2019

View reviewed changes

Timer merged commit f632567 into vercel:canary Oct 30, 2019

This was referenced Nov 19, 2019

[Snyk] Upgrade next from 9.1.2 to 9.1.3 ndom91/newtelco-next-maintenance-mgmt#10

Merged

[Snyk] Upgrade next from 9.0.4 to 9.1.3 ajesse11x/now-examples#17

Open

thuringia mentioned this pull request Dec 16, 2019

Partial Hydration #9475

Closed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add experimental config for React Mode #9207

Add experimental config for React Mode #9207

devknoll commented Oct 26, 2019

ijjk commented Oct 26, 2019

hannesj commented Oct 28, 2019

timneutkens commented Oct 28, 2019

ijjk commented Oct 30, 2019

Add experimental config for React Mode #9207

Add experimental config for React Mode #9207

Conversation

devknoll commented Oct 26, 2019

ijjk commented Oct 26, 2019

Stats from current PR

hannesj commented Oct 28, 2019

timneutkens commented Oct 28, 2019

ijjk commented Oct 30, 2019

Stats from current PR