Disable legacy context

This enables the `disableLegacyContext` flag for web and React Native.
facebook · Mar 12, 2024 · ead2460 · ead2460
1 parent eb33bd7
commit ead2460
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 17 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js b/packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js
@@ -1112,6 +1112,7 @@ describe('ReactComponentLifeCycle', () => {
   });
 
   if (!require('shared/ReactFeatureFlags').disableModulePatternComponents) {
+    // @gate !disableLegacyContext
     it('calls effects on module-pattern component', async () => {
       const log = [];
 

diff --git a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
@@ -880,7 +880,6 @@ describe('ReactErrorBoundaries', () => {
   });
 
   // @gate !disableModulePatternComponents
-  // @gate !disableLegacyContext
   it('renders an error state if module-style context provider throws in componentWillMount', async () => {
     function BrokenComponentWillMountWithContext() {
       return {
@@ -901,23 +900,31 @@ describe('ReactErrorBoundaries', () => {
 
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);
-    await expect(
-      async () =>
-        await act(async () => {
-          root.render(
-            <ErrorBoundary>
-              <BrokenComponentWillMountWithContext />
-            </ErrorBoundary>,
-          );
-        }),
-    ).toErrorDev(
+
+    await expect(async () => {
+      await act(() => {
+        root.render(
+          <ErrorBoundary>
+            <BrokenComponentWillMountWithContext />
+          </ErrorBoundary>,
+        );
+      });
+    }).toErrorDev([
       'Warning: The <BrokenComponentWillMountWithContext /> component appears to be a function component that ' +
         'returns a class instance. ' +
         'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +
         "If you can't use a class try assigning the prototype on the function as a workaround. " +
         '`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +
         "Don't use an arrow function since it cannot be called with `new` by React.",
-    );
+      ...gate(flags =>
+        flags.disableLegacyContext
+          ? [
+              'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
+              'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
+            ]
+          : [],
+      ),
+    ]);
 
     expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
   });

diff --git a/packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js
@@ -859,14 +859,22 @@ describe('ReactLegacyErrorBoundaries', () => {
           </ErrorBoundary>,
           container,
         ),
-      ).toErrorDev(
+      ).toErrorDev([
         'Warning: The <BrokenComponentWillMountWithContext /> component appears to be a function component that ' +
           'returns a class instance. ' +
           'Change BrokenComponentWillMountWithContext to a class that extends React.Component instead. ' +
           "If you can't use a class try assigning the prototype on the function as a workaround. " +
           '`BrokenComponentWillMountWithContext.prototype = React.Component.prototype`. ' +
           "Don't use an arrow function since it cannot be called with `new` by React.",
-      );
+        ...gate(flags =>
+          flags.disableLegacyContext
+            ? [
+                'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
+                'Warning: BrokenComponentWillMountWithContext uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
+              ]
+            : [],
+        ),
+      ]);
       expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
     });
   }

diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -1782,6 +1782,14 @@ describe('ReactIncrementalErrorHandling', () => {
         "If you can't use a class try assigning the prototype on the function as a workaround. " +
         '`Provider.prototype = React.Component.prototype`. ' +
         "Don't use an arrow function since it cannot be called with `new` by React.",
+      ...gate(flags =>
+        flags.disableLegacyContext
+          ? [
+              'Warning: Provider uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
+              'Warning: Provider uses the legacy childContextTypes API which is no longer supported. Use React.createContext() instead.',
+            ]
+          : [],
+      ),
     ]);
   });
 

diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
@@ -140,8 +140,8 @@ export const transitionLaneExpirationMs = 5000;
 // -----------------------------------------------------------------------------
 const __NEXT_MAJOR__ = __EXPERIMENTAL__;
 
-// Not ready to break experimental yet.
-export const disableLegacyContext = false;
+// Removes legacy style context
+export const disableLegacyContext = __NEXT_MAJOR__;
 
 // Not ready to break experimental yet.
 // Disable javascript: URL strings in href for XSS protection.

diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -33,7 +33,6 @@ export const disableIEWorkarounds = true;
 export const enableScopeAPI = false;
 export const enableCreateEventHandleAPI = false;
 export const enableSuspenseCallback = false;
-export const disableLegacyContext = false;
 export const enableTrustedTypesIntegration = false;
 export const disableTextareaChildren = false;
 export const disableModulePatternComponents = false;
@@ -100,6 +99,7 @@ export const disableStringRefs = __NEXT_MAJOR__;
 export const enableReactTestRendererWarning = false;
 export const enableBigIntSupport = __NEXT_MAJOR__;
 export const disableLegacyMode = __NEXT_MAJOR__;
+export const disableLegacyContext = __NEXT_MAJOR__;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);