Best Practices for Salesforce Lightning Web Components (LWC)

Always Name Carefully

1. Always name variables, methods, and components carefully. 
2. Do not start a property name with ‘on’, ‘aria’, or ‘data’. 
3. Do not use reserved keywords like ‘slot’, ‘part’, or ‘is’. 

Naming Convention

1. Try to name your files in the below format
   • Component Name – camelCase
   • Component Class Name – PascalCase
   • Component reference – kebab-case 
   • HTML Attribute Name – kebab-case 

Don't forget to check out: Assign Permission Set at the User Creation Made Simple: What You Need to Know | Salesforce Guide

 Use Spread Operator for adding additional attributes in data returned from Apex

1. We frequently need to add extra properties to the data returned from apex according to the requirement. 

 Be mindful of Case Sensitivity

1. Lightning Web Components are case-sensitive.  
2. Be very careful while writing your writing code. 

 Instead of Expressions, Use Getters

1. Use a JavaScript getter, to compute a value for a property. 
2. Getters are more powerful than expressions because these are JavaScript functions and also enable unit testing, which reduces bugs and increases the fun.   

 Do not forget to assign a key to each

1. While using iteration in LWC, do not forget to assign the key attribute within the scope of the iteration. 
2. Otherwise, you will get the below error: " Elements within iterators must have a unique, computed key value. "

 Use an iterator to apply special rendering to the first and last elements of list

1. If you want to apply a special style or rendering to the first and last element of the list, use iterator instead of for:each. 
2. Iterator has two more attributes: first and last. 

Pass only primitive data in custom event

1. As one of the best practices, pass only primitive data types in custom events. 
2. JavaScript passes all data types by reference except for primitive data types. 
3. So, any listener can mutate the actual object which is not good practice.   
4. If at all we need to pass an object, we need to copy the data to a new object before sending it so that it does not get changed by any of the listeners. 

Use LDS whenever possible

1. Instead of making apex calls to get the data, try to use LDS. 
2. It requires no apex code and can perform Create, Read, Update, Delete operations on a single record.  
3. It also takes care of the sharing rules and field-level security. 

Avoid using hardcoding, use custom labels

1. Similar to apex, avoid using hardcoding in LWC.  
2. Keep the text inside a custom label and configure it as and when required without making any changes to existing code. 

Don't forget to check out: Assign Permission Set at the User Creation Made Simple: What You Need to Know | Salesforce Guide

Include error handling in the code logic

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

Specify fields instead of layout in lightning-record-form

1. To improve performance, specify specific fields instead of layout in lightning-record-form.  
2. If we specify the layout, the component must handle receiving every field that is assigned to the layout for the context user.