bug: react 18 with createRoot causes duplicate page transitions

[liamdebeasi]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When using Ionic React + React 18 + the new createRoot API, duplicate page transitions occur. This is due to IonPage being unmounted and remounted by react. The registerIonPage function calls for a transition every time a page is registered:

ionic-framework/packages/react-router/src/ReactRouter/StackManager.tsx

Line 212 in bd715a5

this.handlePageTransition(routeInfo);

However, it was written with the intent that page elements would be registered at most once.

Expected Behavior

I expect there to be only 1 page transition.

Steps to Reproduce

1. Clone repo.
2. Run npm install.
3. Run npm run start.
4. Click one of the list items in the app. Observe that the page transition occurs twice.

Code Reproduction URL

https://github.com/liamdebeasi/react-18-transition

Ionic Info

Ionic:

   Ionic CLI       : 6.20.1 (/Users/liamdebeasi/Ionic/ionic-cli/packages/@ionic/cli)
   Ionic Framework : @ionic/react 6.2.3

Capacitor:

   Capacitor CLI      : 4.1.0
   @capacitor/android : not installed
   @capacitor/core    : 4.1.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.6.0

System:

   NodeJS : v16.11.1 (/Users/liamdebeasi/.nvm/versions/node/v16.11.1/bin/node)
   npm    : 8.0.0
   OS     : macOS Monterey

Additional Information

No response

[liamdebeasi]

Resolved via #25798

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.