LWC Performance & Aura Legacy Understanding

0/4 in this phase0/41 across the roadmap

📖 Concept

Optimizing LWC performance and understanding the Aura legacy are important for enterprise Salesforce projects. Many orgs still have Aura components that coexist with LWC.

LWC Performance Optimization:

Minimize Apex calls
- Use Lightning Data Service (LDS) when possible — it caches and shares data
- Use @AuraEnabled(cacheable=true) for read operations
- Avoid redundant calls — check if data already exists
Efficient rendering
- Use if:true/if:false to conditionally render — removed elements don't consume DOM resources
- For long lists, use virtual scrolling or pagination (lightning-datatable handles this)
- Avoid deep nested iterations in templates
Data optimization
- Query only needed fields in Apex (SELECT Id, Name — not all fields)
- Use pagination for large datasets
- Implement lazy loading for related data
- Use getRecord with specific fields, not getRecord with layout
JavaScript optimization
- Debounce user input (search, resize handlers)
- Use requestAnimationFrame for smooth animations
- Avoid blocking the main thread with heavy computation
- Use Web Workers for CPU-intensive tasks

Aura Components — Legacy Understanding: Aura is the older Salesforce UI framework. Key differences from LWC:

Feature         | Aura                    | LWC
----------------|-------------------------|-------------------
Standards       | Proprietary framework   | Web Standards
Performance     | Higher overhead         | Native browser APIs
Syntax          | XML markup + JS         | HTML + JS classes
Data binding    | Two-way by default      | One-way (explicit)  
Events          | Application/Component   | DOM CustomEvents
Learning curve  | Salesforce-specific     | Standard web dev
Future          | Maintenance mode        | Active development

Coexistence:

LWC can be used INSIDE Aura components (but not vice versa)
They share Lightning Message Service for communication
Migration strategy: wrap LWC in Aura wrappers where needed
New development should ALWAYS use LWC

LWC Security:

Shadow DOM provides style and DOM encapsulation
@api properties are the only public surface
CSP (Content Security Policy) restricts inline scripts
locker service restricts DOM access to your component's shadow tree
Use lightning/navigation for URL navigation (never window.open directly)

💻 Code Example

codeTap to expand ⛶

1// LWC Performance Best Practices
2
3// 1. Debounced Search — Avoids excessive Apex calls
4import { LightningElement, wire } from 'lwc';
5import searchAccounts from '@salesforce/apex/AccountController.getAccounts';
6
7export default class OptimizedSearch extends LightningElement {
8    searchTerm = '';
9    _debounceTimer;
10    
11    // Wire only fires when searchTerm changes (debounced)
12    @wire(searchAccounts, { searchTerm: '$searchTerm' })
13    accounts;
14    
15    handleSearchInput(event) {
16        window.clearTimeout(this._debounceTimer);
17        const value = event.target.value;
18        
19        // Only search after user stops typing for 300ms
20        this._debounceTimer = setTimeout(() => {
21            this.searchTerm = value;
22        }, 300);
23    }
24}
25
26// 2. Pagination — Don't load all records at once
27import { LightningElement, wire } from 'lwc';
28import getAccountsPage from '@salesforce/apex/AccountController.getAccountsPage';
29
30export default class PaginatedList extends LightningElement {
31    currentPage = 1;
32    pageSize = 25;
33    totalRecords = 0;
34    accounts = [];
35    
36    @wire(getAccountsPage, { 
37        pageNumber: '$currentPage', 
38        pageSize: '$pageSize' 
39    })
40    wiredAccounts({ data, error }) {
41        if (data) {
42            this.accounts = data.records;
43            this.totalRecords = data.totalCount;
44        }
45    }
46    
47    get totalPages() {
48        return Math.ceil(this.totalRecords / this.pageSize);
49    }
50    
51    get isFirstPage() { return this.currentPage === 1; }
52    get isLastPage() { return this.currentPage >= this.totalPages; }
53    
54    handlePrevious() { this.currentPage--; }
55    handleNext() { this.currentPage++; }
56}
57
58// 3. Aura Wrapper for LWC (Legacy coexistence)
59// This allows using an LWC inside an Aura context
60// auraWrapper.cmp
61// <aura:component implements="flexipage:availableForAllPageTypes">
62//     <aura:attribute name="recordId" type="String" />
63//     <c:myLwcComponent record-id="{!v.recordId}" />
64// </aura:component>
65
66// 4. Lazy Loading — Load data only when needed
67import { LightningElement, api } from 'lwc';
68import getDetails from '@salesforce/apex/AccountController.getAccountDetails';
69
70export default class LazyDetail extends LightningElement {
71    @api recordId;
72    details;
73    isExpanded = false;
74    hasLoaded = false;
75    
76    async handleExpand() {
77        this.isExpanded = !this.isExpanded;
78        
79        // Only fetch data on first expand
80        if (this.isExpanded && !this.hasLoaded) {
81            try {
82                this.details = await getDetails({ accountId: this.recordId });
83                this.hasLoaded = true;
84            } catch (error) {
85                console.error('Failed to load details:', error);
86            }
87        }
88    }
89}
90
91// 5. Virtual Scrolling concept for large lists
92// lightning-datatable handles this automatically:
93// <lightning-datatable
94//     key-field="id"
95//     data={accounts}
96//     columns={columns}
97//     enable-infinite-loading
98//     onloadmore={loadMoreData}
99//     show-row-number-column>
100// </lightning-datatable>

🏋️ Practice Exercise

LWC Performance & Aura Practice:

Build a search component with debounced input (300ms delay before Apex call)
Implement client-side pagination for a list of 1000+ records
Create a lazy-loading component that only fetches data when the user expands a section
Build an infinite scroll component using lightning-datatable onloadmore
Wrap an LWC inside an Aura component for backward compatibility
Measure component load time using the Performance tab in Chrome DevTools
Optimize a component that makes 5 separate Apex calls to use 1-2 calls instead
Implement a caching strategy using browser sessionStorage for non-sensitive data
Create a component that handles 10,000 rows without browser freezing
Migrate a simple Aura component to LWC and compare performance

⚠️ Common Mistakes

Loading all records at once — 10,000 records will freeze the browser. Always paginate or use virtual scrolling
Not debouncing search input — every keystroke fires a wire call, wasting Apex calls and causing flickering UI
Creating Aura components for new features — all new development should use LWC unless you need Aura-specific features (e.g., certain ISV packaging requirements)
Fetching data in renderedCallback — it fires after every re-render, causing infinite loops of fetch → render → fetch. Use connectedCallback or wire instead
Not using Lightning Data Service when possible — LDS caches data and shares it across components. Custom Apex should only be used for complex queries LDS can't handle

💼 Interview Questions

🎤 Mock Interview

Mock interview is powered by AI for LWC Performance & Aura Legacy Understanding. Login to unlock this feature.

Was this topic helpful?

← PreviousComponent Communication & Custom Events Next →REST & SOAP APIs