Explore Additional Rendering Options

Learning Objectives

After completing this unit, you'll be able to:

Describe options for using lists and events.
Describe how to use third-party JavaScript Libraries and Style Sheets.
Optimize images for Lightning Web Components.
Explain the benefits of base Lightning components.
Describe how to use lifecycle rendering and reflow.

Introduction

Most performance gains for Lightning Web Components can be achieved using the best practices from the previous units, but there are some additional rendering options you can use to increase performance.

Here are some ideas to make your Lightning Web Components move even faster.

Lists

Lists allow for a lot of data to be displayed easily. But they can allow for too much data if not prepared well.

Keep the following in mind when using lists.

Lists should be created using either for:each or iterator. The difference between these is that iterator has first and last properties that let you apply special behaviors to the first and last items in an array.
```
<template for:each={contacts} for:item="contact">
  <li key={contact.Id}>{contact.Name}, {contact.Title}</li>
</template>
```
When creating custom list components, don't support the creation of an infinite number of list items. This can severely hamper performance, especially in large orgs with lots of records. Either provide a pagination mechanism, or virtualize the list (reuse and rehydrate a limited number of list item components).
Each list element must have a key whose value is unique across all children.
Be careful using Lightning web components inside the list to encapsulate the functionality. This can add a lot of overhead that can cause issues with performance. Especially if it's a large list.

Events

Leveraging events is a great way to communicate between components and even allows developers to listen for events within the DOM as Lightning web components dispatch standard DOM events. Components can also create and dispatch custom events. Use events to communicate up the component containment hierarchy. Event listeners can be attached declaratively or programmatically using addEventListener().

Keep the following in mind when leveraging events and event handlers.

Minimize the number of event handlers to only those absolutely required. Each handler requires overhead and if too many are created it can slow the performance of your app.
Be sure to understand event propagation of parent-child components using bubbles and composed. Typically you should use events configured with bubbles: false and composed: false because they're the least disruptive. These events don't bubble up through the DOM and don't cross the shadow boundary. If you create an event with bubbles: true and composed: true, you create an API contract for the component emitting the event.
To communicate between sibling components within a single Lightning page or across multiple pages, you can use Lightning Message Service. It has the advantage of working across Visualforce, Aura, LWC, utility bar components and across page tabs in a console app.
If you add a listener to something that is not part of the component lifecycle (like the window object, the document object, and so on), you're responsible for removing the listener yourself. To remove the event listeners use removeEventListener() in the disconnectedCallback lifecycle hook. Failing to do so can cause memory leaks, which will progressively degrade the performance of the entire Lightning app, until the user closes or refreshes their browser tab.
When working with lists, letting events bubble, and registering a single event listener on a parent element instead of a separate event listener on every list item can significantly reduce the number of event listeners in your application. This can have a positive impact on performance.

Third-Party JavaScript Libraries and Style Sheets

Whenever possible, remove dependencies on unneeded libraries. Furthermore, before you decide to use a third-party library in a Lightning component, you should reevaluate if you really need that library. DOM manipulation libraries (like jQuery) and UI libraries (like Bootstrap or jQuery UI) in particular may no longer be needed when working with LWC. Using third-party or your own Custom Style Sheets should only be used if Salesforce Lightning Design System (SLDS) doesn't meet your needs.

DOM Manipulation Libraries

JavaScript has come a long way in recent years. Many DOM manipulation utilities we couldn't live without like jQuery are now standard in the language. Modern frameworks like Lightning Web Components also provide abstractions that make jQuery less relevant.

UI Libraries

You may want to avoid the use of UI libraries like Bootstrap and jQuery UI. Although these libraries provide useful components, they have their own UI identity that can clash with the Lightning Experience identity. The base Lightning components and the SLDS offer similar capabilities while providing a consistent user experience.

MVC (Model-View-Controller) Frameworks

At a high level, libraries like React and AngularJS have the same focus as the Lightning Web Components framework: They provide code organization and utilities to create components. Using another MVC framework together with LWC inside a component isn't recommended. You can, however, use a Lightning component as a container to host components built with other frameworks (like React and AngularJS) inside the Lightning Experience. However, that is outside the scope of this unit.

Custom Style Sheets

Using third-party CSS style sheets or creating our own styles can cause performance issues and may make your UI look inconsistent to end users. Developers should become familiar with the Salesforce Lightning Design System (SLDS) that was developed by Salesforce to create beautiful and rich UI experiences for end users. It's also much more than just styles and CSS, it includes design guidelines and principles used by our own engineers and component blueprints that cover common developer needs like Breadcrumbs, Modals, Alerts and much more. It has an incredible list of Design Tokens that store visual design attributes for color, fonts, spacing, sizing and even touch.

Levering the SLDS can also save developers time when building components since it's built right into Lightning and doesn't require developers to create and maintain their own CSS.

Use Minified Versions of Libraries and Style Sheets

If you absolutely need to use a third-party library, make sure you use minified versions of the library and style sheet to increase the performance of your app.

Base Lightning Components

Before building your own custom Lightning components you should familiarize yourself with the library of base components offered. These include lightning-input-field, lightning-record-form, and many more. Leveraging these base components can significantly speed up your development time. For example if you want a big red button presented to a user, simply use the lightning-button:

<lightning-button variant="destructive" label="Destructive" onclick={handleClick}></lightning-button>

Here are some additional benefits of using Base Lightning components.

Styles: Base Lightning components are styled with the native Lightning look and feel.
Performance: Base Lightning components are already loaded at the client-side and don't require additional download or processing. Our performance optimization efforts are also focused on components in the lightning namespace.
Responsiveness: By default base Lightning components are responsive in their design.
Innovation: The Lightning namespace is where components are being actively developed. This is where you can expect to see new and improved components moving forward.
Accessibility: Base Lightning components are built for accessibility.
Client-side validation: Base Lightning components include client-side validation when applicable.

Image Optimization

Whenever possible, use the (sprite-based) SLDS icons (using <lightning-icon> and <lightning-button-icon>) instead of custom icons. Salesforce has hundreds of icons for you to choose from, so before spending time creating your own custom icons, reuse the ones that SLDS offers.

When using other images, be sure to lock image dimensions to avoid reflows and serve the image in those dimensions when possible. For example, don't load a high-resolution image to display a thumbnail.

Component Lifecycle Rendering and Reflow

Lightning web components have a lifecycle managed by the framework. The framework creates components, inserts them into the DOM, renders them, and removes them from the DOM. Read the rendering lifecycle to understand what happens during this lifecycle and which methods fire at what time. Minimize the number of times your component is being re-rendered. In some cases, it may be helpful to lock DOM regions to specific dimensions to avoid browser reflows of surrounding areas.

Wrap-Up

The performance of an application is impacted by many different factors. The Lightning Web Components performance optimization techniques described in this article are general guidelines that should help you build faster and more responsive applications. Try them out in your application.