Lifecycle Hooks in LWC (Lightning Web Components)

 A lifecycle hook is a callback method which is called automatically at a specific phase of a component lifecycle. These are managed by LWC framework. These hooks get called at different phases like initialization of components, when elements gets inserted in DOM or removed from DOM, rendering of components based on property changes etc.

Lets go through different lifecycle hooks:

constructor()

• Whenever component is created, this function gets called.
• This hook flows from parent to child, which means that it fires in the parent first.
• As child element do not exist, you cannot access them.
• Properties are mainly assigned to component after constructor() and before connectedCallback()
• If you define constructor() callback then you should always super() from constructor(). This is because every LWC component extends LightningElement and since LightningElement has its own constructor, so we should first invoke the parent constructor.

import { LightningElement } from 'lwc'
export default class ConstructorCallbackExample extends LightningElement{
	constructor(){
		super();
	}
}

connectedCallback()

• When the element is inserted into a document, this function gets called.
• This hook flows also from parent to child. So you can’t access child elements because they don’t exist yet.
• Properties are assigned to component so this callback can be used to perform or fetch initial data set.
• If you manipulate the elements means adding or removing element from component, then connectedCallback() will fire more than once. So always put some checks if you don’t want to run particular logic everytime.
• connectedCallback() can be used to Subscribe and Unsubscribe from a Message Channel.

import { LightningElement } from 'lwc'
export default class ConnectedCallbackExample extends LightningElement{
	connectedCallback(){
		console.log('***connected callback is called');
	}
}

renderedCallback()

• renderedCallback() gets called after every render of component. Whenever value of reactive component changes, component get rendered.
• renderedCallback() is specific to LWC and it has no dependency in HTML custom elements specifications.
• renderedCallback() flows from child to parent.
• Remember, updating state of component can cause infinite loop. So don’t update a public property or field in renderedCallback(). If you perform changes to reactive attributes, guard them or they can trigger wasteful rerenders or an infinite rendering loop.
• Also don’t update a wire adapter configuration object property in renderedCallback(). 

disconnectedCallback()

• Whenever an element is removed from DOM, then disconnectedCallback() is called.
• This hook flows from parent to child.
• Use disconnectedCallback() to clean up work done in the connectedCallback(), like purging caches or removing event listeners or unsubscribe from a message channel.

import { LightningElement } from 'lwc'
export default class disconnectedCallbackExample extends LightningElement{
	disconnectedCallback(){
    	console.log('**** disconnectedCallback is called');
    }
}

render()

• If there is need to display different UI to end user based on some conditions, then we can have 2 different HTML files and decide which HTML file to render based on conditions.
• Render() may be called before or after connectedCallback().
• Imagine that you have a component that can be rendered in two different ways but you don’t want to mix the HTML in one file. Create multiple HTML files in the component bundle. Import them both and add a condition in the render() method to return the correct template depending on the component’s state.
• Although it’s possible for a component to render multiple templates, it is recommended to use  lwc:if|elseif|else directives to render nested templates conditionally instead.

import { LightningElement } from "lwc";
import templateOne from "./templateOne.html";
import templateTwo from "./templateTwo.html";
export default class MiscMultipleTemplates extends LightningElement {
  showTemplateOne = true;
  render() {
    return this.showTemplateOne ? templateOne : templateTwo;
  }
  switchTemplate() {
    this.showTemplateOne = !this.showTemplateOne;
  }
}

errorCallback(error, stack)

• The errorCallback(error, stack) hook is called when the component throws an error.
• The error argument is a JavaScript native error object, and the stack argument is a string.
• This method works like a JavaScript catch{} block for catching errors.
• The 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. errorCallback() catches errors that occurs in the descendant components but not itself. 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

import { LightningElement } from "lwc";
export default class ErrorCallbackExample extends LightningElement {
  error;
  stack;
  errorCallback(error, stack) {
    this.error = error;
  }
}

Hope this will help!!

Communicate from Parent to Child Component in LWC

There are few scenarios where we need to pass property/values from parent component to child component in LWC. There are different ways to achieve this:

• Using @api decorator (public property)

The @api decorator in the child component makes property as public, which can be utilised by parent component to update it. So whenever you add child component in parent component, then specify child public property as an attribute and pass the value from parent component property. 

For example, Child component contains public property "passedUrl" with @api decorator

-----------childComponent.html--------------------

<template>
    <div style="background-color:#b2b689;border-style: solid;">
        <b>Child component</b>
	<p>URL passed from parent-<b>{passedUrl}</b></p>
    </div>
</template>

--------childComponent.js---------------------

import { LightningElement,api} from 'lwc';
export default class SkChildComponent extends LightningElement {
    @api passedUrl;    
}

Now if you have to pass value to "passedUrl" property from parent component then just specify attribute as property name and pass any value from parent component property.

--------parentComponent.html---------------------

<template>
    <lightning-card  title="Communicate from Parent to Child">
        <div style="background-color:#E6E6FA;border-style: ">
            <b>This is parent Component</b>            
            <c-child-component passed-url={selResourceURL} >
            </c-child-component> 
        </div>
	</lightning-card> 
</template>

--------parentComponent.js---------------------

import { LightningElement,track } from 'lwc';
export default class SkParentContainerCmp extends LightningElement {
	@track selResourceURL='https://www.sfdcstuff.com/';
}

• Using getter setter property in child component

you can define @api property with separate getter setter defined. Whenever the value of this property changes from parent component, your setter method for that property will always get called. Now you can define your custom logic if you have and then utilise that in child component.

--------childComponent.js---------------------

import { LightningElement,api,track } from 'lwc';
export default class SkChildComponent extends LightningElement {
    @track _userInputNumber;
    @api
    get userInputNumber(){
        return this._userInputNumber;
    }
    set userInputNumber(value){
        //write your logic to set any property
        this._userInputNumber=value;
    }
}

• By accessing child function from parent component

You can decorate the function defined in child component with @api. Now parent component can access this public function. By using this method, you can invoke function defined in child component.

Suppose you have defined below function in child component:

@api
increaseCounter(){
   //your logic
}

Now from parent component you can access this function by using below syntax:

this.template.querySelector('c-child-component').increaseCounter();

I have created parent and child component to explain how this communication from parent to child component happen. Please find below complete code snippet and components snapshot:

Complete Code

Hope this will Help!!