LWC lifecycle hooks

Same as Aura components, Lightning web components have a lifecycle managed by the framework. The framework is in charge of:

• In the creation phase, create the components, insert them into the DOM, and finally render them.
• In the destroy phase, remove them from the DOM.

You can check nice diagrams for both phases here.

During these phases, there are hooks that you can use, either to inject some extra code or to directly override the behaviour:

constructor()

• Hook that fires when a component instance is created.
• You have to call super() in the first line.
• At that point, the component properties won’t be ready yet.
• It flows from parent to child.
• The equivalent in Aura is the init() event. Beware the init() Aura event flows from child to parent.

connectedCallback()

• Fires when a component is inserted into the DOM.
• The component properties will be ready, but the child elements won’t be yet.
• It can fire more than once.
• It flows from parent to child.
• There is no equivalent to connectedCallback() in Aura components.

render()

• Hook that overrides the standard rendering functionality.
• Gets invoked after connectedCallback() and must return a valid HTML template.
• It can fire more than once.
• It flows from parent to child.
• The equivalent in aura were the render() / rerender() methods of the custom renderer file.
  • Beware the render() Aura event flows from child to parent.
  • Beware the rerender() Aura event flows from parent to child.

renderedCallback()

• Fires when a component rendering is done.
• It can fire more than once.
• It flows from child to parent.
• The equivalent in aura was the afterRender() method of the custom renderer file. Beware the afterRender() Aura event flows from child to parent too.

disconnectedCallback()

• Fires when a component is removed from the DOM.
• It can fire more than once.
• It flows from parent to child.
• The equivalent in aura was the unrender() methods of the custom renderer file. Beware the unrender() Aura event flows from child to parent.

errorCallback(error, stack)

• Captures errors that may happen in all the descendent components lifecycle hooks.

Here you have two useful use cases for these hooks:

1.Dynamic renderization of components: you can use the render() hook to render different templates according to some conditions. Eg

import { LightningElement } from 'lwc';
import tmpl1 from './tmpl1.html';
import tmpl2 from './tmpl2.html';

export default class DynamicComponent extends LightningElement {
    render () {
        if (whateverConditionsAreMet) {
            return tmpl1;
        } else {
            return tmpl2;
        }
    }
}

2. Component that is an error boundary for the descendent components lifecycle hooks: you can use the errorCallback() to implement such component.

<template>
	<template if:true={error}>
		<p>Error: {error}</p>
		<p>Info: {stack}></p>
	</template>
	<template if:false={error}>
		<c-child></c-child>
	</template>
</template>

import { LightningElement, track } from 'lwc';

export default class ErrorBoundary extends LightningElement {
	@track error;
	@track stack;

	errorCallback(error, stack) {
		this.error = error;
		this.stack = stack;
	}
}

If you want to know more, read the LWC documentation.