Lifecycle Hooks in Mounting Phase in LWC – Parent/Child
Life Cycle Parent Component:
<template>
<lightning-card title="Lifecycle hook parent card">
<div class="slds-var-m-around_medium">
<input type="text" onkeyup={changeHandler}/>
{name}
<c-life-cycle-child></c-life-cycle-child>
</div>
</lightning-card>
</template>
import { LightningElement } from 'lwc';
export default class LifeCycleParent extends LightningElement {
isChildVisible = false
constructor(){
super()
console.log("parent constructor called")
}
connectedCallback(){
console.log("parent connectedCallback called")
}
renderedCallback(){
console.log("parent renderedCallback called")
}
name
changeHandler(event){
this.name = event.target.value
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>49.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
Life Cycle Child Component:
<template>
<lightning-card title="Lifecycle hook Child card">
<div class="slds-var-m-around_medium">
</div>
</lightning-card>
</template>
import { LightningElement } from 'lwc';
export default class LifeCycleChild extends LightningElement {
constructor(){
super()
console.log("Child constructor called")
}
connectedCallback(){
console.log("Child connectedCallback called")
throw new Error('Loading of child component failed')
}
renderedCallback(){
console.log("Child renderedCallback called")
}
}