fix: prevent destroy/render the remote component every time rerendering from the host #3479
Conversation
|
✅ Deploy Preview for module-federation-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
ducdv-lumin
changed the title
ducdv-lumin
force-pushed
the
fix/prevent-destroy-render-component-every-time-rerendering-from-host
branch
from
a2e87fe to
5340af4
Compare
| @@ -102,7 +102,7 @@ export function createRemoteComponent<T, E extends keyof T>( | |||
|
|
|||
| return forwardRef<HTMLDivElement, ProviderParams & RawComponentType>( | |||
| (props, ref) => { | |||
| const LazyComponent = createLazyRemoteComponent(info); | |||
| const LazyComponent = useMemo(() => createLazyRemoteComponent(info), []); | |||
There was a problem hiding this comment.
you probbably should pass info to the dependencies [] array of use memo, if you change the lazy remote then youd want memo to refresh most likely?
There was a problem hiding this comment.
Actually, we do not need to pass info to the dependencies [] array. We shouldn't update these (loader, loading, fallback) from info while using the createRemoteComponent function. I expect they should be initialized only once and cannot be changed. If we want to update LazyComponent due to a state change, simply updating props and pass to LazyComponent, as we did, is enough for our case.
Description
Implement memoization for
LazyComponentevery timecreateRemoteComponentis called, so the remote component won't call the destroy/render method when the state changes from the host.Related Issue
#3478
Types of changes
Checklist