I am not sure if this is expected behavior between Ionic React 4.8.0-rc.0 to 5.2.2
Scenario
I have multiple tab where Tab 1 has list of items from API call and Tab 2 has other stuffs.
When I first run the app, Tab 1 will trigger API call to populate items
I want to navigate between tabs but Tab 1 items should stay the same
Finding
What I found out is that items1
always become []
when I come back to Tab1 for Ionic React 5.2.2. However, version 4.8.0-rc.0 does not have this strange behavior, meaning items1
value is the same within useIonViewWillEnter
after navigating away and back to Tab1
useIonViewWillEnter(async () => {
console.log(items1);
if (items1.length < 4) {
setItems1([1, 2, 3]);
}
});
4.8.0-rc.0
https://stackblitz.com/edit/ionic-react-tabs-lj2ekk
5.2.2
https://stackblitz.com/edit/ionic-react-tabs-tvtv3c
You can test by clicking on Add by 1 button to see the list increasing. Then navigate away and back. In 5.2.2, the list will be back to [1, 2, 3]
again.
So my question is: Is this a bug? If not, is the behavior now different and how to work around this?