Creating a reactive and efficient user interface using lightning web components in salesforce is paramount. Handling user input for search components is one of the most challenging things a developer faces in real time search fields.
Lets take a scenario or component which search accounts from the user input from a search box you might have noticed performance issues for every key press, an event fires, making a server call. These server calls make slow performance, wastage of resources and not user friendly. This problem can be solved by debouncing technique. In this blog, we will explore what debouncing is, why it is essential, and how to implement it effectively in an LWC for a practical account search scenario.
Let’s consider a scenario where a user starts typing the name Universal containers in search box. For each key stroke user types it makes a component, makes serval call and reacts immediately without any protective measures.
So, when the user types U, the component might initiate a search. Then, upon typing n, it triggers another search. It will continues to trigger for i, v and so on. In a matter of seconds, you could have made over twenty separate calls to the server, most of which are irrelevant because the user hasnt finished typing their query. This process not just makes unnecessary calls and load on server but also can cause race conditions where earlier, slower responses overwrite newer, more relevant ones. This causes inconsistent display of results for users. This is where debouncing becomes a crucial tool in a developer’s stash.
Debouncing is a technique which reduces the number of calls made or function is fired. In simpler terms, it make sures that a function is called only after a particular amount of time after the previous call was made. For our search field, this means we set a timer after the user presses a key. So if the user press another key within the time frame or before the timer expires, it cancels or reset to initial value and restart from beginning again. The actual search function is only called once the user has paused their typing for the predetermined duration, say 300 milliseconds. This small delay is imperceptible to the user but makes a monumental difference in the efficiency of the application. The user gets the experience of a real-time search without the performance penalty, as the component waits for a brief moment of inactivity before acting.
Now, lets translate this concept into a working Lightning Web Component. Well build a component named accountSearch that allows users to search for accounts by name. This lightning component will have an input field and a result section. we can achieve debouncing in our javascript class without any external libraries, to keep it simple to the LWC framework.
We will first look into our LWC template file. This is simple template containing search field and result section to display search result using if:true condition. The input field is bound to a property called searchTerm and has an event handler onkeyup that will capture every keystroke.
<template>
<lightning-card title="Account Search" icon-name="standard:account">
<div class="slds-p-around_medium">
<lightning-input
type="search"
label="Search Accounts"
value={searchTerm}
onchange={handleSearchChange}
placeholder="Type an account name..."
></lightning-input>
<template if:true={searchResults}>
<div class="slds-m-top_medium">
<h3 class="slds-text-heading_small">Results</h3>
<ul class="slds-list_dotted">
<template for:each={searchResults} for:item="account">
<li key={account.Id} class="slds-item">
{account.Name}
</li>
</template>
</ul>
</div>
</template>
<template if:true={isSearching}>
<div class="slds-m-top_medium">
Searching...
</div>
</template>
</div>
</lightning-card>
</template>
The main debouncing logic will take place in our javascript file. Here, we will adjust the state of the search term, a timer ID, and the search results. We also declare a timeoutId property to hold the reference to the setTimeout call. It is very important because we need to cancel the pending timeout if a new key press occurs. The handleSearchChange function will be called on every input change. Instead of calling the search function immediately, it will call a debouncedSearch function.
import { LightningElement, track } from 'lwc';
import searchAccounts from '@salesforce/apex/AccountController.searchAccounts';
export default class AccountSearch extends LightningElement {
@track searchTerm = '';
@track searchResults = [];
@track isSearching = false;
timeoutId;
handleSearchChange(event) {
this.searchTerm = event.target.value;
this.isSearching = true;
this.debouncedSearch();
}
debouncedSearch() {
// Clear the existing timeout, if any.
clearTimeout(this.timeoutId);
// Set a new timeout.
this.performSearch();
}, 300);
}
performSearch() {
// If the search term is empty, clear results and return.
if (!this.searchTerm.trim()) {
this.searchResults = [];
this.isSearching = false;
return;
}
// Call the Apex method with the current search term.
searchAccounts({ searchKey: this.searchTerm.trim() })
.then(result => {
this.searchResults = result;
})
.catch(error => {
console.error('Error searching accounts:', error);
this.searchResults = [];
})
.finally(() => {
this.isSearching = false;
});
}
}
Lets now check the flow of events. Whenever a user presses the letter U in the search field handle SearchChange will be triggered. Later, this method updates both searchTerm and isSearching, here isSearching will be updated to true to feedback to user. After that debounceSearch method will be called. This function first calls clearTimeout(this.timeoutId). Since this is the first keystroke, there is no timeout to clear. It then sets a new timeout using setTimeout, scheduling the performSearch function to run after 300 milliseconds. The ID of this timer is stored in this.timeoutId.
Lets consider the user has typed n even before 300 milliseconds timer set by previous keypress. The handleSearchChange function will be called again. Later debounceSearch will be called. But this time cleartimeout(this.timeoutId) clears the previous timer and resets it to the 300 milliseconds from the time n has been typed. This process repeats for each and every keypress within 300 milliseconds after previous press. The performSearch method will only execute if user waits more than 300 milliseconds after his keypress. This methods contains apex logic to retrieve accountdata using search input given by user.
Here our apex class contains simple method returning list of accounts and annotated with @Auraenabled and cacheable = true. Here we are using caheable = true as we are just retrieving the data and not making any changes to retrieved data. And we are calling our method in imperative way.
public with sharing class AccountController {
@AuraEnabled(cacheable=true)
public static List<Account> searchAccounts(String searchKey) {
if (String.isBlank(searchKey)) {
return new List<Account>();
}
String key = '%' + searchKey + '%';
return [ SELECT Id, Name FROM Account WHERE Name LIKE :key ORDER BY Name LIMIT 20 ];
}
}Debouncing not just makes user experience smooth but also provides user to adjust debouncing delay. If user wants fast and instantaneous response he can reduce delay from 300 to 150 milliseconds or he can increase it to 500 milliseconds for longer delay , this is suited for operations that are extremely resource intensive or slow typers.
It is a best practise to consider data cleanup or any pending timeouts using disconnected callback lifecycle hook which prevents potential memory leaks.
disconnectedCallback() {
clearTimeout(this.timeoutId);
}Conclusion:
Debouncing is an important technique for optimizing event-driven actions in Lightning Web Components. By intelligently delaying the execution of a function until after a burst of events has stopped for a certain amount of time, it drastically reduces the number of operations performed, leading to better application performance, reduced server load, and a cleaner, more predictable user experience.
