From a39d776f087514b7fa744f44ce8ce2a04ed8aa43 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 23 Aug 2022 13:19:38 -0500
Subject: [PATCH] fix(react): duplicate page transitions do not happen on react
 18 (#25798)

resolves #25797
---
 .../src/ReactRouter/StackManager.tsx             | 10 ++++++++++
 packages/react/src/routing/OutletPageManager.tsx | 16 +++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/react-router/src/ReactRouter/StackManager.tsx b/packages/react-router/src/ReactRouter/StackManager.tsx
index e000008aef..c21e6e6d51 100644
--- a/packages/react-router/src/ReactRouter/StackManager.tsx
+++ b/packages/react-router/src/ReactRouter/StackManager.tsx
@@ -206,8 +206,18 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
   registerIonPage(page: HTMLElement, routeInfo: RouteInfo) {
     const foundView = this.context.findViewItemByRouteInfo(routeInfo, this.id);
     if (foundView) {
+      const oldPageElement = foundView.ionPageElement;
       foundView.ionPageElement = page;
       foundView.ionRoute = true;
+
+      /**
+       * React 18 will unmount and remount IonPage
+       * elements in development mode when using createRoot.
+       * This can cause duplicate page transitions to occur.
+       */
+      if (oldPageElement === page) {
+        return;
+      }
     }
     this.handlePageTransition(routeInfo);
   }
diff --git a/packages/react/src/routing/OutletPageManager.tsx b/packages/react/src/routing/OutletPageManager.tsx
index 9b59e5b81c..45025bc229 100644
--- a/packages/react/src/routing/OutletPageManager.tsx
+++ b/packages/react/src/routing/OutletPageManager.tsx
@@ -18,16 +18,26 @@ export class OutletPageManager extends React.Component<OutletPageManagerProps> {
   ionLifeCycleContext!: React.ContextType<typeof IonLifeCycleContext>;
   context!: React.ContextType<typeof StackContext>;
   ionRouterOutlet: HTMLIonRouterOutletElement | undefined;
+  outletIsReady: boolean;
 
   constructor(props: OutletPageManagerProps) {
     super(props);
+
+    this.outletIsReady = false;
   }
 
   componentDidMount() {
     if (this.ionRouterOutlet) {
-      componentOnReady(this.ionRouterOutlet, () => {
-        this.context.registerIonPage(this.ionRouterOutlet!, this.props.routeInfo!);
-      });
+      /**
+       * This avoids multiple raf calls
+       * when React unmounts + remounts components.
+       */
+      if (!this.outletIsReady) {
+        componentOnReady(this.ionRouterOutlet, () => {
+          this.outletIsReady = true;
+          this.context.registerIonPage(this.ionRouterOutlet!, this.props.routeInfo!);
+        });
+      }
 
       this.ionRouterOutlet.addEventListener(
         'ionViewWillEnter',