useIonViewWillEnter has default value of state variable upon re-entry of page

I posted this here typescript - useIonViewWillEnter has default value of state variable upon re-entry of page - Stack Overflow but it doesn’t seem to get any attention.

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

5.2.2

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?

  useIonViewWillEnter(async () => {
    console.log(items1);
    if (items1.length < 4) {
      setItems1([1, 2, 3]);
    }
  },[items1]);