I'm trying to implement debounce when a user types in an input field in React.
<TextField
onChange={handleUsername}
/>
Input handler:
const handleTwitterUsername = (value: any) => {
console.log({ value })
debounce(() => {
// setUserData({ ...userData, username: value })
console.log('debounce value', value)
})
}
Debounce function:
const debounce = (cb: any, delay = 1000) => {
let timeout: any
return (...args: any[]) => {
clearTimeout(timeout)
timeout = setTimeout(() => {
cb(...args)
}, delay)
}
}
When I start typing, I get logs of value
but there are no logs of debounce value
. Debounce doesn't seem to work.
What am I doing wrong?