Dynamically Instantiate Components in LWC

We include many modules in the Lightning Web component to accomplish business requirements. These modules can take a longer time when the component is loaded on the page. This can lead to a performance issue on the Salesforce record page. Dynamic component instantiation can help us avoid loading huge modules. We can also instantiate a component instance even if the underlying component constructor isn’t known until runtime. Dynamic import is an easy way to make a component more adaptable.

Enable LWC for Dynamic Instantiate

Set the apiVersion property in the component configuration file to 55.0 or later to dynamically instantiate Lightning web components. It should also include the lightning__dynamicComponent capability.

Note:

Enable Use Lightning Web Security for Lightning web components and Aura components from Setup- >Session Setting. If it is not enabled then you will get an error “Dynamic imports are not allowed” while deploying the component.

How to use Dynamic Component

We have to use the element <lwc:component> to instantiate the Lightning web component. <lwc:component> is a DOM placeholder that renders the specified dynamic component.

lwc:is directive is mandatory for <lwc:component> element and it provides an imported constructor at runtime of the provided component. The below code shows, how we can import the dynamic component.

The dynamic component is instantiated and attached to the DOM in the same way that regular components are. If the dynamic component’s constructor changes, the existing element is removed from the DOM.

Complete Code to Demo Dynamic Instantiation

We have two components for Video Explorer (Seamless YouTube Video API Integration in Salesforce) and Image Explorer (Integrate Pexel API for Seamless Image Retrieval) and we will use both components to instantiate dynamically based on selection. Before you proceed further, create both components in your org.

To demo dynamic instantiation, I have used the radion button which will select the option video or image. Based on this selection, the component is imported dynamically using loadComponent js method.

Demo of Dynamic Instantiation

This demo will show the image or video component based on radio button selection.

Benefits of Dynamic Instantiation

This advantage may not appear to be significant at first glance, but if LWC is composed of multiple static child components, each with significantly sized JavaScript modules, LWC may take as long as 10-15 seconds to load due to the import of a large number of modules. Dynamic Instantiation will reduce load time.
It can be used for making flexible and customizable product

Disadvantage of Dynamic Instantiation

If we use too much dynamic instantiation then it will create performance issues every time import is done for the dynamic component. So use this feature wisely.