[Irish Dreamin 2025] Dynamic LWC: With great power comes great responsibility

Dynamic LWC is a long awaited feature. No need to hardcode LWC names, create them dynamically on the fly. It's great but can have a severe impact on performance if used incorrectly. Let’s deep dive!

Transcript

1. With Gratitude A huge thank you to our Platinum and Gold Sponsors! Your generous support makes this community conference a reality—empowering us to connect, innovate, and inspire. We deeply appreciate your commitment to our shared mission.
2. Dynamic Lightning Web Components irishdreamin.ie With great power comes great responsibility Fabien Taillon, Partner & CTO at Texeï, Salesforce MVP
3. Fabien Taillon Partner & CTO at Texeï Salesforce MVP - Hall of Fame Paris Developer Group leader French Touch Dreamin team https://www.texei.com irishdreamin.ie
4. irishdreamin.ie @FabienTaillon - https://www.texei.com A way to dynamically instantiate a component that may not be known before runtime What is a Dynamic Component
5. irishdreamin.ie @FabienTaillon - https://www.texei.com Why was This Not Possible Before?
6. irishdreamin.ie @FabienTaillon - https://www.texei.com PERFORMANCE Why was This Not Possible Before?
7. We have purposely made the decision of not allowing dynamic component creation yet (the equivalent of $A.createComponent) on the Salesforce platform to make sure we had a clean, statically analyzable and predictable behavior on which to build upon in LWC. … In LWC in the platform we don't allow you to shoot yourself in the foot creating small tiny components, and once we do, we will give you a water pistol first :) irishdreamin.ie @FabienTaillon - https://www.texei.com Diego Ferreiro Val - Ex Principal Architect LWC https://salesforce.stackexchange.com/questions/244847/not-able-to-render-dynamic-lightning-web-component
8. irishdreamin.ie @FabienTaillon - https://www.texei.com Most use cases can be achieved with existing lwc:if/lwc:elseif, but: • N°1 use case would be for AppExchanges allowing dynamic components defined through Metadata for instance (think App Builder like) • Can be used to defer big components load if not on the main displayed page • Displayed after a button click • Displayed in another tab • … Valid Use Cases
9. irishdreamin.ie @FabienTaillon - https://www.texei.com Just add the capability to the parent component to instantiate dynamic components: <?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>59.0</apiVersion> <capabilities> <capability>lightning__dynamicComponent</capability> </capabilities> </LightningComponentBundle> How It Works Now
10. irishdreamin.ie @FabienTaillon - https://www.texei.com Just add the capability to the parent component to instantiate dynamic components: And then it’s very easy: • Import component in JS • import MyComponent from 'c/myComponent'; • await import('c/myComponent'); • Define a Dynamic component in template with lwc:component and lwc:is • <lwc:component lwc:is={componentConstructor}></lwc:component> • Assign in JS the component you want to render • this.componentConstructor = MyComponent; How It Works Now
11. irishdreamin.ie @FabienTaillon - https://www.texei.com Easily pass attributes via markup <template> <lwc:component lwc:is={componentConstructor} text="I love dynamic components!"></lwc:component> </template> Depending on dynamic components, you may not know which attributes are need. Properties can be passed down via JavaScript object and lwc:spread directive: JS childProps = { city: "San Francisco", state: "CA" }; Markup <template> <lwc:component lwc:is={componentConstructor} lwc:spread={childProps}></lwc:component> </template> Pass Attributes Down
12. A Deeper Look irishdreamin.ie @FabienTaillon - https://www.texei.com
13. irishdreamin.ie @FabienTaillon - https://www.texei.com Before Dynamic Components Declarative use of components in the template markup All components are known at save time and can be statically analyzed
14. irishdreamin.ie @FabienTaillon - https://www.texei.com Before Dynamic Components Only one round trip to get the whole component and sub-components c-my-component c-my-component + c-small-component + c-heavy-component
15. irishdreamin.ie @FabienTaillon - https://www.texei.com With Dynamic Components Dynamic components will be created by JS and may not be known at that time Depends on how dynamic components are created - more on this later
16. irishdreamin.ie @FabienTaillon - https://www.texei.com With Dynamic Components If not done correctly, one additional round trip per dynamic component c-my-component c-my-component + c-small-component c-heavy-component c-heavy-component
17. To do it correctly, you need to understand how it works and different options available. Dynamic Components irishdreamin.ie @FabienTaillon - https://www.texei.com
18. irishdreamin.ie @FabienTaillon - https://www.texei.com Static Import - Statically Analyzable • Import needed components • Switch the rendered component by changing the lwc:is variable • Almost the same as using components in markup and lwc:if • Everything is downloaded with a single server round trip
19. irishdreamin.ie @FabienTaillon - https://www.texei.com Dynamic Import - Statically Analyzable • Same as previous, but loading is done on demand ◦ connectedCallback ◦ Function linked to any action (user click…) • Not part of the initial load so additional server round trip
20. irishdreamin.ie @FabienTaillon - https://www.texei.com Dynamic Import - Not Statically Analyzable • Same as previous BUT component is not statically analyzable • No way for Salesforce to improve loading, caching etc • As much as possible, don’t use this one
21. A Good Use Case irishdreamin.ie @FabienTaillon - https://www.texei.com
22. irishdreamin.ie @FabienTaillon - https://www.texei.com • One heavy component • Not visible during first page load • Would slow down the whole page if part of the markup Loading Heavy Component Async
23. irishdreamin.ie @FabienTaillon - https://www.texei.com Loading Heavy Component Async
24. Recap irishdreamin.ie @FabienTaillon - https://www.texei.com
25. irishdreamin.ie @FabienTaillon - https://www.texei.com • Use it when you understand how it works • Not for very small components, server round trip will be slower than initial load • Use it for big components that may slow down initial load and that are not immediately visible (like unclicked tab) Recap
26. Resources Documentation https://developer.salesforce.com/docs/platform/lwc/guide/js-dynamic-components.html Blog post https://developer.salesforce.com/blogs/2023/10/dynamic-components-for-lightning-web-com ponents-is-now-ga RFC https://github.com/jmsjtu/lwc-rfcs/blob/jtu/dynamic-component-creation/text/0119-dynamic-co mponent-creation.md StackExchange answer about performance https://salesforce.stackexchange.com/questions/244847/not-able-to-render-dynamic-lightni ng-web-component irishdreamin.ie @FabienTaillon - https://www.texei.com
27. Q&A irishdreamin.ie @FabienTaillon - https://www.texei.com
28. Feedbacks irishdreamin.ie
29. With Gratitude A huge thank you to our Platinum and Gold Sponsors! Your generous support makes this community conference a reality—empowering us to connect, innovate, and inspire. We deeply appreciate your commitment to our shared mission.