ionic-team / ionic-team/ionic-framework

bug: react IonTabs lifecycle

Đang mở
#30,801 0 bình luận 5 reaction 0 người được giao Xem trên GitHub
package: react type: bug
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.