Don't trigger lazy in DEV during element creation (#19871)

Author: gaearon

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

@@ -979,13 +979,7 @@ describe('ReactLazy', () => {
       },
     );
 
-    if (__DEV__) {
-      // Getting the name for the warning cause the loading to start early.
-      expect(Scheduler).toHaveYielded(['Started loading']);
-      expect(Scheduler).toFlushAndYield(['Loading...']);
-    } else {
-      expect(Scheduler).toFlushAndYield(['Started loading', 'Loading...']);
-    }
+    expect(Scheduler).toFlushAndYield(['Started loading', 'Loading...']);
     expect(root).not.toMatchRenderedOutput(<div>AB</div>);
 
     await Promise.resolve();

packages/react/src/ReactElementValidator.js

@@ -211,7 +211,6 @@ function validatePropTypes(element) {
     if (type === null || type === undefined || typeof type === 'string') {
       return;
     }
-    const name = getComponentName(type);
     let propTypes;
     if (typeof type === 'function') {
       propTypes = type.propTypes;
@@ -227,9 +226,13 @@ function validatePropTypes(element) {
       return;
     }
     if (propTypes) {
+      // Intentionally inside to avoid triggering lazy initializers:
+      const name = getComponentName(type);
       checkPropTypes(propTypes, element.props, 'prop', name, element);
     } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
       propTypesMisspellWarningShown = true;
+      // Intentionally inside to avoid triggering lazy initializers:
+      const name = getComponentName(type);
       console.error(
         'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',
         name || 'Unknown',

packages/react/src/__tests__/ReactElementJSX-test.js

@@ -415,4 +415,18 @@ describe('ReactElement.jsx', () => {
     // TODO: an explicit expect for no warning?
     ReactDOM.render(JSXRuntime.jsx(Parent, {}), container);
   });
+
+  it('does not call lazy initializers eagerly', () => {
+    let didCall = false;
+    const Lazy = React.lazy(() => {
+      didCall = true;
+      return {then() {}};
+    });
+    if (__DEV__) {
+      JSXDEVRuntime.jsxDEV(Lazy, {});
+    } else {
+      JSXRuntime.jsx(Lazy, {});
+    }
+    expect(didCall).toBe(false);
+  });
 });

packages/react/src/__tests__/ReactElementValidator-test.internal.js

@@ -532,4 +532,14 @@ describe('ReactElementValidator', () => {
       {withoutStack: true},
     );
   });
+
+  it('does not call lazy initializers eagerly', () => {
+    let didCall = false;
+    const Lazy = React.lazy(() => {
+      didCall = true;
+      return {then() {}};
+    });
+    React.createElement(Lazy);
+    expect(didCall).toBe(false);
+  });
 });

packages/react/src/__tests__/ReactJSXElementValidator-test.js

@@ -417,4 +417,14 @@ describe('ReactJSXElementValidator', () => {
       withoutStack: true,
     });
   });
+
+  it('does not call lazy initializers eagerly', () => {
+    let didCall = false;
+    const Lazy = React.lazy(() => {
+      didCall = true;
+      return {then() {}};
+    });
+    <Lazy />;
+    expect(didCall).toBe(false);
+  });
 });

packages/react/src/jsx/ReactJSXElementValidator.js

@@ -227,7 +227,6 @@ function validatePropTypes(element) {
     if (type === null || type === undefined || typeof type === 'string') {
       return;
     }
-    const name = getComponentName(type);
     let propTypes;
     if (typeof type === 'function') {
       propTypes = type.propTypes;
@@ -243,9 +242,13 @@ function validatePropTypes(element) {
       return;
     }
     if (propTypes) {
+      // Intentionally inside to avoid triggering lazy initializers:
+      const name = getComponentName(type);
       checkPropTypes(propTypes, element.props, 'prop', name, element);
     } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
       propTypesMisspellWarningShown = true;
+      // Intentionally inside to avoid triggering lazy initializers:
+      const name = getComponentName(type);
       console.error(
         'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',
         name || 'Unknown',