ionic-team / ionic-team/ionic-framework

bug: react IonTabs lifecycle

未关闭
#30,801 0 条评论 5 个 reaction 已指派 0 人 在 GitHub 查看
package: react type: bug
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

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

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。