ionic-team / ionic-team/ionic-framework

bug: react IonTabs lifecycle

Abierto
#30,801 0 comentarios 5 reacciones 0 asignados Ver en GitHub
package: react type: bug
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### 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_

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.