ionic-team / ionic-team/ionic-framework

bug: react IonTabs lifecycle

Offen
#30,801 0 Kommentare 5 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
package: react type: bug
Vorherrschende Sprache
TypeScript
Sterne
52.7k
Forks
13.3k
Ø Merge
1 T. 15 Std.
Gemergte PRs (30 T.)
51

Beschreibung

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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.

https://github.com/user-attachments/assets/4f52f9fe-1019-4414-8d14-c58e9626321c

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.

https://github.com/user-attachments/assets/73d8f5a3-41a7-456d-99dc-9bb5fc250b83

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:

```ts
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:

```ts
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_

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.