JAVASCRIPT

debounce react

//debounce with react js
// import useState hook
const [productName, setProductName] = useState("");
//write debounce function 
let timeOutId;
const handleSearch = (value)=>{
      if(timeOutId){clearTimeout(timeOutId)}
     timeOutId =  setTimeout(() => {setProductName(value)},500)
  }
//ui 
 <input type="text" onChange={(e) => handleSearch(e.target.value)} />

debounce reactjs

//Wait 500ms before validating data
//This method is used to check if the user stopped typing
//This way the state does not change on every keystroke the user enters!
const [formIsValid, setFormIsValid] = useState(false);

useEffect(() => {
  setTimeout(() => {
    console.log('Checking form validity!');
    setFormIsValid(enteredEmail.includes('@') && enteredPassword.trim().length >6);
  }, 500);
}, [enteredEmail, enteredPassword]);