Hi All,
we have below Lighting web component Lifecycle Hook with in Salesforce.
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>
