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

componentWillLoad Called once just after the component is first connected to the DOM. Since this method is only called once, it's a good place to load data asynchronously.

afterViewInit

componentDidLoad

Called once just after the component fully loaded and the first render() occurs.

onDestroy

disconnectedCallback

Called every time the component is disconnected from the DOM, ie, it can be dispatched more than once, DO not confuse with a "onDestroy" kind of event.

Even though it would get called multiple times, but with the right checks in place, this acts as the destroy hook.

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.

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

Last updated

Was this helpful?