diff --git a/packages/react/src/contexts/IonLifeCycleContext.tsx b/packages/react/src/contexts/IonLifeCycleContext.tsx index b1cf020fbe..f5d1051183 100644 --- a/packages/react/src/contexts/IonLifeCycleContext.tsx +++ b/packages/react/src/contexts/IonLifeCycleContext.tsx @@ -22,52 +22,46 @@ export const IonLifeCycleContext = /*@__PURE__*/React.createContext { return; }, }); +type LifeCycleCallback = () => void; + export const DefaultIonLifeCycleContext = class implements IonLifeCycleContextInterface { - ionViewWillEnterCallback?: () => void; - ionViewDidEnterCallback?: () => void; - ionViewWillLeaveCallback?: () => void; - ionViewDidLeaveCallback?: () => void; + ionViewWillEnterCallbacks: LifeCycleCallback[] = []; + ionViewDidEnterCallbacks: LifeCycleCallback[] = []; + ionViewWillLeaveCallbacks: LifeCycleCallback[] = []; + ionViewDidLeaveCallbacks: LifeCycleCallback[] = []; componentCanBeDestroyedCallback?: () => void; - onIonViewWillEnter(callback: () => void) { - this.ionViewWillEnterCallback = callback; + onIonViewWillEnter(callback: LifeCycleCallback) { + this.ionViewWillEnterCallbacks.push(callback); } ionViewWillEnter() { - if (this.ionViewWillEnterCallback) { - this.ionViewWillEnterCallback(); - } + this.ionViewWillEnterCallbacks.forEach(cb => cb()); } - onIonViewDidEnter(callback: () => void) { - this.ionViewDidEnterCallback = callback; + onIonViewDidEnter(callback: LifeCycleCallback) { + this.ionViewDidEnterCallbacks.push(callback); } ionViewDidEnter() { - if (this.ionViewDidEnterCallback) { - this.ionViewDidEnterCallback(); - } + this.ionViewDidEnterCallbacks.forEach(cb => cb()); } - onIonViewWillLeave(callback: () => void) { - this.ionViewWillLeaveCallback = callback; + onIonViewWillLeave(callback: LifeCycleCallback) { + this.ionViewWillLeaveCallbacks.push(callback); } ionViewWillLeave() { - if (this.ionViewWillLeaveCallback) { - this.ionViewWillLeaveCallback(); - } + this.ionViewWillLeaveCallbacks.forEach(cb => cb()); } - onIonViewDidLeave(callback: () => void) { - this.ionViewDidLeaveCallback = callback; + onIonViewDidLeave(callback: LifeCycleCallback) { + this.ionViewDidLeaveCallbacks.push(callback); } ionViewDidLeave() { - if (this.ionViewDidLeaveCallback) { - this.ionViewDidLeaveCallback(); - } + this.ionViewDidLeaveCallbacks.forEach(cb => cb()); this.componentCanBeDestroyed(); } diff --git a/packages/react/src/lifecycle/hooks.ts b/packages/react/src/lifecycle/hooks.ts index e93b2dd170..181f2dbe56 100644 --- a/packages/react/src/lifecycle/hooks.ts +++ b/packages/react/src/lifecycle/hooks.ts @@ -1,23 +1,31 @@ -import { useContext } from 'react'; +import { useContext, useEffect } from 'react'; import { IonLifeCycleContext } from '../contexts/IonLifeCycleContext'; export const useIonViewWillEnter = (callback: () => void) => { - const value = useContext(IonLifeCycleContext); - value.onIonViewWillEnter(callback); + const context = useContext(IonLifeCycleContext); + useEffect(() => { + context.onIonViewWillEnter(callback); + }, []); }; export const useIonViewDidEnter = (callback: () => void) => { - const value = useContext(IonLifeCycleContext); - value.onIonViewDidEnter(callback); + const context = useContext(IonLifeCycleContext); + useEffect(() => { + context.onIonViewDidEnter(callback); + }, []); }; export const useIonViewWillLeave = (callback: () => void) => { - const value = useContext(IonLifeCycleContext); - value.onIonViewWillLeave(callback); + const context = useContext(IonLifeCycleContext); + useEffect(() => { + context.onIonViewWillLeave(callback); + }, []); }; export const useIonViewDidLeave = (callback: () => void) => { - const value = useContext(IonLifeCycleContext); - value.onIonViewDidLeave(callback); + const context = useContext(IonLifeCycleContext); + useEffect(() => { + context.onIonViewDidLeave(callback); + }, []); };