connectedCallBack() In LWC With Example

LWC connectedCallBack()

This is one of the life cycle hooks in web component JavaScript. connectedCallBack function invokes/fires automatically when a certain lwc component is inserted into web dom. It works like an init handler in the lightning aura component, we can say it is lwc init handler. 

Important Points  about ConnectedCallBack()

• It flows from the parent to child component. I.e if the main component has inner component/child components then, ConnectedCallBack function on parent is invoked first, and then ConnectedCallBack of child lwc component will be fired.
• In this function, we can access only host element i.e template. 
• By using "this.template" we can access the host element.
• It's invoked after the constructor hook fired.
• If we want to fire any logic on component load (for example dispatching the event, assigning values to properties) then we should use ConnectedCallBack life cycle hook.

Examples for connectedCallBack in LWC

These are the basic example to understand connectedCallback function. 

In this example, we need to display the list of contacts on the table. While the table is loading we have to show the spinner.

AccountController

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account>  getAccountList(){
        return [SELECT Id, Name,Phone,Industry FROM Account order by createddate desc LIMIT 5];
    }
}

connectedCallbackLwc.html

<template>
    <template if:true={isSpinner}>
        <div class="spinner">
            <lightning-spinner alternative-text="Loading" size="medium"></lightning-spinner>
        </div>
    </template>
    <lightning-card title="connectedCallback Example">
        <lightning-datatable data={accountList} columns={cols} key-field="Id">
        </lightning-datatable>
    </lightning-card>
</template>

connectedCallbackLwc.js

import { LightningElement, wire, track } from 'lwc';
import getLatestAccounts from '@salesforce/apex/AccountController.getAccountList';
const COLS = [
    { label: 'Name', fieldName: 'Name', type: 'text' },
    { label: 'Stage', fieldName: 'Phone', type: 'text' },
    { label: 'Amount', fieldName: 'Industry', type: 'text' }
];
export default class ConnectedCallbackLwc extends LightningElement {
    cols = COLS;
    @track isSpinner = false;
    @track accountList = [];

    connectedCallback() {
        this.isSpinner = true;
    }

    @wire(getLatestAccounts) fetchAccList(result) {
        this.isSpinner = false;
        if (result.data) {
            this.accountList = result.data;
            this.error = undefined;
        } else if (result.error) {
            this.error = result.error;
            this.accountList = [];
        }
    }
}

LWC connectedCallBack() Output:

In above example, we make "isSpinner" equal to true in connectedCallback function, so that we will see spinner on the page load. Once page data loaded we turned off spinner by making "isSpinner" equal to false in fetchAccList wired function

Subjects:

connectedCallback() in JavaScript connectedCallback() In lwc with example init in lwc Lightning Web Components LWC lwc connectedCallback not working when to use connectedcallback in lwc

Share This: