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. If we want to update LazyComponent due to a state/prop change, simply updating props and pass to LazyComponent, as we did, is enough for our case.
ducdv-lumin
force-pushed
the
fix/prevent-destroy-render-component-every-time-rerendering-from-host
branch
from
5340af4 to
63d8393
Compare
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