Best Practices in Lightning Web Component (2023)

To improve the performance, we are recommended to use the best practices in Lightning Web Component. Here, we will discuss the most important ones.

 1) Naming convention of LWC component Bundle

     This is how the naming convention of the component bundle should be as shown below:

   

 

• Component name Must begin with a lowercase letter.
• Name must contain only alphanumeric or underscore characters.
• Can’t contain a hyphen (dash).

• Must be unique in the namespace (No other Aura or LWC can have this name).

• Can’t include whitespace.
• Can’t end with an underscore.
• Can’t contain two consecutive underscores.
• Folder and files names must have same “prefix name”.

 

     Html file:

Component name should be in camelCase component and use kebab-                                           case to reference a component in the markup. E.g.:-

       <c-child-Component></c-child-Component>

 

     JavaScript File:

Java Script Class name should be in PascalCase.

import {LightningElement, api} from ‘lwc’;

export default class HelloWorld extends LightningElement {}

 

      Bundle Component: Bundle component name should be in camelCase.

      CSS File:

• Needs to be created in the component bundle
• Should have the same name as the component
• Should uses standard CSS syntax
• Unlike Aura, no need for .THIS

 

     In case you are not aware about different cases then below example will explain:

 

Case Name	camelCase	PascalCase	kebab-case
Example	helloWorld	HelloWorld	hello-world

 

  2) Apex

     There are two way to call Apex class in Lightning web component.

•   Imperatively
•   Wire

 

    Wire Vs Imperatively:

 As per Lightning component best practices use of @wire over imperative method has been  recommended. @Wire fits suitably in the overall Lightning Web Component reactive architecture. Salesforce is building some performance enhancement features that are only available with @wire. But there are a few use cases, where we need to use imperative Apex.

 

  3)  Lightning Data Service

 As per LWC best practice use Lightning Data Service functions to create, update and delete a record over invoking Apex methods. Yes, there are some use cases where you need to fetch multiple records then in that case, we can use Apex methods.

Lightning Data Service is built on top of User Interface API. UI API is a public Salesforce API that Salesforce uses to build Lightning Experience. Like its name suggests, UI API is designed to make it easy to build Salesforce UI. UI API gives you data and metadata in a single response

Give preference to user interface form-type in below order:

 

• lightning-record-form: It is the fastest/most productive way to build a form.

 

• lightning-record-view-form: If you need more control over the layout, want to handle events on individual input fields, or need to execute pre-submission.

 

• @Wire(getRecord): If you need even more control over the UI, or if you need to access data without a UI.

 

4) Events in LWC

There are typically 3 approaches for communication between the components using events.

• Parent to Child event
• Child to Parent custom event
• Publish Subscriber model (Two components which doesn’t have a direct  relation).

 

     Read more: Events in LWC

    Here is some recommendation for DOM Event:

• No uppercase letters
• No Spaces
• use underscores to separate words
• Don’t prefix your event name with string “on”.

 

     5) Use Storable Action

      Use Storable Action, It will reduces call to Server.

Syntax- @AuraEnabled(cacheable=true)

     Note: A storable action might result in no call to the server. Never mark as storable an action         that updates or deletes data.
For storable actions in the cache, the framework returns the cached response immediately and       also refreshes the data if it’s stale. Therefore, storable actions might have their callbacks                   invoked more than once: first with cached data, then with updated data from the server.

    6) Control LWC lifecycle Hooks

 We need to understand the LWC lifecycle hooks so that we don’t run code more than we need  to. We can control it by using Boolean variables so that these hooks are not executed  multiple times.

       Know more: Lifecycle Hooks in LWC

  7) Refresh the cache using refreshApex() and getRecordNotifyChange(): 

To get the updated data on the UI after some operation, make use of the refreshApex() and getRecordNotifyChange() methods for wire and imperative calls respectively.

  8) Use targetConfig for configuring input to LWC

To set the input in LWC from lightning app builder/flow/community make use of the targetConfig property.

        Know more: Design attributes in LWC

9) Include error handling in the code logic: 

We should consider the error scenario as well and notify the user with a user- friendly error message. For this, we can make use of toast message to show high level detail to user on what went wrong.

     Reference: Error handling best practices in  LWC

 10) Avoid using hardcoding, use custom labels: 

Like apex, avoid using hardcoding in LWC. Keep the text inside a custom label and configure as and when required without making any change to existing code.