This document provides performance best practices for Lightning Components. It recommends: - Setting aura:if attributes to false by default to avoid unnecessary rerendering. - Avoiding setting multiple items in an aura:iteration in the same cycle to improve performance. - Being cautious of aura:iteration since it rerenders all lines even without changes. It's better to filter lists in the parent component. - Using action.setStorable() to cache data and make use of storable actions when possible to improve performance.

1. Lightning Components
Performance best practices
@FabienTaillon
Fabien Taillon, Salesforce MVP, CTO @TEXEÏ
Lightning Components
Performance best practices
@FabienTaillon
Fabien Taillon, Salesforce MVP, CTO @TEXEÏ

2. Activate Debug Mode for your user

3. Needed to clear unrendered body
Performance degradation] markup://aura:if ["3:313;a"] in c:myComponent ["1:313;a"] needed to clear
unrendered body.
More info: https://developer.salesforce.com/docs/atlas.en-
us.lightning.meta/lightning/perf_warnings_if.htm
Always set <aura:if isTrue="{!v.visible}"> to false by default, then switch it to true.

4. Multiple items set in the same Aura cycle
[Performance degradation] markup://aura:iteration [id:5:251;a] in c:myComponent ["1:251;a"] had
multiple items set in the same Aura cycle.
More info: https://developer.salesforce.com/docs/atlas.en-
us.lightning.meta/lightning/perf_warnings_iteration.htm
Don't set several time your list values
• As a default value and then later in JS
• Several time in JS

5. More generally on aura:iteration
on aura:iteration
Be careful: for every update to the list, all lines are rerendered (even if there is no change)
• No real workaround
• Have it in mind
• Avoid doing too many logic in the child
• Filter the list in the parent instead of using aura:if on the line
• For 5 records displayed on a list of 1000, aura:if will be created 1000 times
• Everytime you set your list (using component.set), your components init is called (not only once in an
aura:cycle)

6. action.setStorable();
Makes use of cached data
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/controllers_server_storable_actions.htm
https://developer.salesforce.com/blogs/developer-relations/2017/03/lightning-components-best-practices-caching-data-storable-
actions.html
Use storable actions when you can

7. https://github.com/FabienTaillon/AuraPerfs
GitHub repo

8. Paris,
15th November 2018