bug: [ionic-react] React lifecycle hooks not rerun on array "deps" changes

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

Following React LifeCycle Methods it seems we should use useIonViewWillEnter instead of useEffect in a React FC. In a IonPage i need to set some deps to useEffect in order to dispatch side effects (base on Redux state updates).

Passing the second argument (deps?: any[]) to any of the useIonView* hooks do not re-run the LifeCycleCallback function.

Expected behavior:

I’d expect the LifeCycleCallback to re-run when one of the dependencies value change in the FC. Using useEffect works as expected but (ref the blog post) Ionic will take the IonPage in the background so the useEffect callback will be executed even after the user navigates to other views because - for React - the component is still mounted. This would create unexpected side effects between different IonPage that are using Redux useSelector to trigger its own useEffect callbacks.

Steps to reproduce:

Related code: Sample stackblitz - see the console logs for useIonViewWillEnter vs useEffect

https://stackblitz.com/edit/ionic-react-loading-96xecj?file=LoadingPage.jsx

  const [value, setValue] = useState('');

  useIonViewWillEnter(() => {
    console.log('useIonViewWillEnter: value is:', value)
  }, [value])

  useEffect(() => {
    console.log('useEffect: value is:', value)
  }, [value])

Other information:

I’m not sure if this will be considered as a bug or not but - from the @ionic-react types i saw the deps array so i think there should be a way to force a re-run of these hooks.

import { LifeCycleCallback } from '../contexts/IonLifeCycleContext';
export declare const useIonViewWillEnter: (callback: LifeCycleCallback, deps?: any[]) => void;
export declare const useIonViewDidEnter: (callback: LifeCycleCallback, deps?: any[]) => void;
export declare const useIonViewWillLeave: (callback: LifeCycleCallback, deps?: any[]) => void;
export declare const useIonViewDidLeave: (callback: LifeCycleCallback, deps?: any[]) => void;

Thanks!

[edolix]

Sorry the delay @liamdebeasi - i’ll try to provide you a new StackBlitz with the issue. Thanks again for now 👍

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.