core icon indicating copy to clipboard operation
core copied to clipboard

Prevent destroy/render the remote component every time re-rendering from the host

Open ducdv-lumin opened this issue 9 months ago • 5 comments

Describe the bug

When creating the remote component in the host using the createRemoteComponent function, every time I make a state change, the remote component flashes because it unmounts and mounts again. Here is a minimal example from the host, and I have ensured that the remote component from the remote repository works correctly without any issues.

import React, { useState } from 'react';
import { loadRemote } from '@module-federation/enhanced/runtime';
import { createRemoteComponent } from '@module-federation/bridge-react';

const Button = createRemoteComponent<any, any>({
  loader: () => loadRemote('remoteRepos/Button'),
  fallback: null,
  loading: null,
});

const CountContainer = () => {
   const [count, setCount] = useState(0);
   return <Button onClick={() => setCount(prevState => prevState + 1)}>Hit me! {count}</ Button>
}

export default CountContainer;

Used Package Manager

npm

System Info

System:
    OS: Linux 6.1 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 9.68 GB / 15.51 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
Binaries:
    Node: 18.20.5 - ~/.nvm/versions/node/v18.20.5/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.5/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v18.20.5/bin/npm
    pnpm: 9.15.0 - ~/.nvm/versions/node/v18.20.5/bin/pnpm

Validations

ducdv-lumin avatar Feb 04 '25 05:02 ducdv-lumin