Timeout not clearing when used in onChange function - reactjs

Question

I'm creating a search function for a website that I'm working on. When a user types in a keyword, a get request will be sent to retrieve the matching information. However, it feels very wasteful to have it fire every time a key is pressed. Say the user wants to search for sandwiches, they will most likely enter that in pretty quick succession I just want to fire it after a certain amount of time after the user stopped typing(say 250ms). My idea is to set a timeout, which will be cleared on a consecutive keystroke. Unfortunately, the timeout does not reset and just ends up being delayed. I tried having it in a useEffect hook, and then the timeout worked fine but I had some other problems which prompted me to try and do it this way.
const onChangeBrand = (e) => {
const brand = e.target.value
setBrand(brand)
const timeout = setTimeout(()=>{
url.get(`brands?search=${encodeURI(brand.toLowerCase())}&rows=5`)
.then(res => {
setBrands(res.data)
if(res.data.length === 1 && res.data[0].urlEncoding === encodeURI(brand.toLowerCase())){
setPageType("models")
}else{
setPageType("brands")
}
})
},2500)
return () => clearTimeout(timeout);
}
Any help would be much appreciated!

Answer 1

You've got the right idea but the wrong execution. Returning a function from an onChange handler inherently does nothing–this would have worked fine with useEffect so I see where it came from. This pattern is known as throttling / debouncing a function and there are tons of premade libraries out there to help you throttle a function (like lodash.throttle) but it's perfectly cool to spin your own!
The key here would be:
Use a timeout variable that is scoped outside the method
At the start of execution of your onChange, check to see if the timeout variable has a value–if it does, clear it.
Execute onChange, assign new timeout.
You could use a ref or something here but I personally think it's easiest to define your timeout holder outside the scope of your component entirely.
let CHANGE_TIMEOUT = null;
function MyComponent(props) {
// .. component code
const onChangeBrand = (e) => {
if (CHANGE_TIMEOUT) {
// we already have a previous timeout, clear it.
clearTimeout(CHANGE_TIMEOUT);
}
const brand = e.target.value
setBrand(brand)
// Set the timeout again
CHANGE_TIMEOUT = setTimeout(()=>{
url.get(`brands?search=${encodeURI(brand.toLowerCase())}&rows=5`)
.then(res => {
setBrands(res.data)
if(res.data.length === 1 && res.data[0].urlEncoding === encodeURI(brand.toLowerCase())){
setPageType("models")
}else{
setPageType("brands")
}
})
},2500);
}
// .. other component code here
}