Enable warning for defaultProps on function components for everyone (f…

…acebook#25699) This also fixes a gap where were weren't warning on memo components.
mofeiZ · Nov 17, 2022 · fe27ef4 · fe27ef4
1 parent 1d39f1e
commit fe27ef4
Show file tree

Hide file tree

Showing 17 changed files with 209 additions and 79 deletions.
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -898,7 +898,11 @@ describe('ReactHooksInspectionIntegration', () => {
 
     await LazyFoo;
 
-    Scheduler.unstable_flushAll();
+    expect(() => {
+      Scheduler.unstable_flushAll();
+    }).toErrorDev([
+      'Foo: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.',
+    ]);
 
     const childFiber = renderer.root._currentFiber();
     const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -302,6 +302,18 @@ describe('ReactDOMFizzServer', () => {
   }
 
   it('should asynchronously load a lazy component', async () => {
+    const originalConsoleError = console.error;
+    const mockError = jest.fn();
+    console.error = (...args) => {
+      if (args.length > 1) {
+        if (typeof args[1] === 'object') {
+          mockError(args[0].split('\n')[0]);
+          return;
+        }
+      }
+      mockError(...args.map(normalizeCodeLocInfo));
+    };
+
     let resolveA;
     const LazyA = React.lazy(() => {
       return new Promise(r => {
@@ -324,48 +336,66 @@ describe('ReactDOMFizzServer', () => {
       punctuation: '!',
     };
 
-    await act(async () => {
-      const {pipe} = renderToPipeableStream(
-        <div>
-          <div>
-            <Suspense fallback={<Text text="Loading..." />}>
-              <LazyA text="Hello" />
-            </Suspense>
-          </div>
+    try {
+      await act(async () => {
+        const {pipe} = renderToPipeableStream(
           <div>
-            <Suspense fallback={<Text text="Loading..." />}>
-              <LazyB text="world" />
-            </Suspense>
-          </div>
+            <div>
+              <Suspense fallback={<Text text="Loading..." />}>
+                <LazyA text="Hello" />
+              </Suspense>
+            </div>
+            <div>
+              <Suspense fallback={<Text text="Loading..." />}>
+                <LazyB text="world" />
+              </Suspense>
+            </div>
+          </div>,
+        );
+        pipe(writable);
+      });
+
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <div>Loading...</div>
+          <div>Loading...</div>
+        </div>,
+      );
+      await act(async () => {
+        resolveA({default: Text});
+      });
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <div>Hello</div>
+          <div>Loading...</div>
+        </div>,
+      );
+      await act(async () => {
+        resolveB({default: TextWithPunctuation});
+      });
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <div>Hello</div>
+          <div>world!</div>
         </div>,
       );
-      pipe(writable);
-    });
 
-    expect(getVisibleChildren(container)).toEqual(
-      <div>
-        <div>Loading...</div>
-        <div>Loading...</div>
-      </div>,
-    );
-    await act(async () => {
-      resolveA({default: Text});
-    });
-    expect(getVisibleChildren(container)).toEqual(
-      <div>
-        <div>Hello</div>
-        <div>Loading...</div>
-      </div>,
-    );
-    await act(async () => {
-      resolveB({default: TextWithPunctuation});
-    });
-    expect(getVisibleChildren(container)).toEqual(
-      <div>
-        <div>Hello</div>
-        <div>world!</div>
-      </div>,
-    );
+      if (__DEV__) {
+        expect(mockError).toHaveBeenCalledWith(
+          'Warning: %s: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.%s',
+          'TextWithPunctuation',
+          '\n    in TextWithPunctuation (at **)\n' +
+            '    in Lazy (at **)\n' +
+            '    in Suspense (at **)\n' +
+            '    in div (at **)\n' +
+            '    in div (at **)',
+        );
+      } else {
+        expect(mockError).not.toHaveBeenCalled();
+      }
+    } finally {
+      console.error = originalConsoleError;
+    }
   });
 
   it('#23331: does not warn about hydration mismatches if something suspended in an earlier sibling', async () => {

diff --git a/...ReactDeprecationWarnings-test.internal.js → ..._tests__/ReactDeprecationWarnings-test.js b/...ReactDeprecationWarnings-test.internal.js → ..._tests__/ReactDeprecationWarnings-test.js
@@ -10,7 +10,6 @@
 'use strict';
 
 let React;
-let ReactFeatureFlags;
 let ReactNoop;
 let Scheduler;
 let JSXDEVRuntime;
@@ -19,19 +18,11 @@ describe('ReactDeprecationWarnings', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
     if (__DEV__) {
       JSXDEVRuntime = require('react/jsx-dev-runtime');
     }
-    ReactFeatureFlags.warnAboutDefaultPropsOnFunctionComponents = true;
-    ReactFeatureFlags.warnAboutStringRefs = true;
-  });
-
-  afterEach(() => {
-    ReactFeatureFlags.warnAboutDefaultPropsOnFunctionComponents = false;
-    ReactFeatureFlags.warnAboutStringRefs = false;
   });
 
   it('should warn when given defaultProps', () => {
@@ -51,6 +42,27 @@ describe('ReactDeprecationWarnings', () => {
     );
   });
 
+  it('should warn when given defaultProps on a memoized function', () => {
+    const MemoComponent = React.memo(function FunctionalComponent(props) {
+      return null;
+    });
+
+    MemoComponent.defaultProps = {
+      testProp: true,
+    };
+
+    ReactNoop.render(
+      <div>
+        <MemoComponent />
+      </div>,
+    );
+    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
+      'Warning: FunctionalComponent: Support for defaultProps ' +
+        'will be removed from memo components in a future major ' +
+        'release. Use JavaScript default parameters instead.',
+    );
+  });
+
   it('should warn when given string refs', () => {
     class RefComponent extends React.Component {
       render() {
@@ -74,9 +86,7 @@ describe('ReactDeprecationWarnings', () => {
     );
   });
 
-  it('should not warn when owner and self are the same for string refs', () => {
-    ReactFeatureFlags.warnAboutStringRefs = false;
-
+  it('should warn when owner and self are the same for string refs', () => {
     class RefComponent extends React.Component {
       render() {
         return null;
@@ -87,7 +97,11 @@ describe('ReactDeprecationWarnings', () => {
         return <RefComponent ref="refComponent" __self={this} />;
       }
     }
-    ReactNoop.renderLegacySyncRoot(<Component />);
+    expect(() => {
+      ReactNoop.renderLegacySyncRoot(<Component />);
+    }).toErrorDev([
+      'Component "Component" contains the string ref "refComponent". Support for string refs will be removed in a future major release.',
+    ]);
     expect(Scheduler).toFlushWithoutYielding();
   });
 

diff --git a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
@@ -367,11 +367,12 @@ describe('ReactFunctionComponent', () => {
     Child.defaultProps = {test: 2};
     Child.propTypes = {test: PropTypes.string};
 
-    expect(() => ReactTestUtils.renderIntoDocument(<Child />)).toErrorDev(
+    expect(() => ReactTestUtils.renderIntoDocument(<Child />)).toErrorDev([
+      'Warning: Child: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.',
       'Warning: Failed prop type: Invalid prop `test` of type `number` ' +
         'supplied to `Child`, expected `string`.\n' +
         '    in Child (at **)',
-    );
+    ]);
   });
 
   it('should receive context', () => {

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -496,6 +496,20 @@ function updateMemoComponent(
           getComponentNameFromType(type),
         );
       }
+      if (
+        warnAboutDefaultPropsOnFunctionComponents &&
+        Component.defaultProps !== undefined
+      ) {
+        const componentName = getComponentNameFromType(type) || 'Unknown';
+        if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {
+          console.error(
+            '%s: Support for defaultProps will be removed from memo components ' +
+              'in a future major release. Use JavaScript default parameters instead.',
+            componentName,
+          );
+          didWarnAboutDefaultPropsOnFunctionComponent[componentName] = true;
+        }
+      }
     }
     const child = createFiberFromTypeAndProps(
       Component.type,

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -496,6 +496,20 @@ function updateMemoComponent(
           getComponentNameFromType(type),
         );
       }
+      if (
+        warnAboutDefaultPropsOnFunctionComponents &&
+        Component.defaultProps !== undefined
+      ) {
+        const componentName = getComponentNameFromType(type) || 'Unknown';
+        if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {
+          console.error(
+            '%s: Support for defaultProps will be removed from memo components ' +
+              'in a future major release. Use JavaScript default parameters instead.',
+            componentName,
+          );
+          didWarnAboutDefaultPropsOnFunctionComponent[componentName] = true;
+        }
+      }
     }
     const child = createFiberFromTypeAndProps(
       Component.type,