> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Page Lifecycle

> Learn when the didMount and willUnmount lifecycle hooks are triggered in YiDA custom pages, along with typical use cases for running initialization or cleanup logic when a page mounts or unmounts.

Like React, YiDA custom pages also provide page lifecycle capabilities. The implementation is simplified and supports only the following two lifecycle hooks. Write the corresponding JS logic in the action panel to run tasks when the page mounts or unmounts:

* **didMount** — Equivalent to React's componentDidMount. Called after the page renders for the first time.
* **willUnmount** — Equivalent to React's componentWillUnmount. Called before the page unmounts.

## Use Cases

The following example demonstrates how to use lifecycle hooks. Configure the page lifecycle functions in the action panel to perform these operations:

* Listen for the document's resize event after the page mounts.
* Output the current page width in real time via the onResize method.
* Remove the document's resize event listener before the page unmounts.

See the related code below:

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function didMount() {
  console.log(`「Page JS」: Current page URL ${location.href}`);

  window.addEventListener('resize', this.onResize);
}

export function willUnmount() {
  window.removeEventListener('resize', this.onResize);

}

export function onResize() {
  const width = document.documentElement.clientWidth;
  console.log(`current width: ${width}`);
}
```

## Notes