fix(react): present controller overlays in React 18

[sean-perkins]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Starting in React 18, while in development mode, React will unmount and re-mount a component: https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors. 🙃

This causes issues with internal logic within the createControllerComponent that will not present an overlay, if the component will be unmounted.

Issue URL: #25247

What is the new behavior?

• Resets the flag for unmounting when the component is re-mounted.
• IonLoading will present when isOpen is set to true
• IonAlert will present when isOpen is set to true

Does this introduce a breaking change?

• Yes
• No

Other information

Dev-build: 6.1.7-dev.11653598324.17fa560b ✅

[liamdebeasi]

Is this a backward compatible change with React 17?

Also is there any way we can write a test for this?

[sean-perkins]

Yes, this should be backwards compatible with React 17. In React 17, the unmount lifecycle will not fire initially and the default value of the unmount state is false. So with this change, the value will remain consistent in execution as before.

Writing a test on this change is difficult, as our test app is not on React 18. In theory, our existing tests for alert/loading cover this change being compatible with React 17.

I would like to start an internal discussion though, on the possibility of having a test-app for each major version of each framework we support. For example, with React, there would be a test-app for React 17 and React 18.

[sean-perkins]

Dev-build confirmed by issue reporter: #25247 (comment)