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()

renderedCallback()

disconnectedCallback()

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: