Change:
<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. --React version: 17.0.0-rc.1 elements out of components, use them conditionally. if the components are dynamically imported. <!-- Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Issues without reproduction steps or code examples may be immediately closed as not actionable. --Link to code example: -- : : : : : <!-- Please provide a CodeSandbox (), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: --The chunk is imported eagerly, even though the component isn't immediately rendered. ! This doesn't happen in prod mode, or with React 16, or with components that are not -ed eagerly. This affects react-router, as it uses this pattern: AFAICT it doesn't break anything, but it is unexpected/confusing. components that are not rendered should not be dynamically imported.
Shorter test case: This is enough to trigger the dynamic import in dev mode.
Behavior changed between 16.13.1 and the first release after . ! !
This is triggered by in . I think this doesn't really make sense to call but we'd need to see why this change to was made. <img width="398" alt="Screenshot 2020-09-03 at 13 56 14" src="https://user-"<img width="367" alt="Screenshot 2020-09-03 at 13 56 18" src="https://user-"
The suspense protocol is just a function that may throw. That allows for low overhead abstractions to be wrapped. This change was to allow the init function to encapsulate the actual suspense mechanism and that data structure. Unfortunately there’s no way to query the status of something in the suspense protocol without triggering the fetch. Same as you can’t do: Without triggering a fetch. The solution might be to move validation of lazy until it’s rendered instead of in createElement. Also, sigh PropTypes.
Should the label be removed?
Should be fixed in . Please verify.
Works great now, thanks! Looking forward to the 17.0.0 release.

Discussion:
}, ); <del> 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...']); } </del> <ins> expect(Scheduler).toFlushAndYield(['Started loading', 'Loading...']); </ins> expect(root).not.toMatchRenderedOutput(<div>AB</div>); await Promise.resolve();

// TODO: an explicit expect for no warning? ReactDOM.render(JSXRuntime.jsx(Parent, {}), container); }); <ins> 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); }); </ins> });

{withoutStack: true}, ); }); <ins> 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); }); </ins> });

withoutStack: true, }); }); <ins> it('does not call lazy initializers eagerly', () => { let didCall = false; const Lazy = React.lazy(() => { didCall = true; return {then() {}}; }); <Lazy />; expect(didCall).toBe(false); }); </ins> });

if (type === null || type === undefined || typeof type === 'string') { return; } <del> const name = getComponentName(type); </del> let propTypes; if (typeof type === 'function') { propTypes = type.propTypes;

return; } if (propTypes) { <ins> // Intentionally inside to avoid triggering lazy initializers: const name = getComponentName(type); </ins> checkPropTypes(propTypes, element.props, 'prop', name, element); } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) { propTypesMisspellWarningShown = true; <ins> // Intentionally inside to avoid triggering lazy initializers: const name = getComponentName(type); </ins> console.error( 'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', name || 'Unknown',