0

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?

HP.
  • 19,226
  • 53
  • 154
  • 253

1 Answers1

1

This solved it

useIonViewWillEnter(async () => {
    console.log(items1);
    if (items1.length < 4) {
      setItems1([1, 2, 3]);
    }
  },[items1]);
HP.
  • 19,226
  • 53
  • 154
  • 253