Onload in Aura Vs Lightning Web Component

Do you want to use your Lightning Web Component inside an Aura Lightning Component? Are you looking for implementing some logic after onload of both components but don’t know which one is going to fire first? Let’s understand the onload in Aura Vs Lightning Web Component in this blog.

We are going to create two Lightning components to understand this behavior. They are:-

• lwcComponent – A Lightning web Component
• customAuraComponent – An Aura Lightning Web component

Also, Have you heard of init handler in Aura Component? This event is fired when when an app or component is initialized, prior to rendering.

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

What about connectedCallback in Lightning Web Component? The connectedCallback() lifecycle hook fires when a component is inserted into the DOM. If you have to do something onload of the Lightning web component, use this method.

connectedCallback(){
        //do something
} 

It’s time to implement these in our components. Generally, A lightning web component has three file but you can add some additional files too into it.

lwcComponent.html

The html does have a lightning card with title understand Onload behavior and an icon.

<template>
    <lightning-card title="Understand Onload behaviour" icon-name="custom:custom63">
        <div>I am a child Lightning Web Component</div>
    </lightning-card>
</template>

lwcComponent.js

The js file of the component has the connectedCallback() method which does fires when component gets loaded. We are just printing a console log to understand the order of execution.

import { LightningElement } from 'lwc';

export default class LwcComponent extends LightningElement {
    connectedCallback() {
        console.log('LWC Component Loaded Successfully');
    }
}

lwcComponent.js-meta.xml

The meta.xml file defines the metadata information like where you can use it, api version. master label etc. We have not exposed our component directly to Salesforce. We will call it inside the Aura Component.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

Now, Its time to create an Aura component.

customAuraComponent.cmp

The component file has the init handler which will fire when component gets loaded. It is also calling the lightning web component inside it.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >               
    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
    <c:lwcComponent/>
</aura:component>

customAuraComponent.js

The init method here is adding a log into the console.

({
	doinit : function(component, event, helper) {
		console.log('Aura Component Loaded');
	}
})

When you add the Aura Component on lightning page, You can see the onload behavior in console of the browser.

Conclusion – Onload in Aura Vs Lightning Web Component

The init handler in Aura gets fired first than connectedCallback in Lightning Web Component. In simple word, If you have a parent Aura and child Lightning Web Component, connectedCallback() defined in child component will get fire later than init handler in Aura Component.

Thank you for reading out the blog. Check out some cool stuff on Lightning Web Component here:- CATEGORY: LIGHTNING WEB COMPONENT