10 LWC Best Practices

Lightning Web Components (LWC) is a new programming model from Salesforce. It’s a modern, standards-based approach that makes it easy to build reusable components that work across all Lightning Experience and Lightning Platform applications.

In this article, we will share 10 best practices for working with Lightning Web Components. These tips will help you get the most out of this new programming model and build better components.

1. Use @track for reactive properties

Reactive properties are those that need to be updated in the UI when they change. By using @track, LWC automatically re-renders the component and updates the UI whenever a reactive property changes. This is much more efficient than using methods like forceUpdate() or setState().

There are other benefits to using @track as well. It helps improve performance by only re-rendering the parts of the component that have changed, and it also makes debugging easier because you can see exactly what has changed in the component’s state.

2. Avoid imperative methods

Imperative methods are those that mutate the state of an object, and they can be very dangerous in LWC because they can lead to unexpected side effects. For example, if you have a component that uses an imperative method to set a property on an object, and another component that uses that same object, the second component will see the changes that were made by the first component. This can lead to all sorts of problems, so it’s best to avoid using imperative methods altogether.

Instead, you should use declarative methods, which are those that don’t mutate the state of an object. Declarative methods are much safer to use because they can’t cause unexpected side effects.

3. Don’t use DOM manipulation in LWC

LWC is a declarative framework, which means that you describe what you want to happen, and the framework takes care of making it happen. This is in contrast to an imperative framework like jQuery, where you have to write code that explicitly manipulates the DOM.

The declarative nature of LWC makes it much easier to develop and maintain your code, because you don’t have to worry about keeping track of all the different ways that the DOM could be manipulated. It also makes your code more portable, because it will work with any future changes to the DOM that might be made by the browser or by other JavaScript frameworks.

4. Use Lightning Data Service (LDS) to load and save data

LDS is a service that provides access to Salesforce data in the Lightning Platform. It’s designed to work with custom and standard objects, and it supports both single-record and bulk operations. LDS is also optimized for performance, so it can help your LWCs load data faster.

When you use LDS in your LWCs, you can take advantage of its caching capabilities. This means that data is only loaded from the server when it’s needed, and it’s automatically refreshed when changes are made. This can help improve the performance of your LWCs, and it can also help reduce the amount of code you need to write.

LDS is also easy to use. You can declaratively specify which data you need to load, and LDS will take care of the rest. This can help you save time and effort, and it can also help make your code more readable and maintainable.

5. Use wire adapters to get data from Salesforce

Wire adapters are declarative and provide a way to get data from Salesforce without having to write any Apex code. This is important because it means that you don’t have to deploy your code to production every time you want to test a change.

It also means that you can take advantage of Salesforce’s caching mechanisms, which can improve the performance of your components.

Finally, using wire adapters makes it easier to unit test your components, as you don’t have to mock the data that you’re retrieving from Salesforce.

6. Use lightning-record-form instead of force:recordData

force:recordData is a very low-level component that gives you a lot of control over how data is fetched and saved, but it’s also very easy to use it in an inefficient way. For example, if you’re fetching data for multiple fields, force:recordData will make a separate Apex call for each field, which can quickly add up.

lightning-record-form, on the other hand, is a higher-level component that takes care of all the details for you. It’s much more efficient, and it’s easier to use because you don’t have to worry about the details.

7. Use the correct event type

The three event types available in Lightning Web Components are:

– Standard HTML events, like click
– Custom Events
– Lightning Events

Standard HTML events work just like they do in any other web page. They’re easy to use and they work well for simple things. However, they don’t work very well when you need to communicate between different parts of your component, or between different components.

Custom Events are events that you define yourself. You can name them anything you want, and you can structure the data that’s passed with the event however you want. This makes them much more flexible than standard HTML events.

Lightning Events are a special type of event that’s designed specifically for communication between Lightning Components. They’re similar to Custom Events, but they have some additional features that make them even more powerful.

Using the correct event type is important because it allows you to take advantage of the features that each type of event offers. For example, if you’re using a Custom Event to communicate between two parts of your component, you can’t take advantage of the features that Lightning Events offer.

8. Use CSS variables for theming

When you use CSS variables for theming, it makes it easier to change the look and feel of your Lightning Web Components. For example, if you want to change the color scheme of your Lightning Web Components, you can simply change the value of the CSS variable in one place, and all of your Lightning Web Components will be updated accordingly.

This is a much better approach than having to go into each individual Lightning Web Component and make the changes manually. It’s also a good idea to use CSS variables for other aspects of your Lightning Web Components, such as font size, padding, and margin.

9. Use shadow DOM for styling

When you style an element using shadow DOM, the styles are applied only to that element and not to any of its children. This is different from the global scope, where styles are applied to all elements on the page, regardless of their parent-child relationship.

This means that when you use shadow DOM for styling, you can be sure that your styles will never accidentally leak into other parts of the page, which can lead to unexpected results.

It also means that you can style child elements without having to worry about affecting the parent element, which can make your code more maintainable and easier to understand.

10. Use lwc:dom=”manual” when using third party libraries

When you use lwc:dom=”manual”, LWC will not create a shadow DOM for your component. This means that any CSS or JavaScript from the third party library will be applied globally to the page, which can lead to conflicts with other components on the page.

However, by using lwc:dom=”manual”, you can control when the CSS and JavaScript from the third party library is applied, which can help avoid these conflicts.