feat(ui): Keep stable references to lazy components #69740
Merged
+42
−22
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
In concurrent mode a spinner is sometimes shown on route change even though the component has already been loaded. We should try to keep stable references to `lazy(() => import('./whatever'));` to benefit from the caching react lazy does and avoid the tick from .then() that is needed to resolve a fresh promise, even if webpack has cached the result already.
https://react.dev/reference/react/lazy
for an example spinner in concurrent mode go to the subscription page https://sentry.sentry.io/settings/billing/overview/ and flick between the tabs
github-actions
bot
added
the
Scope: Frontend
scttcper
commented
Apr 26, 2024
| @@ -39,11 +40,12 @@ const SafeLazyLoad = errorHandler(LazyLoad); | |||
| export function makeLazyloadComponent<C extends React.ComponentType<any>>( | |||
| resolve: () => Promise<{default: C}> | |||
| ) { | |||
| const LazyComponent = lazy<C>(() => retryableImport(resolve)); | |||
There was a problem hiding this comment.
pulling this outside the RouteLazyLoad ensures that as long as makeLazyloadComponent isn't called multiple times this should be stable
evanpurkhiser
approved these changes
Apr 26, 2024
scttcper
commented
Apr 26, 2024
| ...props | ||
| }: Props<C>) { | ||
| const LazyComponent = useMemo( | ||
| () => lazy<C>(() => retryableImport(component)), |
There was a problem hiding this comment.
this is what i'm trying to avoid, a new lazy() every time the component is mounted
ryan953
approved these changes
Apr 26, 2024
ryan953
reviewed
Apr 26, 2024
ryan953
reviewed
Apr 26, 2024
ryan953
reviewed
Apr 26, 2024
Co-authored-by: Ryan Albrecht <[email protected]>
scttcper
added a commit
that referenced
this pull request
Apr 26, 2024
final follow up to #69740 prefer stable references to lazy()
Suspect IssuesThis pull request was deployed and Sentry observed the following issues:
Did you find this useful? React with a 👍 or 👎 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pr pulls the
lazy()call out of the render path.In concurrent mode, a spinner is sometimes shown on route change even though the component has already been loaded. We should try to keep stable references to
lazy(() => import('./whatever'));to benefit from the caching react lazy does and avoid the tick from .then() that is needed to resolve a fresh promise, even if webpack has cached the result already.From the docs
example: go to the subscription page https://sentry.sentry.io/settings/billing/overview/ and flick between the tabs
before - spinner every time you switch tabs even after the component is loaded
CleanShot.2024-04-25.at.20.20.20.mp4
after - spinner or flicker only when the bundle is loaded the first time. this could be prefetched
CleanShot.2024-04-25.at.20.15.51.mp4
part of https://github.com/getsentry/frontend-tsc/issues/63