From 022d6986ca333d51ec7fbdb20aff1d14320a75fd Mon Sep 17 00:00:00 2001 From: FernetB <47339424+FernetB@users.noreply.github.com> Date: Mon, 10 Apr 2023 10:52:11 -0300 Subject: [PATCH 1/4] Update lifecycle.md --- docs/react/lifecycle.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/react/lifecycle.md b/docs/react/lifecycle.md index aba6783e34b..e89b28fdf13 100644 --- a/docs/react/lifecycle.md +++ b/docs/react/lifecycle.md @@ -145,3 +145,9 @@ Below are some tips on use cases for each of the life cycle events. - `ionViewDidEnter` - If you see performance problems from using `ionViewWillEnter` when loading data, you can do your data calls in `ionViewDidEnter` instead. This event won't fire until after the page is visible to the user, however, so you might want to use either a loading indicator or a skeleton screen, so content doesn't flash in un-naturally after the transition is complete. - `ionViewWillLeave` - Can be used for cleanup, like unsubscribing from data sources. Since `componentWillUnmount` might not fire when you navigate from the current page, put your cleanup code here if you don't want it active while the screen is not in view. - `ionViewDidLeave` - When this event fires, you know the new page has fully transitioned in, so any logic you might not normally do when the view is visible can go here. + +## Passing state between pages +You can pass state between pages like normal with `history.push()` but need to be **aware** that ionic keep the pages mounted and with that if you navigate from a page A with `stateA` to a page B with `stateB`, the page A will be hidden and the state of that page will no longer be `stateA` instead will be `stateB` and it may crash your app, for that you need to add an undefined check `?` whenever you want to access to the properties of an `state` + +If you want to avoid forgetting to add undefined check you could do something like +`useCustomLocation = useLocation>` From e8e693f93064fd52cad443fae35d41b928559e34 Mon Sep 17 00:00:00 2001 From: FernetB <47339424+FernetB@users.noreply.github.com> Date: Mon, 10 Apr 2023 10:56:42 -0300 Subject: [PATCH 2/4] Update lifecycle.md --- docs/react/lifecycle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react/lifecycle.md b/docs/react/lifecycle.md index e89b28fdf13..ecc0d060ac6 100644 --- a/docs/react/lifecycle.md +++ b/docs/react/lifecycle.md @@ -147,7 +147,7 @@ Below are some tips on use cases for each of the life cycle events. - `ionViewDidLeave` - When this event fires, you know the new page has fully transitioned in, so any logic you might not normally do when the view is visible can go here. ## Passing state between pages -You can pass state between pages like normal with `history.push()` but need to be **aware** that ionic keep the pages mounted and with that if you navigate from a page A with `stateA` to a page B with `stateB`, the page A will be hidden and the state of that page will no longer be `stateA` instead will be `stateB` and it may crash your app, for that you need to add an undefined check `?` whenever you want to access to the properties of an `state` +You can pass states between pages like normal with `history.push()` but need to be **aware** that ionic keep the pages mounted and with that if you navigate from a page A with `stateA` to a page B with `stateB`, the page A will be hidden and the state of that page will no longer be `stateA` instead will be `stateB` and it may crash your app, for that you need to add an undefined check `?` whenever you want to access to the properties of an `state` If you want to avoid forgetting to add undefined check you could do something like `useCustomLocation = useLocation>` From 5480e337296b983d05507c1eb88614bcb82bb27d Mon Sep 17 00:00:00 2001 From: FernetB <47339424+FernetB@users.noreply.github.com> Date: Tue, 11 Apr 2023 16:57:21 -0300 Subject: [PATCH 3/4] Update docs/react/lifecycle.md Co-authored-by: Liam DeBeasi --- docs/react/lifecycle.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/docs/react/lifecycle.md b/docs/react/lifecycle.md index ecc0d060ac6..35530ef26c2 100644 --- a/docs/react/lifecycle.md +++ b/docs/react/lifecycle.md @@ -147,7 +147,10 @@ Below are some tips on use cases for each of the life cycle events. - `ionViewDidLeave` - When this event fires, you know the new page has fully transitioned in, so any logic you might not normally do when the view is visible can go here. ## Passing state between pages -You can pass states between pages like normal with `history.push()` but need to be **aware** that ionic keep the pages mounted and with that if you navigate from a page A with `stateA` to a page B with `stateB`, the page A will be hidden and the state of that page will no longer be `stateA` instead will be `stateB` and it may crash your app, for that you need to add an undefined check `?` whenever you want to access to the properties of an `state` +Since Ionic React manages the lifetime of a page, state on previous pages may update as users navigate your application. This can impact state that is determined using `useEffect` from React or `useLocation` from React Router. For example, if `PageA` calls `useLocation`, the state of `useLocation` will change when the user navigates from `PageA` to `PageB`. -If you want to avoid forgetting to add undefined check you could do something like -`useCustomLocation = useLocation>` +Developers should include the appropriate checks to ensure that previous pages only access defined states. + +For example, the following code will error if `testObject` is not defined: `{ state.testObject.childKey }` + +Instead, developers should access `childKey` only if `testObject` is defined: `{ state.testObject?.childKey }` From 40d3f517e6357df31487656ae6614a4222db9b57 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 13 Apr 2023 09:20:16 -0400 Subject: [PATCH 4/4] Update lifecycle.md --- docs/react/lifecycle.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/react/lifecycle.md b/docs/react/lifecycle.md index 35530ef26c2..f43992d2163 100644 --- a/docs/react/lifecycle.md +++ b/docs/react/lifecycle.md @@ -147,6 +147,7 @@ Below are some tips on use cases for each of the life cycle events. - `ionViewDidLeave` - When this event fires, you know the new page has fully transitioned in, so any logic you might not normally do when the view is visible can go here. ## Passing state between pages + Since Ionic React manages the lifetime of a page, state on previous pages may update as users navigate your application. This can impact state that is determined using `useEffect` from React or `useLocation` from React Router. For example, if `PageA` calls `useLocation`, the state of `useLocation` will change when the user navigates from `PageA` to `PageB`. Developers should include the appropriate checks to ensure that previous pages only access defined states.