Skip to content

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

Closed as not planned
@ducdv-lumin

Description

@ducdv-lumin

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions