score:1

debounce function return a function, but does not execute it yet. so you could think like this.

const handleonchange = (onchange) => (e) => {
  e.persist();
  console.log(e.target);
  debounce(onchange, 500)();
};

this won't work, because each time you call handleonchange, a new debounce function will be created. you must save debounce function some where and reuse it

const debouncedonchange = debounce((func) => {
  fucn();
}, 500);

const handleonchange = (onchange) => (e) => {
  console.log(e.target);
  e.persist();
  debouncedonchange(onchange);
};

you could pass arguments like this

const debouncedonchange = debounce((func) => {
  func();
}, 500);

const handleonchange = (onchange) => (e) => {
  console.log(e.target);
  e.persist();
  debouncedonchange(() => onchange(e));
};

if you use react <=16, be careful with event pooling.

runable solution at https://codesandbox.io/s/peaceful-margulis-mc8stj


Related Query

More Query from same tag