From 707f8301d658781b0574d9506b3a0588c2e3fdd3 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 10 Aug 2023 10:53:37 -0400 Subject: [PATCH] docs(react): document lifecycle hook dependencies arg resolves #1949 --- docs/react/lifecycle.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/react/lifecycle.md b/docs/react/lifecycle.md index b717c5f0606..4712cd9b5df 100644 --- a/docs/react/lifecycle.md +++ b/docs/react/lifecycle.md @@ -133,6 +133,16 @@ export default HomePage; Functional components don't need to be wrapped with the `withIonLifeCycle` HOC as class components do. ::: +Developers can also optionally pass reactive dependencies to each lifecycle hook. These are then passed to the underlying [React useEffect hook](https://react.dev/reference/react/useEffect#useeffect): + +```tsx +const [data, setData] = useState('foo'); + +useIonViewDidEnter(() => { + console.log('ionViewDidEnter event fired'); +}, [data]); +``` + ## React LifeCycle Methods All the lifecycle methods in React (`componentDidMount`, `componentWillUnmount`, etc..) are available for you to use as well. However, since Ionic React manages the lifetime of a page, certain events might not fire when you expect them to. For instance, `componentDidMount` fires the first time a page is displayed, but if you navigate away from the page Ionic might keep the page around in the DOM, and a subsequent visit to the page might not call `componentDidMount` again. This scenario is the main reason the Ionic lifecycle methods exist, to still give you a way to call logic when views enter and exit when the native framework's events might not fire.