Don't trigger lazy in DEV during element creation (#19871)
Dan Abramov committed
Sep 21, 2020 at 16:04 UTC
bc6b7b6b16f771bfc8048fe15e211ac777253b64
6 files changed
+43
-9
packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+1
-7
@@ -979,13 +979,7 @@ describe('ReactLazy', () => {
979
},
980
);
981
982
- if (__DEV__) {
983
- // Getting the name for the warning cause the loading to start early.
984
- expect(Scheduler).toHaveYielded(['Started loading']);
985
- expect(Scheduler).toFlushAndYield(['Loading...']);
986
- } else {
987
- expect(Scheduler).toFlushAndYield(['Started loading', 'Loading...']);
988
- }
982
+ expect(Scheduler).toFlushAndYield(['Started loading', 'Loading...']);
983
expect(root).not.toMatchRenderedOutput(<div>AB</div>);
984
985
await Promise.resolve();
packages/react/src/ReactElementValidator.js
+4
-1
@@ -211,7 +211,6 @@ function validatePropTypes(element) {
211
if (type === null || type === undefined || typeof type === 'string') {
212
return;
213
}
214
- const name = getComponentName(type);
214
let propTypes;
215
if (typeof type === 'function') {
216
propTypes = type.propTypes;
@@ -227,9 +226,13 @@ function validatePropTypes(element) {
226
return;
227
}
228
if (propTypes) {
229
+ // Intentionally inside to avoid triggering lazy initializers:
230
+ const name = getComponentName(type);
231
checkPropTypes(propTypes, element.props, 'prop', name, element);
232
} else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
233
propTypesMisspellWarningShown = true;
234
+ // Intentionally inside to avoid triggering lazy initializers:
235
+ const name = getComponentName(type);
236
console.error(
237
'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',
238
name || 'Unknown',
packages/react/src/__tests__/ReactElementJSX-test.js
+14
@@ -415,4 +415,18 @@ describe('ReactElement.jsx', () => {
415
// TODO: an explicit expect for no warning?
416
ReactDOM.render(JSXRuntime.jsx(Parent, {}), container);
417
});
418
+
419
+ it('does not call lazy initializers eagerly', () => {
420
+ let didCall = false;
421
+ const Lazy = React.lazy(() => {
422
+ didCall = true;
423
+ return {then() {}};
424
+ });
425
+ if (__DEV__) {
426
+ JSXDEVRuntime.jsxDEV(Lazy, {});
427
+ } else {
428
+ JSXRuntime.jsx(Lazy, {});
429
+ }
430
+ expect(didCall).toBe(false);
431
+ });
432
});
packages/react/src/__tests__/ReactElementValidator-test.internal.js
+10
@@ -532,4 +532,14 @@ describe('ReactElementValidator', () => {
532
{withoutStack: true},
533
);
534
});
535
+
536
+ it('does not call lazy initializers eagerly', () => {
537
+ let didCall = false;
538
+ const Lazy = React.lazy(() => {
539
+ didCall = true;
540
+ return {then() {}};
541
+ });
542
+ React.createElement(Lazy);
543
+ expect(didCall).toBe(false);
544
+ });
545
});
packages/react/src/__tests__/ReactJSXElementValidator-test.js
+10
@@ -417,4 +417,14 @@ describe('ReactJSXElementValidator', () => {
417
withoutStack: true,
418
});
419
});
420
+
421
+ it('does not call lazy initializers eagerly', () => {
422
+ let didCall = false;
423
+ const Lazy = React.lazy(() => {
424
+ didCall = true;
425
+ return {then() {}};
426
+ });
427
+ <Lazy />;
428
+ expect(didCall).toBe(false);
429
+ });
430
});
packages/react/src/jsx/ReactJSXElementValidator.js
+4
-1
@@ -227,7 +227,6 @@ function validatePropTypes(element) {
227
if (type === null || type === undefined || typeof type === 'string') {
228
return;
229
}
230
- const name = getComponentName(type);
230
let propTypes;
231
if (typeof type === 'function') {
232
propTypes = type.propTypes;
@@ -243,9 +242,13 @@ function validatePropTypes(element) {
242
return;
243
}
244
if (propTypes) {
245
+ // Intentionally inside to avoid triggering lazy initializers:
246
+ const name = getComponentName(type);
247
checkPropTypes(propTypes, element.props, 'prop', name, element);
248
} else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
249
propTypesMisspellWarningShown = true;
250
+ // Intentionally inside to avoid triggering lazy initializers:
251
+ const name = getComponentName(type);
252
console.error(
253
'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',
254
name || 'Unknown',