From 85a4048c99debdbde707d082582bee1b90eff921 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Mon, 22 Aug 2022 18:07:41 +0000
Subject: [PATCH 1/2] fix(react): duplicate page transitions do not happen on
 react 18

---
 packages/react-router/src/ReactRouter/StackManager.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/react-router/src/ReactRouter/StackManager.tsx b/packages/react-router/src/ReactRouter/StackManager.tsx
index e000008aef7..c21e6e6d513 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);
   }

From 0458734308c8722fc9e9e48f3089b8eda1ea5bb6 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Tue, 23 Aug 2022 15:23:11 +0000
Subject: [PATCH 2/2] chore(): use ready flag for outlet manager

---
 packages/react/src/routing/OutletPageManager.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/routing/OutletPageManager.tsx b/packages/react/src/routing/OutletPageManager.tsx
index 9b59e5b81c3..45025bc2296 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',