React input debounce still executing method

Question

I'm trying to implement debounce but can't get it working (still too many request for every input change). I'm using the debounce method from underscore. I've simplified my code for this example:

import { debounce } from "underscore";

const fetch = (value) => {
    axios.post("/uri", { search: value }).then(({ data }) => {   
      setBreeds(data);
    });
  };

<input
  type="text"
  onChange={e => debounce(fetch(e.target.value), 2000)}
  autoComplete="off"
/>

What could I be doing wrong here?

Answer 1

Your fundamental problem is that debounce requires a function as its first argument. You are passing fetch(e.target.value) as the first argument, which isn't even a function (it's a Promise). But in order to evaluate what that argument is, fetch has to be called every time the onChange event happens - which is why you're seeing it called too often.

The "correct" way to write this is instead:

onChange={debounce(e => fetch(e.target.value), 2000)}

However even that will not work as intended, simply because that onChange function has to be recomputed every time the component rerenders - so although debounce internally will refuse to call its underlying function until 2 seconds have passed since the last time, that function will change identity between rerenders, even though it will be "the same function" as far as you're concerned. Just because two functions have identical implentations and effects doesn't mean they're the same function reference.

So instead you need to extract the function e => fetch(e.target.value) so it has a single identity. This isn't immediately obvious how to do in a function component (it's easy in a class, just make the function an instance method - I assume this is a function component though from the use of a function called setBreeds), but it can be done through useRef or useCallback - see this article for example, as well as the documentation for those two Hooks on the React site.

Answer 2

According to https://underscorejs.org/#debounce , debounce() needs to have a function as a first argument, whereas (it looks to me like) you're sending in the result of a function call. Perhaps:

onChange={e => debounce(fetch(e.target.value), 2000)}

Could be changed to:

onChange={e => debounce(() => fetch(e.target.value), 2000)}

Answer 3

Try create a debounceCall function and use e.persist

 const debounceCall = debounce(e => {
    axios.post("/uri", { search: e.target.value }).then(({ data }) => {
       setBreeds(data);
    });
 }, 2000);

  <input
    type="text"
    name="inp"
    onChange={e => {
      e.persist();
      debounceCall(e);
    }}
    autoComplete="off"
  />