A lifecycle hook is a callback method triggered at a specific phase of a component instance's lifecycle.
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:
/* eslint-disable no-console */
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>
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:
/* eslint-disable no-console */
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>
