Free computer code on screen

Best Practices and Considerations for Lightning Web Components (LWC)

/ apex, LWC, Salesforce / By

Hello again! This blog post will have a unique format as I’ll continually update it with the latest insights.

In this blog post, I’ll be discussing best practices and considerations related to LWC, drawing from my own personal experiences in addition to Salesforce recommendations.

To begin, let’s dive into the topic of FOR LOOPS.

1.Working with FOR LOOPS

JavaScript ES6 introduces a unique variety of FOR LOOPS (you can explore the details by clicking here), but when working with LWC, it’s crucial to utilize the one that aligns with the LWC architecture.

For instance, if you intend to employ the forEach method,

this.lstAccounts.forEach(function(acc){
    console.log(acc.Name);
});

Inside this loop, accessing THIS.VARIABLE won’t be possible. Here’s an illustration:

this.lstAccounts.forEach(function(acc){
    console.log(acc.Name);
    console.log(this.someBooleanval); //THIS VALUE WILL BE NULL
});

This occurs because this type of loop also utilizes this and attempts to retrieve the value within a loop where such a variable is not assigned, resulting in a NULL value.

So, what’s the recommended course of action? Utilize an alternative FOR LOOP, such as:

for(let acc of this.lstAccounts){
    console.log(acc.Name);
   console.log(this.someBooleanval); //VALUE WILL BE ACCESSIBLE HERE
}

2.Handling Time Fields

The number you have is in milliseconds, such as “65700000.” We need to convert it into a time format directly in JavaScript. I employed the following method to achieve this.

// Convert milliseconds into 'h:mm a' time format
    msToTime(s){
        let ms = s % 1000;
        s = (s - ms) / 1000;
        let secs = s % 60;
        s = (s - secs) / 60;
        let mins = s % 60;
        let hrs = (s - mins) / 60;
        hrs = hrs < 10 ? '0' + hrs : hrs;
        mins = mins < 10 ? '0' + mins : mins;
        console.log(hrs + '  ' + mins);
        return hrs+':' + mins + ':00.000Z';
    }

3.Binding with setInterval

setInterval operates on a separate browser subthread and doesn’t retain the context of what occurs afterward.

Consider this code as an example.

var count = 0;
var intervalID = setInterval(function (){
  this.count++;
  console.log(this.count);     // prints number from 0 to percentage
  if (this.count === this.percentage) {
    clearInterval(intervalID);
  }
},10)
console.log(this.count);       // prints 0

The second console statement displays ‘0,’ illustrating that the context isn’t preserved. To rectify this, we must bind the context to each anonymous function call that is executed.

Simply utilize:

.bind(this) // 'this' is the context

As a result, the JavaScript code transforms into:

import { LightningElement, track } from 'lwc';
export default class App extends LightningElement {
  @track count = 0;
  @track percentage = 99;
  
  connectedCallback() {
    var intervalID = setInterval(function (){
      this.count++;
      if (this.count === this.percentage) {
        clearInterval(intervalID);
      }
    }.bind(this),10);
  }
}

I trust this information will prove beneficial to you in the future. I’ll continue to update this post with the latest insights.

Happy Coding!

Related Posts