> For the complete documentation index, see [llms.txt](https://roshankhandelwal.gitbook.io/stenciljs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://roshankhandelwal.gitbook.io/stenciljs/this-and-that/swap-lifecycle.md).

# Swap - Lifecycle

<https://stenciljs.com/docs/component-lifecycle> \
Components have numerous lifecycle methods which can be used to know when the component "will" and "did" load, update, and render. *These methods can be added to a component to hook into operations at the right time.*

| **Angular**       | StencilJS Equivalent                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **onInit**        | <p><a href="https://stenciljs.com/docs/component-lifecycle#componentwillload">componentWillLoad</a><br>Called once just after the component is first connected to the DOM. <em>Since this method is only called once, it's a good place to load data asynchronously.</em></p>                                                                                                                                                            |
| **afterViewInit** | <p> <a href="https://stenciljs.com/docs/component-lifecycle#componentdidload">componentDidLoad</a></p><p>Called once just <strong>after</strong> the component fully loaded and the first render() occurs.</p>                                                                                                                                                                                                                           |
| **onDestroy**     | <p> <a href="https://stenciljs.com/docs/component-lifecycle#disconnectedcallback">disconnectedCallback</a></p><p>Called <strong>every time</strong> the component is disconnected from the DOM, ie, it can be dispatched more than once, <strong>DO not confuse</strong> with a "onDestroy" kind of event.</p><p>Even though it would get called multiple times, but with the right checks in place, this acts as the destroy hook. </p> |

&#x20;And then there are other methods which are related around the **render()** method. *Just having an explicit render method, gives you so much more control.*&#x20;

Also these methods, kind of follow the Web Components Standards, which have similar lifecycle hooks.&#x20;


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://roshankhandelwal.gitbook.io/stenciljs/this-and-that/swap-lifecycle.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.