-
Notifications
You must be signed in to change notification settings - Fork 46.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: (17.0.0-rc.1) lazy is eager in dev mode #19748
Comments
Shorter test case: import React, { lazy } from 'react';
const Checked = lazy(() => import('./Checked'));
<Checked />; This is enough to trigger the dynamic import in dev mode. |
Behavior changed between 16.13.1 and the first |
This is triggered by |
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 |
Should be fixed in |
@gaearon Works great now, thanks! |
React version: 17.0.0-rc.1
Steps To Reproduce
lazy
components, use them conditionally.lazy
components are dynamically imported.Link to code example: --
main.jsx
:Checked.jsx
:Checked2.jsx
:Unchecked.jsx
:Unchecked2.jsx
:The current behavior
The
Checked.jsx
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
createElement
-ed eagerly.This affects react-router, as it uses this pattern:
AFAICT it doesn't break anything, but it is unexpected/confusing.
The expected behavior
lazy
components that are not rendered should not be dynamically imported.The text was updated successfully, but these errors were encountered: