From 3e14a57f843f55c3867e6472bbf1d7c0ed5e1943 Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@meta-tek.net>
Date: Thu, 7 Nov 2019 11:55:47 -0700
Subject: [PATCH] fix(react): adding multiple subscriptions to lifecycle
 events, fixes #19792 (#19858)

---
 .../src/contexts/IonLifeCycleContext.tsx      | 42 ++++++++-----------
 packages/react/src/lifecycle/hooks.ts         | 26 ++++++++----
 2 files changed, 35 insertions(+), 33 deletions(-)

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<IonLifeCycle
   ionViewDidLeave: () => { 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);
+  }, []);
 };