import React,{useState} from 'react';
const app = () =>{
const [inputValue,setInputValue] = useState();
const handleChange = (e)=>{
setInputValue(e.target.value);
console.log(inputValue);
}
const debounce =function (fn , d) {
let timer;
return function(){
let context = this,
args=arguments;
clearTimeout(timer);
timer = setTimeout(() =>{
fn.apply(context,args)
},d)
}
}
const betterFunction = debounce(handleChange, 300);
return (
<>
<input type='text' value={inputValue} onChange={betterFunction}/>
<div>{inputValue}</div>
</>
)
}
export default app;
In the above code, I’m unable to make any changes once enter anything in inputfield
. Basically updating inputfield
stuck. Please help with the reasoning and thanking you in advance.