A lifecycle hooks in LWC is a callback method triggered at a specific phase of a component instance’s lifecycle.
Lightning web components have a lifecycle managed by the framework. The framework creates components, inserts them into the DOM, renders them, and removes them from the DOM. It also monitors components for property changes. Generally, components don’t need to call these lifecycle hooks, but it is possible.
- errorCallback(error, stack)
This diagram shows the flow of the component lifecycle from creation through render.
This diagram shows what happens when a component instance is removed from the DOM.
- Run Code When a Component Is Created
constructor() method fires when a component instance is created. Don’t add attributes to the host element during construction. You can add attributes to the host element in any other lifecycle hook.
- Run Code When a Component Is Inserted or Removed from the DOM
connectedCallback() lifecycle hook fires when a component is inserted into the DOM. The
disconnectedCallback()lifecycle hook fires when a component is removed from the DOM.
- Run Code When a Component Renders
renderedCallback()is unique to Lightning Web Components. Use it to perform logic after a component has finished the rendering phase.
- Handle Component Errors
errorCallback() is unique to Lightning Web Components. Implement it to create an error boundary component that captures errors in all the descendent components in its tree. It captures errors that occur in the descendant’s lifecycle hooks or during an event handler declared in an HTML template. You can code the error boundary component to log stack information and render an alternative view to tell users what happened and what to do next.