@module-federation/bridge-react 0.0.0-next-20250223132729 → 0.0.0-next-20250224060203

package/CHANGELOG.md

@@ -1,15 +1,20 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20250223132729
+## 0.0.0-next-20250224060203
 
-### Minor Changes
+### Patch Changes
+
+- Updated dependencies [624ad6b]
+- Updated dependencies [5d988c2]
+  - @module-federation/sdk@0.0.0-next-20250224060203
+  - @module-federation/bridge-shared@0.0.0-next-20250224060203
 
-- 1fe3d78: fix(bridge-react): prevent destroy/render the remote component every time after the states changed
+## 0.9.0
 
 ### Patch Changes
 
-- @module-federation/sdk@0.0.0-next-20250223132729
-- @module-federation/bridge-shared@0.0.0-next-20250223132729
+- @module-federation/sdk@0.9.0
+- @module-federation/bridge-shared@0.9.0
 
 ## 0.8.12
 

package/dist/index.cjs.js

@@ -123,78 +123,97 @@ function e() {
   window.dispatchEvent(t);
 }
 const RemoteAppWrapper = React.forwardRef(function(props, ref) {
-  const {
-    moduleName,
-    memoryRoute,
-    basename,
-    providerInfo,
-    className,
-    style,
-    fallback,
-    ...resProps
-  } = props;
-  const instance = plugin.federationRuntime.instance;
-  const rootRef = ref && "current" in ref ? ref : React.useRef(null);
-  const renderDom = React.useRef(null);
-  const providerInfoRef = React.useRef(null);
-  const [initialized, setInitialized] = React.useState(false);
-  context.LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
-  React.useEffect(() => {
-    if (initialized)
-      return;
-    const providerReturn = providerInfo();
-    providerInfoRef.current = providerReturn;
-    setInitialized(true);
-    return () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
-        context.LoggerInstance.debug(
-          `createRemoteComponent LazyComponent destroy >>>`,
-          { moduleName, basename, dom: renderDom.current }
-        );
-        (_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
-          moduleName,
-          dom: renderDom.current,
-          basename,
-          memoryRoute,
-          fallback,
-          ...resProps
-        });
-        (_e = providerInfoRef.current) == null ? void 0 : _e.destroy({
-          moduleName,
-          dom: renderDom.current
-        });
-        (_h = (_g = (_f = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
+  const RemoteApp2 = () => {
+    context.LoggerInstance.debug(`RemoteAppWrapper RemoteApp props >>>`, { props });
+    const {
+      moduleName,
+      memoryRoute,
+      basename,
+      providerInfo,
+      className,
+      style,
+      fallback,
+      ...resProps
+    } = props;
+    const instance = plugin.federationRuntime.instance;
+    const rootRef = ref && "current" in ref ? ref : React.useRef(null);
+    const renderDom = React.useRef(null);
+    const providerInfoRef = React.useRef(null);
+    context.LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
+    React.useEffect(() => {
+      const renderTimeout = setTimeout(() => {
+        var _a, _b, _c, _d, _e, _f;
+        const providerReturn = providerInfo();
+        providerInfoRef.current = providerReturn;
+        let renderProps = {
           moduleName,
-          dom: renderDom.current,
+          dom: rootRef.current,
           basename,
           memoryRoute,
           fallback,
           ...resProps
+        };
+        renderDom.current = rootRef.current;
+        context.LoggerInstance.debug(
+          `createRemoteComponent LazyComponent render >>>`,
+          renderProps
+        );
+        context.LoggerInstance.debug(
+          `createRemoteComponent LazyComponent hostInstance >>>`,
+          instance
+        );
+        const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(
+          renderProps
+        )) || {};
+        renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
+        providerReturn.render(renderProps);
+        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(renderProps);
+      });
+      return () => {
+        clearTimeout(renderTimeout);
+        setTimeout(() => {
+          var _a, _b, _c, _d, _e, _f, _g, _h;
+          if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
+            context.LoggerInstance.debug(
+              `createRemoteComponent LazyComponent destroy >>>`,
+              { moduleName, basename, dom: renderDom.current }
+            );
+            (_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps
+            });
+            (_e = providerInfoRef.current) == null ? void 0 : _e.destroy({
+              moduleName,
+              dom: renderDom.current
+            });
+            (_h = (_g = (_f = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps
+            });
+          }
         });
+      };
+    }, []);
+    const rootComponentClassName = `${context.getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: rootComponentClassName,
+        style: props == null ? void 0 : props.style,
+        ref: rootRef
       }
-    };
-  }, [moduleName]);
-  React.useEffect(() => {
-    var _a, _b, _c, _d, _e, _f;
-    if (!initialized || !providerInfoRef.current)
-      return;
-    let renderProps = {
-      moduleName,
-      dom: rootRef.current,
-      basename,
-      memoryRoute,
-      fallback,
-      ...resProps
-    };
-    renderDom.current = rootRef.current;
-    const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(renderProps)) || {};
-    renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
-    providerInfoRef.current.render(renderProps);
-    (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(renderProps);
-  }, [initialized, ...Object.values(props)]);
-  const rootComponentClassName = `${context.getRootDomDefaultClassName(moduleName)} ${className || ""}`;
-  return /* @__PURE__ */ React.createElement("div", { className: rootComponentClassName, style, ref: rootRef });
+    );
+  };
+  RemoteApp2["__APP_VERSION__"] = "0.9.0";
+  return /* @__PURE__ */ React.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
   const Component = React.forwardRef(function(props, ref) {
@@ -317,9 +336,9 @@ function createLazyRemoteComponent(info) {
   });
 }
 function createRemoteComponent(info) {
-  const LazyComponent = createLazyRemoteComponent(info);
   return React.forwardRef(
     (props, ref) => {
+      const LazyComponent = createLazyRemoteComponent(info);
       return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props, ref })));
     }
   );
@@ -387,13 +406,9 @@ function createBridgeComponent(bridgeInfo) {
             bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
           ).then((root) => rootMap.set(info.dom, root));
         } else {
-          console.log("--------createBridgeComponent render Info", info);
-          let root = rootMap.get(info.dom);
-          if (!root) {
-            root = createRoot(info.dom);
-            rootMap.set(info.dom, root);
-          }
+          const root = createRoot(info.dom);
           root.render(rootComponentWithErrorBoundary);
+          rootMap.set(info.dom, root);
         }
         ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
       },
@@ -401,7 +416,6 @@ function createBridgeComponent(bridgeInfo) {
         var _a, _b, _c;
         context.LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
         const root = rootMap.get(info.dom);
-        console.log("--------createBridgeComponent destroy Info", info);
         if (root) {
           if ("unmount" in root) {
             root.unmount();
@@ -410,7 +424,7 @@ function createBridgeComponent(bridgeInfo) {
           }
           rootMap.delete(info.dom);
         }
-        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.afterBridgeDestroy) == null ? void 0 : _c.emit(info);
+        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.destroyBridge) == null ? void 0 : _c.emit(info);
       }
     };
   };

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React__default, { createContext, Component, createElement, forwardRef, useRef, useState, useEffect, useContext } from "react";
+import React__default, { createContext, Component, createElement, forwardRef, useRef, useEffect, useContext, useState } from "react";
 import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, R as RouterContext } from "./context-BwUPFSB2.js";
 import * as ReactRouterDOM from "react-router-dom";
 import { federationRuntime } from "./plugin.es.js";
@@ -104,78 +104,97 @@ function e() {
   window.dispatchEvent(t);
 }
 const RemoteAppWrapper = forwardRef(function(props, ref) {
-  const {
-    moduleName,
-    memoryRoute,
-    basename,
-    providerInfo,
-    className,
-    style,
-    fallback,
-    ...resProps
-  } = props;
-  const instance = federationRuntime.instance;
-  const rootRef = ref && "current" in ref ? ref : useRef(null);
-  const renderDom = useRef(null);
-  const providerInfoRef = useRef(null);
-  const [initialized, setInitialized] = useState(false);
-  LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
-  useEffect(() => {
-    if (initialized)
-      return;
-    const providerReturn = providerInfo();
-    providerInfoRef.current = providerReturn;
-    setInitialized(true);
-    return () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
-        LoggerInstance.debug(
-          `createRemoteComponent LazyComponent destroy >>>`,
-          { moduleName, basename, dom: renderDom.current }
-        );
-        (_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
-          moduleName,
-          dom: renderDom.current,
-          basename,
-          memoryRoute,
-          fallback,
-          ...resProps
-        });
-        (_e = providerInfoRef.current) == null ? void 0 : _e.destroy({
-          moduleName,
-          dom: renderDom.current
-        });
-        (_h = (_g = (_f = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
+  const RemoteApp2 = () => {
+    LoggerInstance.debug(`RemoteAppWrapper RemoteApp props >>>`, { props });
+    const {
+      moduleName,
+      memoryRoute,
+      basename,
+      providerInfo,
+      className,
+      style,
+      fallback,
+      ...resProps
+    } = props;
+    const instance = federationRuntime.instance;
+    const rootRef = ref && "current" in ref ? ref : useRef(null);
+    const renderDom = useRef(null);
+    const providerInfoRef = useRef(null);
+    LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
+    useEffect(() => {
+      const renderTimeout = setTimeout(() => {
+        var _a, _b, _c, _d, _e, _f;
+        const providerReturn = providerInfo();
+        providerInfoRef.current = providerReturn;
+        let renderProps = {
           moduleName,
-          dom: renderDom.current,
+          dom: rootRef.current,
           basename,
           memoryRoute,
           fallback,
           ...resProps
+        };
+        renderDom.current = rootRef.current;
+        LoggerInstance.debug(
+          `createRemoteComponent LazyComponent render >>>`,
+          renderProps
+        );
+        LoggerInstance.debug(
+          `createRemoteComponent LazyComponent hostInstance >>>`,
+          instance
+        );
+        const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(
+          renderProps
+        )) || {};
+        renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
+        providerReturn.render(renderProps);
+        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(renderProps);
+      });
+      return () => {
+        clearTimeout(renderTimeout);
+        setTimeout(() => {
+          var _a, _b, _c, _d, _e, _f, _g, _h;
+          if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
+            LoggerInstance.debug(
+              `createRemoteComponent LazyComponent destroy >>>`,
+              { moduleName, basename, dom: renderDom.current }
+            );
+            (_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps
+            });
+            (_e = providerInfoRef.current) == null ? void 0 : _e.destroy({
+              moduleName,
+              dom: renderDom.current
+            });
+            (_h = (_g = (_f = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps
+            });
+          }
         });
+      };
+    }, []);
+    const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`;
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: rootComponentClassName,
+        style: props == null ? void 0 : props.style,
+        ref: rootRef
       }
-    };
-  }, [moduleName]);
-  useEffect(() => {
-    var _a, _b, _c, _d, _e, _f;
-    if (!initialized || !providerInfoRef.current)
-      return;
-    let renderProps = {
-      moduleName,
-      dom: rootRef.current,
-      basename,
-      memoryRoute,
-      fallback,
-      ...resProps
-    };
-    renderDom.current = rootRef.current;
-    const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(renderProps)) || {};
-    renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
-    providerInfoRef.current.render(renderProps);
-    (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(renderProps);
-  }, [initialized, ...Object.values(props)]);
-  const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${className || ""}`;
-  return /* @__PURE__ */ React__default.createElement("div", { className: rootComponentClassName, style, ref: rootRef });
+    );
+  };
+  RemoteApp2["__APP_VERSION__"] = "0.9.0";
+  return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
 });
 function withRouterData(WrappedComponent) {
   const Component2 = forwardRef(function(props, ref) {
@@ -298,9 +317,9 @@ function createLazyRemoteComponent(info) {
   });
 }
 function createRemoteComponent(info) {
-  const LazyComponent = createLazyRemoteComponent(info);
   return forwardRef(
     (props, ref) => {
+      const LazyComponent = createLazyRemoteComponent(info);
       return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props, ref })));
     }
   );
@@ -368,13 +387,9 @@ function createBridgeComponent(bridgeInfo) {
             bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
           ).then((root) => rootMap.set(info.dom, root));
         } else {
-          console.log("--------createBridgeComponent render Info", info);
-          let root = rootMap.get(info.dom);
-          if (!root) {
-            root = createRoot(info.dom);
-            rootMap.set(info.dom, root);
-          }
+          const root = createRoot(info.dom);
           root.render(rootComponentWithErrorBoundary);
+          rootMap.set(info.dom, root);
         }
         ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
       },
@@ -382,7 +397,6 @@ function createBridgeComponent(bridgeInfo) {
         var _a, _b, _c;
         LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
         const root = rootMap.get(info.dom);
-        console.log("--------createBridgeComponent destroy Info", info);
         if (root) {
           if ("unmount" in root) {
             root.unmount();
@@ -391,7 +405,7 @@ function createBridgeComponent(bridgeInfo) {
           }
           rootMap.delete(info.dom);
         }
-        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.afterBridgeDestroy) == null ? void 0 : _c.emit(info);
+        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.destroyBridge) == null ? void 0 : _c.emit(info);
       }
     };
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20250223132729",
+  "version": "0.0.0-next-20250224060203",
   "publishConfig": {
     "access": "public"
   },
@@ -46,8 +46,8 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.1.2",
-    "@module-federation/bridge-shared": "0.0.0-next-20250223132729",
-    "@module-federation/sdk": "0.0.0-next-20250223132729"
+    "@module-federation/bridge-shared": "0.0.0-next-20250224060203",
+    "@module-federation/sdk": "0.0.0-next-20250224060203"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -68,7 +68,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.2.14",
     "vite-plugin-dts": "^4.3.0",
-    "@module-federation/runtime": "0.0.0-next-20250223132729"
+    "@module-federation/runtime": "0.0.0-next-20250224060203"
   },
   "scripts": {
     "dev": "vite",

package/src/provider/create.tsx

@@ -86,13 +86,9 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
             bridgeInfo?.render(rootComponentWithErrorBoundary, dom),
           ).then((root: RootType) => rootMap.set(info.dom, root));
         } else {
-          console.log('--------createBridgeComponent render Info', info);
-          let root = rootMap.get(info.dom);
-          if (!root) {
-            root = createRoot(info.dom);
-            rootMap.set(info.dom, root);
-          }
+          const root = createRoot(info.dom);
           root.render(rootComponentWithErrorBoundary);
+          rootMap.set(info.dom, root);
         }
 
         instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
@@ -101,7 +97,6 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
       destroy(info: DestroyParams) {
         LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
         const root = rootMap.get(info.dom);
-        console.log('--------createBridgeComponent destroy Info', info);
         if (root) {
           if ('unmount' in root) {
             root.unmount();
@@ -110,7 +105,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           }
           rootMap.delete(info.dom);
         }
-        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(info);
+        instance?.bridgeHook?.lifecycle?.destroyBridge?.emit(info);
       },
     };
   };

package/src/remote/component.tsx

@@ -40,98 +40,112 @@ const RemoteAppWrapper = forwardRef(function (
   props: RemoteAppParams & RenderFnParams,
   ref,
 ) {
-  const {
-    moduleName,
-    memoryRoute,
-    basename,
-    providerInfo,
-    className,
-    style,
-    fallback,
-    ...resProps
-  } = props;
-
-  const instance = federationRuntime.instance;
-  const rootRef: React.MutableRefObject<HTMLDivElement | null> =
-    ref && 'current' in ref
-      ? (ref as React.MutableRefObject<HTMLDivElement | null>)
-      : useRef(null);
-
-  const renderDom: React.MutableRefObject<HTMLElement | null> = useRef(null);
-  const providerInfoRef = useRef<any>(null);
-  const [initialized, setInitialized] = useState(false);
-
-  LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
-
-  // 初始化远程组件
-  useEffect(() => {
-    if (initialized) return;
-
-    const providerReturn = providerInfo();
-    providerInfoRef.current = providerReturn;
-    setInitialized(true);
-
-    return () => {
-      if (providerInfoRef.current?.destroy) {
-        LoggerInstance.debug(
-          `createRemoteComponent LazyComponent destroy >>>`,
-          { moduleName, basename, dom: renderDom.current },
-        );
+  const RemoteApp = () => {
+    LoggerInstance.debug(`RemoteAppWrapper RemoteApp props >>>`, { props });
+    const {
+      moduleName,
+      memoryRoute,
+      basename,
+      providerInfo,
+      className,
+      style,
+      fallback,
+      ...resProps
+    } = props;
 
-        instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
-          moduleName,
-          dom: renderDom.current,
-          basename,
-          memoryRoute,
-          fallback,
-          ...resProps,
-        });
+    const instance = federationRuntime.instance;
+    const rootRef: React.MutableRefObject<HTMLDivElement | null> =
+      ref && 'current' in ref
+        ? (ref as React.MutableRefObject<HTMLDivElement | null>)
+        : useRef(null);
 
-        providerInfoRef.current?.destroy({
-          moduleName,
-          dom: renderDom.current,
-        });
+    const renderDom: React.MutableRefObject<HTMLElement | null> = useRef(null);
+    const providerInfoRef = useRef<any>(null);
 
-        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
+    LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
+
+    useEffect(() => {
+      const renderTimeout = setTimeout(() => {
+        const providerReturn = providerInfo();
+        providerInfoRef.current = providerReturn;
+
+        let renderProps = {
           moduleName,
-          dom: renderDom.current,
+          dom: rootRef.current,
           basename,
           memoryRoute,
           fallback,
           ...resProps,
-        });
-      }
-    };
-  }, [moduleName]);
+        };
+        renderDom.current = rootRef.current;
+        LoggerInstance.debug(
+          `createRemoteComponent LazyComponent render >>>`,
+          renderProps,
+        );
 
-  // 处理 props 更新
-  useEffect(() => {
-    if (!initialized || !providerInfoRef.current) return;
+        LoggerInstance.debug(
+          `createRemoteComponent LazyComponent hostInstance >>>`,
+          instance,
+        );
+        const beforeBridgeRenderRes =
+          instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(
+            renderProps,
+          ) || {};
+        // @ts-ignore
+        renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
+        providerReturn.render(renderProps);
+        instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(renderProps);
+      });
+
+      return () => {
+        clearTimeout(renderTimeout);
+        setTimeout(() => {
+          if (providerInfoRef.current?.destroy) {
+            LoggerInstance.debug(
+              `createRemoteComponent LazyComponent destroy >>>`,
+              { moduleName, basename, dom: renderDom.current },
+            );
+
+            instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps,
+            });
+
+            providerInfoRef.current?.destroy({
+              moduleName,
+              dom: renderDom.current,
+            });
+
+            instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps,
+            });
+          }
+        });
+      };
+    }, []);
+
+    // bridge-remote-root
+    const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${props?.className}`;
+    return (
+      <div
+        className={rootComponentClassName}
+        style={props?.style}
+        ref={rootRef}
+      ></div>
+    );
+  };
 
-    let renderProps = {
-      moduleName,
-      dom: rootRef.current,
-      basename,
-      memoryRoute,
-      fallback,
-      ...resProps,
-    };
-    renderDom.current = rootRef.current;
-
-    const beforeBridgeRenderRes =
-      instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(renderProps) ||
-      {};
-    // @ts-ignore
-    renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
-    providerInfoRef.current.render(renderProps);
-    instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(renderProps);
-  }, [initialized, ...Object.values(props)]);
-
-  // bridge-remote-root
-  const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${className || ''}`;
-  return (
-    <div className={rootComponentClassName} style={style} ref={rootRef}></div>
-  );
+  (RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;
+  return <RemoteApp />;
 });
 
 interface ExtraDataProps {

package/src/remote/create.tsx

@@ -100,9 +100,9 @@ export function createRemoteComponent<T, E extends keyof T>(
       : {}
     : {};
 
-  const LazyComponent = createLazyRemoteComponent(info);
   return forwardRef<HTMLDivElement, ProviderParams & RawComponentType>(
     (props, ref) => {
+      const LazyComponent = createLazyRemoteComponent(info);
       return (
         <ErrorBoundary FallbackComponent={info.fallback}>
           <React.Suspense fallback={info.loading}>