1

I have below JS code in LWC

        @track arrayLength = 0;
    //  changed its vale from 0 to 5 in one of the wire methods


    @track 2ndArrayLength = 0
    // changed its value in another wire method from 0 to 10

// still it returns 0 in renderedCallback

renderedCallback() {
   console.log(this.arrayLength ); //  returns 0
   console.log(this.2ndArrayLength); // returns 0 not updated value 
 }

My requirement is to fire an event when both the arrayList form wire method are not equal to 0, please suggest.

4

renderedCallback called after every render of the component. This lifecycle hook is specific to Lightning Web Components, it isn’t from the HTML custom elements specification. This hook flows from child to parent.

Let's understand it better. See the below code:-

import { LightningElement, track, wire } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class LifeCycle extends LightningElement {
    @track contacts;
    @track error;    
    @wire(getContactList)
    wiredContacts({ error, data }) {
    if (data) {
        this.contacts = data;
        this.error = undefined;
        console.log('wiredmethod success contacts ' + this.contacts);
        console.log('wiredmethod success error ' + this.error);
    }else if (error){
        this.error = error;
        this.contacts = undefined;
        console.log('wiredmethod onerror contacts ' + this.contacts);
        console.log('wiredmethod onerror error ' + this.error);
      }
    }   
    connectedCallback() {
        console.log('this.contacts conectedCallback ' + this.contacts);
         console.log('this.error conectedCallback ' + this.error);
    } 
    constructor() {
        super();
        console.log('this.contacts constructor ' + this.contacts);
        console.log('this.error constructor ' + this.error);
    }
    renderedCallback() {
        console.log('this.contacts' + this.contacts);
        console.log('this.error' + this.error); 
    }    
}

When this code runs and generate outputs, It is as below:-

enter image description here

First constructor gets fired then connected callback and then renderedcallback as it completes the lifecycle. Then wired method gets called and it sets the properties values and it fired the renderedcallback once again.

This gives you an explanation of order of execution of your js code.

Coming to your requirement to fire an event when both the arrayList form wire method are not equal to 0, see below points:-

  • The renderedcallback is getting fired twice in above case, your logic will not work for the first time but it will in the second time.
  • You need to stop the renderedCallback by getting it entered into an infinite loop. See a sample example here:- Run Code When a Component Renders
  • 1
    yes, this is some useful information, thank you so much for sharing – gs650x Dec 11 '19 at 13:30
  • 1
    Very nice illustration of the order of execution in LWC. – Matthew Souther Dec 11 '19 at 18:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.