# Custom Component Lifecycle Callbacks The lifecycle callbacks of a custom component are used to notify users of the lifecycle of the component. These callbacks are private and are invoked by the development framework at a specified time during running. They cannot be manually invoked from applications. ## Lifecycle Callback Definition

Function

Description

aboutToAppear

Executed after a new instance of the custom component is created and before its build function is executed.

You can change state variables in the aboutToAppear function, which will take effect when you execute the build function later.

aboutToDisappear

Executed before the destructor of the custom component is consumed.

Do not change state variables in the aboutToDisappear function. Especially, the modification of the @Link annotated variable may cause unstable application behavior.

onPageShow

Invoked when the page is displayed. The scenarios include the routing process and scenarios where the application is switched to the foreground or background. Only the custom components decorated by @Entry take effect.

onPageHide

Invoked when the page is hidden. The scenarios include the routing process and scenarios where the application is switched to the foreground or background. Only the custom components decorated by @Entry take effect.

onBackPress

Invoked when a user clicks the back button. Only the custom components decorated by @Entry take effect.

  • The value true is returned if the page processes the return logic and does not route the page.
  • false is returned if the default return logic is used.
  • If no value is returned, the default return logic is used.
## Example ``` @Component struct CountDownTimerComponent { @State countDownFrom: number = 10 private timerId: number = -1 private aboutToAppear(): void { this.timerId = setInterval(() => { if (this.countDownFrom <= 1) { clearTimeout(this.timerId) } this.countDownFrom -= 1 }, 1000) // decr counter by 1 every second } private aboutToDisappear(): void { if (this.timerId > 0) { clearTimeout(this.timerId) this.timerId = -1 } } build() { Text(`${this.countDownFrom} sec left`) } } ``` The example above shows that lifecycle functions are critical to allowing **CountDownTimerComponent** to manage its timer resources. Similar functions include loading resources asynchronously from the network. >![](../../public_sys-resources/icon-note.gif) **NOTE:** >- Promise and asynchronous callback functions can be used in lifecycle functions, for example, network resource getters and timer setters. >- Do not use **async await** in lifecycle functions.