💃 Checking out LWC lifecycle hooks 🕺

Good morning, Salesforce Nerds! This past sprint my team had a what seemed like a ton of LWC work to get through. 🏋️ 

We’re organizing around an effort to streamline some of our more critical processes so it’s fitting …

Every now and then I like to dust off my front-end skillset and get my hands dirty! Being a TA, I don’t get the opportunity to do this kind of stuff much anymore. 😭 

I had a good time. And was able to help create a customer facing component for our client portal. 🤙 

It got me thinking about some of the things devs should know when writing LWC’s … :

Today let’s check out the LWC Lifecycle Hooks! 🎉 

TABLE OF CONTENTS

LWC lifecycle

• What are LWC lifecycle hooks?

• Details on each lifecycle hook

• The lifecycle flow

DIG A LITTLE DEEPER

What are LWC lifecycle hooks?

The LWC Dev Guide says:

Per usual, let’s break this down a bit for the non-dev’s out there. 🫠 

First, you need to know these three things:

1️⃣ The purpose of a callback method is to execute code in response to an event.

2️⃣ A component has a instance lifecycle comprised of different phases.

3️⃣ Each phase triggers it’s own callback method that a dev can handle in their LWC.

Ultimately, these hooks provide devs the ability to control and/or respond to various stages of a component’s lifecycle. 🔥 

We do this by leveraging predefined methods we can write code against.

This is awesome because it gives you more fine-tuned approach to building front-end apps.

BREAKING THEM DOWN

Details on each lifecycle hook

Alright, so I don’t want this to get too technical. So, I’m gonna link off to the technical bits that Salesforce put together for each hook.

They’re super good and informative! 👏 

Let’s get into the most important bits here to keep in mind.

⚡️ constructor()

👉️ Developer Guide

💥 Run code when the component is created.

Called when the component is created. This hook flows from parent to child, which means that it fires in the parent first. You can’t access child elements because they don’t exist yet. Properties aren’t passed yet, either. Properties are assigned to the component after construction and before the connectedCallback() hook.

⚡️ connectedCallback()

👉️ Developer Guide

💥 Run code when the component is inserted into the DOM

Called when the element is inserted into a document. This hook flows from parent to child. You can’t access child elements because they don’t exist yet.

Use connectedCallback() to interact with a component's environment. For example, use it to:

• Establish communication with the current document or container and coordinate behavior with the environment.

• Perform initialization tasks, such as fetch data, set up caches, or listen for events

• Subscribe and Unsubscribe from a Message Channel.

⚡️ renderedCallback()

👉️ Developer Guide

💥 Run code when the component is rendered

Called after every render of the component. This lifecycle hook is specific to Lightning Web Components, it isn’t from the HTML custom elements specification. This hook flows from child to parent.

A component is re-rendered when the value of a property changes and that property is used either directly in a component template or indirectly in the getter of a property that is used in a template.

If you use renderedCallback() to perform a one-time operation, you must track it manually (using an initialRender private property, for example). If you perform changes to reactive attributes, guard them or they can trigger wasteful rerenders or an infinite rendering loop.

Use renderedCallback() to interact with a component's UI. For example, use it to:

• Compute node sizing

• Perform tasks not covered by our template declarative syntax, such as add a listener for a non-standard event from a component’s child

⚡️ disconnectedCallback()

👉️ Developer Guide

💥 Run code when the component is removed into the DOM.

Called when the element is removed from a document. This hook flows from parent to child.

Use disconnectedCallback() to clean up work done in the connectedCallback(), like purging caches or removing event listeners.

You can also use this hook to unsubscribe from a message channel.

⚡️ errorCallback()

👉️ Developer Guide

💥 Run code when a descendent component throws an error.

This lifecycle hook is specific to Lightning Web Components, it isn’t from the HTML custom elements specification.

Implement this hook to create an error boundary component that captures errors in all the descendent components in its tree. Use the error boundary component’s errorCallback() lifecycle hook to log stack information and render an alternative view to tell users what happened and what to do next. The method works like a JavaScript catch{} block for components that throw errors in their lifecycle hooks or in their event handlers declared in an HTML template. It’s important to note that an error boundary component catches errors only from its children, and not from itself.

GOING WITH THE FLOW

The lifecycle flow

At a high-level the order is as follows:

✅ constructor()

✅ connectedCallback()

✅ renderedCallback()

✅ disconnectedCallback()

The official flow diagram from the mothership 🛸 is shown below. It’s show’s an instance where we have a child LWC nested within a parent LWC.

SOUL FOOD

Today’s Principle

and now....Salesforce Memes