Skip to content

Commit

Permalink
docs(lifecycle): clarify when lifecycles are called (#2858)
Browse files Browse the repository at this point in the history
  • Loading branch information
liamdebeasi authored Mar 28, 2023
1 parent d9a33f0 commit f468d1a
Show file tree
Hide file tree
Showing 6 changed files with 12 additions and 0 deletions.
2 changes: 2 additions & 0 deletions docs/angular/lifecycle.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
2 changes: 2 additions & 0 deletions docs/react/lifecycle.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions docs/vue/lifecycle.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions versioned_docs/version-v6/angular/lifecycle.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
2 changes: 2 additions & 0 deletions versioned_docs/version-v6/react/lifecycle.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions versioned_docs/version-v6/vue/lifecycle.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

1 comment on commit f468d1a

@vercel
Copy link

@vercel vercel bot commented on f468d1a Mar 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ionic-docs – ./

ionic-docs-gqykycf8t.vercel.app
ionic-docs-ionic1.vercel.app
ionic-docs-git-main-ionic1.vercel.app

Please sign in to comment.