bug: ion-nav does not remove component in DOM or update state correctly

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 the IonNav and IonNavLink components in react for routing, going 'forward' creates a new element in the DOM, but going 'backward' does not remove that element. This results in multiple duplicate elements being created when navigating backwards then forwards again (with the current screen being shown in a higher z-index).

As a side effect, it seems than whenever react state is updated inside the IonNav component, a new component is created entirely, rather than updating the state correctly.

Expected Behavior

Would expect IonNav to work correctly in navigating forwards and backwards through IonNavLinks without duplicating elements in the DOM, and correctly updating react state within the components.

Steps to Reproduce

1. Clone: https://github.com/daniel-menezes/ion-nav
2. npm install
3. npm run start
4. Navigate between pages using the given buttons and see the dom renders duplicate components

e.g.

<ion-nav delegate="[object Object]">
  <div class="ion-page ion-page-hidden" style="z-index: 100;" aria-hidden="true">...</div>
  <div class="ion-page can-go-back" style="z-index: 100; display: none;">...</div>
  <div class="ion-page can-go-back" style="z-index: 100; display: none;">...</div>
  <div class="ion-page can-go-back" style="z-index: 100; display: none;">...</div>
  <div class="ion-page can-go-back" style="z-index: 100; display: none;">...</div>
  <div class="ion-page can-go-back" style="z-index: 100; display: none;">...</div>
  ...
  <div class="ion-page can-go-back" style="z-index: 101; display: none;">...</div>
</ion-nav>

I’ve used a NavComponent as taken from https://github.com/ionic-team/ionic-framework/blob/b2a27e0b623a603b536dc23ab409662219323acb/packages/react/test-app/src/pages/navigation/NavComponent.tsx

Code Reproduction URL

https://github.com/daniel-menezes/ion-nav

Ionic Info

Ionic:

Ionic CLI : 6.20.1 Ionic Framework : @ionic/react 6.2.2

Capacitor:

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

Utility:

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

System:

NodeJS : v16.13.0 npm : 8.1.0 OS : macOS Monterey

Additional Information

The first video shows the base example of navigating forwards and backwards with IonNav and the DOM creating duplicate components.

https://user-images.githubusercontent.com/61494082/184286345-45d83327-366a-4c85-a34d-9d001ea861f9.mov

The second video shows an example of updating a simple react state counter. The DOM creates a new node with the component in the new state and overlays it underneath the the component with the old state (which can be seen by the z-index.

https://user-images.githubusercontent.com/61494082/184286371-d4e40661-6469-4af4-af12-71d7760d4856.mov

[sean-perkins]

Hello @daniel-menezes there are a few outstanding tasks I need to validate against the dev-build before I am comfortable with the fix going out in a patch release.

Mainly I want to make sure the way that I am removing HTML nodes does not have repercussions when conditionally rendering pages inside IonNav. I also want to verify the state re-rendering challenges you outlined, to see if that is a side effect of my changes or another bug that exists in the IonNav React implementation. If it does exist outside of my changes, we can create a new issue focused on that criteria and minimally merge the fix for unmounting DOM nodes.

[sean-perkins]

@daniel-menezes thanks for digging in further! Yes, the updated commit splitting out the PageOne & state update into a functional component is semantically correct. The prior example was causing a re-render of the parent and all children, leading to the flicker/re-renders.

I’ll move that PR from draft to ready for review so the team can take a look 👍