diff --git a/docs/react/lifecycle.md b/docs/react/lifecycle.md index aba6783e34b..f43992d2163 100644 --- a/docs/react/lifecycle.md +++ b/docs/react/lifecycle.md @@ -145,3 +145,13 @@ 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 + +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. + +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 }`