From a3c62378cc75e3dae4080efb99d606976d0dcb3e Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 27 Mar 2023 14:30:21 -0400 Subject: [PATCH] docs(lifecycle): clarify when lifecycles are called --- docs/angular/lifecycle.md | 2 ++ docs/react/lifecycle.md | 2 ++ docs/vue/lifecycle.md | 2 ++ versioned_docs/version-v6/angular/lifecycle.md | 2 ++ versioned_docs/version-v6/react/lifecycle.md | 2 ++ versioned_docs/version-v6/vue/lifecycle.md | 2 ++ 6 files changed, 12 insertions(+) diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.md index 09206bdf137..5bf7d113370 100644 --- a/docs/angular/lifecycle.md +++ b/docs/angular/lifecycle.md @@ -41,6 +41,8 @@ In addition to the Angular life cycle events, Ionic Angular provides a few addit | `ionViewWillLeave` | Fired when the component routing from is about to animate. | | `ionViewDidLeave` | Fired when the component routing to has finished animating. | +These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render. + The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fire. The former fires right after `ngOnInit` but before the page transition begins, and the latter directly after the transition ends. For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires). diff --git a/docs/react/lifecycle.md b/docs/react/lifecycle.md index 13458ad97ba..aba6783e34b 100644 --- a/docs/react/lifecycle.md +++ b/docs/react/lifecycle.md @@ -24,6 +24,8 @@ Ionic provides a few lifecycle methods that you can use in your apps: | `ionViewWillLeave` | Fired when the component routing from is about to animate. | | `ionViewDidLeave` | Fired when the component routing to has finished animating. | +These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render. + The way you access these methods varies based on if you are using class-based components or functional components. We cover both methods below. ## Lifecycle Methods in Class-Based Components diff --git a/docs/vue/lifecycle.md b/docs/vue/lifecycle.md index 1c7b70ea460..a36def3597a 100644 --- a/docs/vue/lifecycle.md +++ b/docs/vue/lifecycle.md @@ -17,6 +17,8 @@ Ionic Framework provides a few lifecycle methods that you can use in your apps: | `ionViewWillLeave` | Fired when the component routing from is about to animate. | | `ionViewDidLeave` | Fired when the component routing to has finished animating. | +These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render. + The lifecycles are defined the same way Vue lifecycle methods are - as functions at the root of your Vue component: ```tsx diff --git a/versioned_docs/version-v6/angular/lifecycle.md b/versioned_docs/version-v6/angular/lifecycle.md index 09206bdf137..5bf7d113370 100644 --- a/versioned_docs/version-v6/angular/lifecycle.md +++ b/versioned_docs/version-v6/angular/lifecycle.md @@ -41,6 +41,8 @@ In addition to the Angular life cycle events, Ionic Angular provides a few addit | `ionViewWillLeave` | Fired when the component routing from is about to animate. | | `ionViewDidLeave` | Fired when the component routing to has finished animating. | +These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render. + The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fire. The former fires right after `ngOnInit` but before the page transition begins, and the latter directly after the transition ends. For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires). diff --git a/versioned_docs/version-v6/react/lifecycle.md b/versioned_docs/version-v6/react/lifecycle.md index 13458ad97ba..aba6783e34b 100644 --- a/versioned_docs/version-v6/react/lifecycle.md +++ b/versioned_docs/version-v6/react/lifecycle.md @@ -24,6 +24,8 @@ Ionic provides a few lifecycle methods that you can use in your apps: | `ionViewWillLeave` | Fired when the component routing from is about to animate. | | `ionViewDidLeave` | Fired when the component routing to has finished animating. | +These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render. + The way you access these methods varies based on if you are using class-based components or functional components. We cover both methods below. ## Lifecycle Methods in Class-Based Components diff --git a/versioned_docs/version-v6/vue/lifecycle.md b/versioned_docs/version-v6/vue/lifecycle.md index 1c7b70ea460..a36def3597a 100644 --- a/versioned_docs/version-v6/vue/lifecycle.md +++ b/versioned_docs/version-v6/vue/lifecycle.md @@ -17,6 +17,8 @@ Ionic Framework provides a few lifecycle methods that you can use in your apps: | `ionViewWillLeave` | Fired when the component routing from is about to animate. | | `ionViewDidLeave` | Fired when the component routing to has finished animating. | +These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render. + The lifecycles are defined the same way Vue lifecycle methods are - as functions at the root of your Vue component: ```tsx