[DOM] disable legacy mode behind flag #28468

gnoff · 2024-02-29T00:57:30Z

Adds a flag to disable legacy mode. Currently this flag is used to cause legacy mode apis like render and hydrate to throw. This change also removes render, hydrate, unmountComponentAtNode, and unstable_renderSubtreeIntoContainer from the experiemntal entrypoint. Right now for Meta builds this flag is off (legacy mode is still supported). In OSS builds this flag matches NEXT_MAJOR which means it currently is on in experiemental. This means that after merging legacy mode is effectively removed from experimental builds. While this is a breaking change, experimental builds are not stable and users can pin to older versions or update their use of react-dom to no longer use legacy mode APIs.

gnoff

Most of this diff is updates to tests to disable tests that are exclusively asserting legacy behavior. There are a few instances where the test was not asserting legacy behavior and I just updated the test to not rely upon legacy roots

gnoff · 2024-02-29T00:57:54Z

packages/react-dom/index.experimental.js

-  hydrate,
-  render,
-  unmountComponentAtNode,
  unstable_batchedUpdates,
-  unstable_renderSubtreeIntoContainer,


Here we remove the apis from experimental entrypoint

gnoff · 2024-02-29T00:59:10Z

packages/react-dom/src/client/ReactDOMLegacy.js

+  if (disableLegacyMode) {
+    if (__DEV__) {
+      console.error(
+        'ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead',
+      );
+    }
+    throw new Error('ReactDOM: Unsupported Legacy Mode API.');
+  }


As an extra precaution this interrupts the hydrate and render APIs. In practice this should be unobservable but if the flag were turned on without a corresponding change in the entrypoints it would at least prevent relying on the functions that can create legacy roots

gnoff · 2024-02-29T01:02:23Z

supercedes: #27596

I took a slightly different approach but I don't think we need specific error messages for each removed API, we just want to remove them so they are no longer defined in builds that do not support legacy mode. We can't land this in Canary until canary is on React 19

react-sizebot · 2024-02-29T01:08:15Z

Comparing: 034130c...d0e460d

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	=	176.93 kB	176.93 kB	=	55.14 kB	55.14 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	179.07 kB	177.46 kB	=	55.82 kB	55.45 kB
facebook-www/ReactDOM-prod.classic.js	=	594.04 kB	594.04 kB	=	104.94 kB	104.94 kB
facebook-www/ReactDOM-prod.modern.js	=	577.32 kB	577.32 kB	=	101.96 kB	101.96 kB
test_utils/ReactAllWarnings.js	Deleted	66.32 kB	0.00 kB	Deleted	16.26 kB	0.00 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.profiling.js	=	1,004.68 kB	999.15 kB	=	223.59 kB	222.74 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.production.js	=	980.87 kB	975.34 kB	=	220.56 kB	219.72 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	962.89 kB	957.36 kB	=	216.06 kB	215.22 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.development.js	=	1,369.68 kB	1,358.19 kB	=	302.50 kB	300.53 kB
oss-experimental/react-dom/umd/react-dom.profiling.min.js	=	187.80 kB	186.22 kB	=	58.48 kB	58.08 kB
oss-experimental/react-dom/umd/react-dom.development.js	=	1,416.84 kB	1,404.86 kB	=	301.27 kB	299.26 kB
oss-experimental/react-dom/cjs/react-dom.development.js	=	1,351.82 kB	1,340.34 kB	=	298.24 kB	296.25 kB
oss-experimental/react-dom/cjs/react-dom.profiling.min.js	=	188.54 kB	186.94 kB	=	58.17 kB	57.82 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.production.min.js	=	185.12 kB	183.51 kB	=	58.10 kB	57.72 kB
oss-experimental/react-dom/umd/react-dom.production.min.js	=	178.77 kB	177.19 kB	=	56.13 kB	55.74 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	179.07 kB	177.46 kB	=	55.82 kB	55.45 kB
test_utils/ReactAllWarnings.js	Deleted	66.32 kB	0.00 kB	Deleted	16.26 kB	0.00 kB

Generated by 🚫 dangerJS against d0e460d

gnoff · 2024-02-29T16:18:44Z

packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js

-      componentDidMount() {
-        expect(function () {
-          renderSubtreeIntoContainer(<Parent />, <Component />, portal);
-        }).toThrowError('parentComponentmust be a valid React Component');
-      }


This test has been a noop for 7 years so I removed it. If we want to add a proper test for this warning we need to construct it differently

eps1lon · 2024-03-01T06:21:37Z

packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js

+  // This test should be convertable to createRoot but the allScheduledTypes assertions are no longer the same
+  // So I'm leaving it in legacy mode for now and just disabling if legacy mode is turned off
+  // @gate !disableLegacyMode


This was my latest finding regarding the change of scheduler types: #28330 (comment)

Haven't looked deeper into it.

…use legacy mode apis like render and hydrate to throw. This change also removes render, hydrate, unmountComponentAtNode, and unstable_renderSubtreeIntoContainer from the experiemntal entrypoint. Right now for Meta builds this flag is off (legacy mode is still supported). In OSS builds this flag matches __NEXT_MAJOR__ which means it currently is on in experiemental. This means that after merging legacy mode is effectively removed from experimental builds. While this is a breaking change, experimental builds are not stable and users can pin to older versions or update their use of react-dom to no longer use legacy mode APIs.

Adds a flag to disable legacy mode. Currently this flag is used to cause legacy mode apis like render and hydrate to throw. This change also removes render, hydrate, unmountComponentAtNode, and unstable_renderSubtreeIntoContainer from the experiemntal entrypoint. Right now for Meta builds this flag is off (legacy mode is still supported). In OSS builds this flag matches __NEXT_MAJOR__ which means it currently is on in experiemental. This means that after merging legacy mode is effectively removed from experimental builds. While this is a breaking change, experimental builds are not stable and users can pin to older versions or update their use of react-dom to no longer use legacy mode APIs. DiffTrain build for [1c02b9d](1c02b9d)

* feat[devtools]: symbolicate source for inspected element ([hoxyq](https://github.com/hoxyq) in [#28471](#28471)) * refactor[devtools]: lazily define source for fiber based on component stacks ([hoxyq](https://github.com/hoxyq) in [#28351](#28351)) * fix[devtools/tree/element]: onClick -> onMouseDown to handle first click correctly ([hoxyq](https://github.com/hoxyq) in [#28486](#28486)) * [DOM] disable legacy mode behind flag ([gnoff](https://github.com/gnoff) in [#28468](#28468)) * Fix Broken Links In Documentation ([justindhillon](https://github.com/justindhillon) in [#28321](#28321)) * Update /link URLs to react.dev ([rickhanlonii](https://github.com/rickhanlonii) in [#28477](#28477)) * [tests] add support for @GATE pragma ([gnoff](https://github.com/gnoff) in [#28479](#28479)) * Devtools: Unwrap Promise in useFormState ([eps1lon](https://github.com/eps1lon) in [#28319](#28319)) * Add support for rendering BigInt ([eps1lon](https://github.com/eps1lon) in [#24580](#24580)) * Include server component names in the componentStack in DEV ([sebmarkbage](https://github.com/sebmarkbage) in [#28415](#28415))

Adds a flag to disable legacy mode. Currently this flag is used to cause legacy mode apis like render and hydrate to throw. This change also removes render, hydrate, unmountComponentAtNode, and unstable_renderSubtreeIntoContainer from the experiemntal entrypoint. Right now for Meta builds this flag is off (legacy mode is still supported). In OSS builds this flag matches __NEXT_MAJOR__ which means it currently is on in experiemental. This means that after merging legacy mode is effectively removed from experimental builds. While this is a breaking change, experimental builds are not stable and users can pin to older versions or update their use of react-dom to no longer use legacy mode APIs.

* feat[devtools]: symbolicate source for inspected element ([hoxyq](https://github.com/hoxyq) in [facebook#28471](facebook#28471)) * refactor[devtools]: lazily define source for fiber based on component stacks ([hoxyq](https://github.com/hoxyq) in [facebook#28351](facebook#28351)) * fix[devtools/tree/element]: onClick -> onMouseDown to handle first click correctly ([hoxyq](https://github.com/hoxyq) in [facebook#28486](facebook#28486)) * [DOM] disable legacy mode behind flag ([gnoff](https://github.com/gnoff) in [facebook#28468](facebook#28468)) * Fix Broken Links In Documentation ([justindhillon](https://github.com/justindhillon) in [facebook#28321](facebook#28321)) * Update /link URLs to react.dev ([rickhanlonii](https://github.com/rickhanlonii) in [facebook#28477](facebook#28477)) * [tests] add support for @GATE pragma ([gnoff](https://github.com/gnoff) in [facebook#28479](facebook#28479)) * Devtools: Unwrap Promise in useFormState ([eps1lon](https://github.com/eps1lon) in [facebook#28319](facebook#28319)) * Add support for rendering BigInt ([eps1lon](https://github.com/eps1lon) in [facebook#24580](facebook#24580)) * Include server component names in the componentStack in DEV ([sebmarkbage](https://github.com/sebmarkbage) in [facebook#28415](facebook#28415))

Adds a flag to disable legacy mode. Currently this flag is used to cause legacy mode apis like render and hydrate to throw. This change also removes render, hydrate, unmountComponentAtNode, and unstable_renderSubtreeIntoContainer from the experiemntal entrypoint. Right now for Meta builds this flag is off (legacy mode is still supported). In OSS builds this flag matches __NEXT_MAJOR__ which means it currently is on in experiemental. This means that after merging legacy mode is effectively removed from experimental builds. While this is a breaking change, experimental builds are not stable and users can pin to older versions or update their use of react-dom to no longer use legacy mode APIs. DiffTrain build for commit 1c02b9d.

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Feb 29, 2024

gnoff commented Feb 29, 2024

View reviewed changes

gnoff requested a review from acdlite February 29, 2024 01:01

gnoff force-pushed the flag-legacy-mode branch from a913625 to 789d1cf Compare February 29, 2024 01:05

acdlite approved these changes Feb 29, 2024

View reviewed changes

gnoff force-pushed the flag-legacy-mode branch from 789d1cf to dbdf4ca Compare February 29, 2024 16:16

gnoff commented Feb 29, 2024

View reviewed changes

gnoff force-pushed the flag-legacy-mode branch from cd91f70 to 4ede68e Compare March 1, 2024 05:48

eps1lon reviewed Mar 1, 2024

View reviewed changes

gnoff added 2 commits March 4, 2024 08:06

Add gates to devtools tests using legacy mode

d0e460d

gnoff force-pushed the flag-legacy-mode branch from 4ede68e to d0e460d Compare March 4, 2024 16:07

gnoff merged commit 1c02b9d into facebook:main Mar 4, 2024
38 checks passed

gnoff deleted the flag-legacy-mode branch March 4, 2024 16:19

hoxyq mentioned this pull request Mar 5, 2024

React DevTools 5.0.1 -> 5.0.2 #28496

Merged

ztanner mentioned this pull request Mar 18, 2024

Update React from 6c3b8dbfe to a4939017f vercel/next.js#63413

Closed

gnoff mentioned this pull request Mar 25, 2024

Update React from 14898b6a9 to e373190fa vercel/next.js#63685

Closed

ztanner mentioned this pull request Apr 2, 2024

Update React from 14898b6a9 to a870b2d54 vercel/next.js#63976

Closed

eps1lon mentioned this pull request Apr 19, 2024

Update React from 14898b6a9 to c3048aab4 vercel/next.js#64798

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DOM] disable legacy mode behind flag #28468

[DOM] disable legacy mode behind flag #28468

gnoff commented Feb 29, 2024

gnoff left a comment

gnoff Feb 29, 2024

gnoff Feb 29, 2024

gnoff commented Feb 29, 2024

react-sizebot commented Feb 29, 2024 •

edited

Loading

gnoff Feb 29, 2024

eps1lon Mar 1, 2024

[DOM] disable legacy mode behind flag #28468

[DOM] disable legacy mode behind flag #28468

Conversation

gnoff commented Feb 29, 2024

gnoff left a comment

Choose a reason for hiding this comment

gnoff Feb 29, 2024

Choose a reason for hiding this comment

gnoff Feb 29, 2024

Choose a reason for hiding this comment

gnoff commented Feb 29, 2024

react-sizebot commented Feb 29, 2024 • edited Loading

Critical size changes

Significant size changes

gnoff Feb 29, 2024

Choose a reason for hiding this comment

eps1lon Mar 1, 2024

Choose a reason for hiding this comment

react-sizebot commented Feb 29, 2024 •

edited

Loading