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. This post will explain how to dynamically instantiate components in LWC.
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.
References
Dynamically Import and Instantiate Lightning Web Components
Related Posts
Seamless YouTube Video API Integration in Salesforce
Integrate Pexel API for Seamless Image Retrieval
GraphQL Query Generator in Salesforce Apex
Capture Images in Salesforce using Mobile App
