ConnectedCallback in LWC example

connectedCallback in LWC

These are runs at When a Component Is Inserted or Removed from the DOM. The connectedCallback in LWC lifecycle hook fires when a component is inserted into the DOM. As flow is from parent to child, do not access child elements in the component body because they don’t exist yet. Parent elements can be accessed and modified in this hook.

disconnectedCallback()

  • Invokes when the component is removed from the DOM.
  • Flow is from parent to child.

Callback.html

<template>
    <div>Lifecycle hooks – Callback- LWC</div>
</template>

Callback.js

import { LightningElement } from ‘lwc’;
export default class Callback extends LightningElement {
    constructor(){
        super();
      console.log(‘Inside constructor’);
  }
connectedCallback() {
      console.log(‘Inside connected callback’);
  }
disconnectedCallback(){
        console.log(‘Inside disconnected callback’);
    }}

Output:

image 22
Scroll to Top