Perform debounce in React.js

Question

How do you perform debounce in React.js?

I want to debounce the handleOnChange.

I tried with debounce(this.handleOnChange, 200) but it doesn\'t

Answer 1

There's a use-debounce package that you can use with ReactJS hooks.

From package's README:

import { useDebounce } from 'use-debounce';

export default function Input() {
  const [text, setText] = useState('Hello');
  const [value] = useDebounce(text, 1000);

  return (
    

       {
          setText(e.target.value);
        }}
      />
      
Actual value: {text}
      
Debounce value: {value}
    
  );
}

As you can see from the example above, it is set up to update the variable value only once every second (1000 milliseconds).