bug: react IonTabs lifecycle

[stasdre]

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

v8.x

Current Behavior

1. Ionic lifecycle methods do not fire on IonTabs pages
   When using IonTabs, lifecycle hooks such as useIonViewDidEnter, useIonViewDidLeave, etc., do not work on tab root pages.
   The same issue occurs on nested tab pages.

Screen.Recording.2025-11-20.at.19.15.34.mov

2. Wrapping tab pages in IonPage makes lifecycle methods work, but breaks navigation
   If each tab page is wrapped in an IonPage component, lifecycle methods begin to work, but page transitions and navigation behavior become broken or inconsistent.

Screen.Recording.2025-11-20.at.19.17.52.mov

3. Pages rerender multiple times when using useEffect
   If a simple useEffect is added to any tab page, the page rerenders many times.
   Moreover, with every tab enter/exit, the number of rerenders increases, which suggests a mounting/unmounting loop or repeated component remounts.

Expected Behavior

• Ionic lifecycle hooks (useIonViewDidEnter, useIonViewDidLeave, etc.) should:
  • Fire correctly on tab root pages.
  • Fire correctly on nested pages inside tabs.
• Wrapping tab pages in IonPage should not break navigation or cause incorrect rendering.
• Pages should rerender only when expected, not multiple times or with increasing frequency on each visit.

Steps to Reproduce

1. Create a new Ionic React project with IonTabs.

2. Add pages inside the tab routes.

3. Inside each page, add lifecycle hooks such as:

   useIonViewDidEnter(() => console.log("enter"));
   useIonViewDidLeave(() => console.log("leave"));

4. Observe that lifecycle events do not fire.

5. Wrap pages in IonPage and observe:

   • Lifecycle events start firing.
   • Navigation/transitions break or behave incorrectly.

6. Add a simple useEffect:

   useEffect(() => {
       console.log("render");
   });

7. Navigate between tabs and observe:

   • Pages rerender excessively.
   • Number of rerenders increases with each navigation event.

Code Reproduction URL

https://stackblitz.com/edit/lxuxesz1-zspm2tce?file=src%2Fmain.tsx

Ionic Info

Ionic:

Ionic CLI : 5.4.16

Utility:

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

System:

NodeJS : v20.19.1
npm : 10.8.2
OS : Linux 5.0

Additional Information

No response