bug: react 18, page hides on hot reload

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

The page works fine but when you save a file and the react server reloads part of the UI the react router outlet (IonRouterOutlet) goes blank.

Expected Behavior

The UI to be updated and not blank

Steps to Reproduce

I put together this code sandbox.

Simply change say hello to hello! and save the file, the page goes blank and you see UNMOUNTED in the console but no MOUNTED

This also happens locally with the CRA dev server.

https://codesandbox.io/s/ionic-router-issue-test-ovee4z?file=/src/app.tsx

i.e. this is the state after a save:

You then have to physically refresh the browser page to get the UI to work again.

Code Reproduction URL

https://codesandbox.io/s/ionic-router-issue-test-ovee4z?file=/src/app.tsx

Ionic Info

Can’t do this on a sandbox, but locally with the same issue:

➜  broadway git:(main) ✗ ionic info
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'

       Require stack:
       - /Users/philjones/.config/yarn/global/node_modules/@ionic/cli/lib/project/index.js
       - /Users/philjones/.config/yarn/global/node_modules/@ionic/cli/lib/index.js
       - /Users/philjones/.config/yarn/global/node_modules/@ionic/cli/index.js
       - /Users/philjones/.config/yarn/global/node_modules/@ionic/cli/bin/ionic

Ionic:

   Ionic CLI       : 6.18.1 (/Users/philjones/.config/yarn/global/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 6.1.10

Capacitor:

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

Utility:

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

System:

   NodeJS : v16.14.2 (/usr/local/Cellar/node@16/16.14.2/bin/node)
   npm    : 8.5.0
   OS     : macOS Big Sur

Additional Information

No response

[sean-perkins]

I’ve been able to narrow the responsible code to here: https://github.com/ionic-team/ionic-framework/blob/main/packages/react-router/src/ReactRouter/StackManager.tsx#L59-L62

When the outlet is cleared, this arbitrary timeout runs: https://github.com/ionic-team/ionic-framework/blob/main/packages/react/src/routing/ViewStacks.ts#L24-L30

With the behavior for how React tries to resume, the component will re-mount, and the timeout will finally run to clear the page contents.

[ionitron-bot[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.