diff --git a/react/apps/entry-mauiblazor/src/main.tsx b/react/apps/entry-mauiblazor/src/main.tsx index 852b45b..b2fa89b 100644 --- a/react/apps/entry-mauiblazor/src/main.tsx +++ b/react/apps/entry-mauiblazor/src/main.tsx @@ -7,15 +7,9 @@ const BlazorMountPoint = "js-root"; const render = () => ReactDOM.createRoot(document.getElementById(BlazorMountPoint)!).render( - import.meta.env.MODE === "development" ? ( - // React.StrictModeは開発モードでuseEffectを2回呼び出して、useEffectの副作用を検出するのに役に立つ - // しかしuseEffectが2回呼び出されるとuseEffectのcleanupでBlazor ComponentのDisposeが走るため、外している + - ) : ( - - - - ) + ); // call from Blazor diff --git a/react/packages/interop-mauiblazor/src/hooks/useBlazor.jsx b/react/packages/interop-mauiblazor/src/hooks/useBlazor.jsx index 615ba43..63b56f5 100644 --- a/react/packages/interop-mauiblazor/src/hooks/useBlazor.jsx +++ b/react/packages/interop-mauiblazor/src/hooks/useBlazor.jsx @@ -73,11 +73,25 @@ export function useBlazor(identifier, props) { }, [props]); // This effect will run when the component is about to unmount. + // We need to handle React.StrictMode which may run this cleanup multiple times useEffect(() => () => { + // Prevent multiple disposal calls in React.StrictMode + if (isDisposedRef.current) { + return; + } + setTimeout(() => { - isDisposedRef.current = true; - if (addRootComponentPromiseRef.current) { - addRootComponentPromiseRef.current.then((rootComponent) => rootComponent.dispose()); + // Double-check disposal state in case another cleanup already ran + if (!isDisposedRef.current && addRootComponentPromiseRef.current) { + isDisposedRef.current = true; + addRootComponentPromiseRef.current.then((rootComponent) => { + // Final check before disposal to handle race conditions + if (rootComponent && typeof rootComponent.dispose === 'function') { + rootComponent.dispose(); + } + }).catch(() => { + // Ignore disposal errors in case component was already disposed + }); } }, 1000); }, []);