bug: overlays reusing inner component instance even after dismissing

Bug Report

Ionic version:

[x] 5.6.3

Current behavior:

In my IonModal, I define useState hooks to manage code while the modal is displayed on the page. This works great when the modal is displayed, however, when I close the modal and then reopen, the state variables that were modified during the last time the modal was opened, still show instead of the useState hooks resetting back to their initial state.

Video demo: https://streamable.com/cd965g

Expected behavior:

I expect to have the modal reset its state every time I reopen a modal.

Steps to reproduce:

CodeSandbox for reproduction: https://codesandbox.io/s/cool-bash-z8f5j?file=/src/pages/Tab1.tsx

Steps to recreate using the link above:

1. On Tab One, click “Show Modal”
2. On the modal, observe the text displaying “init”
3. Click the button “Change Modal State”
4. On the modal, observe the text now displaying “changed state!”
5. Close the modal by clicking outside the modal or the close button in the top right
6. Reopen the modal by clicking “Show Modal”
7. Observe that the text on the page is NOT “init” but instead the “changed state!” text from the last time we used the modal

NOTE: if you switch between tabs and then back to Tab One and click “Show Modal” the state finally resets.

This behavior is different from an older version of Ionic React I had been using recently. Is this the new intended behavior or should the state indeed be resetting upon hiding the modal? Logically, since the modal is being removed from the DOM I’d expect the state to reset…right?

[uncvrd]

Hey Liam! Glad you were able to get it to work 😃 Yes the dev build looks like it resolves the problem

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