The components lifecycle contains three methods that execute according to the render scenario.
On Initial Render
- init
- didReceiveAttrs
- willRender
- didInsertElement
- didRender
On Re-Render
- didUpdateAttrs
- didReceiveAttrs
- willUpdate
- willRender
- didUpdate
- didRender
On Component Destroy
- willDestroyElement
- willClearRender
- didDestroyElement
The following table lists down the different ways of using lifecycle hooks within components −
| S.No. | Lifecycle Ways & Description |
|---|---|
| 1 | Attribute Change with didUpdateAttrs The didUpdateAttrs hook can be used when the component’s attributes have changed and called before re-rendering the component. |
| 2 | Attributes with didReceiveAttrs The didReceiveAttrs hook can be used after the init method and called when the component’s attributes are updated. |
| 3 | Third-Party Libraries with didInsertElement You can initialize and attach the 3rd party libraries into the DOM element by using this hook. |
| 4 | Rendered DOM with didRender The didRender hook is called to make update to the DOM when the template has rendered. |
| 5 | Detaching and Tearing Down with willDestroyElement You can remove the component elements from the DOM by triggering the willDestroyElement hook. |
Previous Page:-Click Here