React : Trigger function when the user stops typing - reactjs

Question

I am using react-select with async create table and implemented this to Netsuite custom page. The problem is that I want to load the getAsyncOptions function to trigger only when the user stops typing. At the moment these line of codes make the input field so slow as the function is getting triggered everytime a letter is added to the input. I also cant insert the fetched data to the state because it will be populated with a thousand records.
Email.tsx
getAsyncOptions(inputValue) {
return new Promise((resolve) => {
var typingTimer; //timer identifier
var doneTypingInterval = 1000; //time in ms (1 second)
if (inputValue.length <= 3) {
return resolve([]);
}
clearTimeout(typingTimer);
if (inputValue) {
return (typingTimer = setTimeout(function () {
var t0 = performance.now();
emailSearch(inputValue).then((data) => {
const returnData = [];
data.forEach((contact) => {
returnData.push({
label: contact.email + " - (" + contact.company + ")",
value: contact.email,
});
});
resolve(returnData);
console.log(
"Call to email search function took " +
(t1 - t0) +
" milliseconds."
);
});
var t1 = performance.now();
}, doneTypingInterval));
}
});
As you see on the above code the it is only delaying the code to trigger. And another problem arises when the user stopped typing for 1 second and continue to type again, it is just delaying the function, and being triggered every 1 second. Here's the rest of the code for your reference.
RenderOpenMode.tsx
<AsyncCreatableSelect
value={props.state.toEmailCollection}
onChange={props.setToEmail}
loadOptions={props.debouncedLoadQuery}
styles={props.customSelectStylesEmail}
components={{
DropdownIndicator: () => null,
IndicatorSeparator: () => null,
}}
isMulti={true}
isSearchable={true}
isValidNewOption={props.isValidNewOption}
placeholder=""
/>
The Functions
this.setToEmail = (toEmailCollection) =>
this.setState({ toEmailCollection: toEmailCollection });
this.setToCc = (toCcCollection) =>
this.setState({ toCcCollection: toCcCollection });
const loadOptions = (inputValue) => this.getAsyncOptions(inputValue));
this.debouncedLoadQuery = debounce(loadOptions, 2000, {
leading: true,
});
Been facing this roadblock for a while and any idea or help would be very much appreciated! Thank you so much and God bless!
Edit:
Added some code. The onChange only updates some state, the problem is the loadOptions as it is the one that is triggering the getAsyncOptions.

Answer 1

I've fixed the issue, it seems that the problem is on the debounce. I am using debounce-promise and the problem is that I've used leading=true option and that makes the UI unresponsive on change.
From this code:
this.debouncedLoadQuery = debounce(loadOptions, 2000, {
leading: true,
});
To this code:
this.debouncedLoadQuery = debounce(loadOptions, 2000);