Lightning Web Component lifecycle hooks

Hi All,

we have below Lighting web component Lifecycle Hook with in Salesforce.

• constructor()
•  connectedCallback() 
• disconnectedCallback()
• render()
• renderedCallback()
• errorCallback(error,stack)

let disscuse more detail about these lifecyle stage of the LWC.

1.constructor()

•  Constructor is invoked when the component is created.
•  since flow is from parent to child, do not access child elements in the component body because they       don't exist yet.
•  First Statement must be super() with no parameters.

2.connectedCallback()

•  Connectedcallback is invoked when the component is inserted into DOM.
•  since flow is from parent to child, do not access child elements in the component body because they      don't exist yet.
•  we can access the Parent elements and modify them in this hook.

3.disconnectedCallback()

•  disconnectedCallback is invoked when component is removed from DOM.
•  This hook flows from parent to child.
•  it can fire more than once.

4.render()

•  This hook is used to override the standard rendering functionality.
•  It gets called after connectedCallback() and it returns a valid HTML template.
•  This hook flows from parent to child.
•  It can fire more than once.

5.renderCallback()

•  Called after component is rendered.
•  This hook flows from child to parent.
•  It can fire more than once.

6.errorCallback(error,stack)

•  This hook is called when the component throws an error in one of its hooks.
•  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.

ex:

import { LightningElement,api } from 'lwc';

import temp1 from './hooktemp1.html';

import temp2 from './hooktemp2.html';

export default class Lwchooks extends LightningElement {

    @api templateSelected='temp1';

    constructor(){

        super();

        console.log('Inside of Constructor');

    }

    connectedCallback(){

        console.log('Inside of connectedCallback');

    }

    disconnectedCallback(){

        console.log('Inside of disconnectedCallback');

    }

    handleTemplate(){

        if(this.templateSelected==='temp1'){

            this.templateSelected= 'temp2';

        }else{

            this.templateSelected='temp1';

        }

    }

    render(){

       console.log('Inside render');

       if(this.templateSelected==='temp1')

       // return tempalte 1

        return temp1;

       // return tempalte 2

        return temp2;

         

    }

    renderedCallback(){

        console.log('Inside renderedCallback');

    }

    errorCallback(error,stack){

        console.log('Inside error Callback'+ error + stack);

    }

}

<!--hooktemp1.html -->

<template>

    <div> Displayed Template 1 </div>

    <lightning-button label="Show Template 2" onclick={handleTemplate}></lightning-button>

</template>

<!--hooktemp2.html -->

<template>

    <div> Displayed Template 2 </div>

    <lightning-button label="Show Template 1" onclick={handleTemplate}></lightning-button>

</template>

We can find more detail about over Salesforce official document