fix(bridge-react): hoist BridgeWrapper to prevent component recreation

Author: danpeen

.changeset/eight-mirrors-drum.md

@@ -0,0 +1,6 @@
+---
+'remote6': patch
+'@module-federation/bridge-react': patch
+---
+
+fix(bridge-react): hoist BridgeWrapper to prevent component recreation

apps/router-demo/router-host-2000/src/App.tsx

@@ -3,6 +3,7 @@ import React, {
   useEffect,
   ForwardRefExoticComponent,
   Suspense,
+  useState,
 } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import {
@@ -284,16 +285,26 @@ const App = () => {
         />
         <Route
           path="/remote6/*"
-          Component={() => (
-            <Remote6App
-              rootOptions={{
-                identifierPrefix: 'remote6-instance-',
-                onRecoverableError: (error: Error) => {
-                  console.error('[Host] Remote6 recoverable error:', error);
-                },
-              }}
-            />
-          )}
+          Component={() => {
+            const [counter, setCounter] = useState(0);
+
+            return (
+              <>
+                <button onClick={() => setCounter(counter + 1)}>
+                  Increment
+                </button>
+                <Remote6App
+                  outerCounter={counter}
+                  rootOptions={{
+                    identifierPrefix: 'remote6-instance-',
+                    onRecoverableError: (error: Error) => {
+                      console.error('[Host] Remote6 recoverable error:', error);
+                    },
+                  }}
+                />
+              </>
+            );
+          }}
         />
       </Routes>
     </div>

apps/router-demo/router-remote6-2006/src/App.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react-router';
 import './App.css';
 import styled from '@emotion/styled';
+import { useState } from 'react';
 
 const HomeDiv = styled.div`
   color: purple;
@@ -48,16 +49,21 @@ function Home() {
 }
 
 function Detail() {
+  const [counter, setCounter] = useState(0);
   return (
     <>
       <h2>Remote6 detail page</h2>
       <div>hello remote6 detail page with React Router v7</div>
       <div>🚀 Enhanced routing with better performance and DX</div>
-      <Image
-        width={200}
-        src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
-        alt="Sample image"
-      />
+      <div style={{ fontSize: 40 }}>Inner Counter: {counter}</div>
+      <button onClick={() => setCounter(counter + 1)}>Increment</button>
+      <div>
+        <Image
+          width={200}
+          src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
+          alt="Sample image"
+        />
+      </div>
     </>
   );
 }
@@ -171,7 +177,11 @@ const router = createBrowserRouter([
   },
 ]);
 
-const App = (info?: { basename?: string; initialEntries?: Array<string> }) => {
+const App = (info?: {
+  outerCounter: number;
+  basename?: string;
+  initialEntries?: Array<string>;
+}) => {
   // React Router v7 supports more advanced routing features
   // For now, we'll use the basic router configuration
   // In a real app, you might want to handle basename and initialEntries
@@ -180,6 +190,7 @@ const App = (info?: { basename?: string; initialEntries?: Array<string> }) => {
 
   return (
     <div className="remote6-app">
+      <div style={{ fontSize: 40 }}>Outer Counter: {info?.outerCounter}</div>
       <RouterProvider router={router} />
     </div>
   );

packages/bridge/bridge-react/src/provider/versions/bridge-base.tsx

@@ -43,6 +43,38 @@ export function createBaseBridgeComponent<T>({
       );
     };
 
+    const DefaultFallback = ({ error }: FallbackProps) => (
+      <div role="alert">
+        <p>Something went wrong:</p>
+        <pre style={{ color: 'red' }}>{error.message}</pre>
+      </div>
+    );
+
+    const BridgeWrapper = ({
+      basename,
+      moduleName,
+      memoryRoute,
+      propsInfo,
+      fallback,
+    }: {
+      basename?: string;
+      moduleName?: string;
+      memoryRoute?: any;
+      propsInfo: T;
+      fallback?: React.ComponentType<FallbackProps>;
+    }) => (
+      <ErrorBoundary FallbackComponent={fallback || DefaultFallback}>
+        <RawComponent
+          appInfo={{
+            moduleName,
+            basename,
+            memoryRoute,
+          }}
+          propsInfo={propsInfo}
+        />
+      </ErrorBoundary>
+    );
+
     return {
       async render(info: RenderParams) {
         LoggerInstance.debug(`createBridgeComponent render Info`, info);
@@ -64,29 +96,20 @@ export function createBaseBridgeComponent<T>({
         const beforeBridgeRenderRes =
           instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info) || {};
 
-        const BridgeWrapper = ({ basename }: { basename?: string }) => (
-          <ErrorBoundary
-            FallbackComponent={fallback as React.ComponentType<FallbackProps>}
-          >
-            <RawComponent
-              appInfo={{
-                moduleName,
-                basename,
-                memoryRoute,
-              }}
-              propsInfo={
-                {
-                  ...propsInfo,
-                  basename,
-                  ...(beforeBridgeRenderRes as any)?.extraProps,
-                } as T
-              }
-            />
-          </ErrorBoundary>
-        );
-
         const rootComponentWithErrorBoundary = (
-          <BridgeWrapper basename={basename} />
+          <BridgeWrapper
+            basename={basename}
+            moduleName={moduleName}
+            memoryRoute={memoryRoute}
+            fallback={fallback as React.ComponentType<FallbackProps>}
+            propsInfo={
+              {
+                ...propsInfo,
+                basename,
+                ...(beforeBridgeRenderRes as any)?.extraProps,
+              } as T
+            }
+          />
         );
 
         if (bridgeInfo.render) {