title: Debounce triggering multiple times in react
body: <p>I am struggling with what's suppose to be a simple debounce. But somehow instead of waiting and triggering once, it waits but triggers all the events one by one until the last one.</p>
  
  <p>It's part of the react component. Here is the code :</p>
  
  <pre><code>import debounce from "lodash.debounce";
  (...)
  
  export default () =&gt; {
      const { filter, updateFilter } = useContext(AppContext);
      const [searchString, setSearchString] = useState(filter.searchString);
  
      const changeFilter = value =&gt; {
          console.log(value);
      };
  
      const changeFilterDebounced = debounce(changeFilter, 3000, true);
  
      const handleChange = e =&gt; {
          let { value } = e.target;
          setSearchString(value);
          changeFilterDebounced(value);
  };
  (...)
  </code></pre>
  
  <p>So if I type something like "abc" in my input that gets the</p>
  
  <pre><code>onChange={handleChange}
  </code></pre>
  
  <p>it waits a bit (the three seconds) and then will show three successive console.log with values "a", "ab", "abc". My expectation was for it to trigger only once with "abc". I am wondering where I am missing something. Tried to add true as the third argument but didn't change anything and I am also creating a specific function with the debounce not to create a new debounce each time as mentioned in other posts.</p>
  
  <p>Thanks for your help.</p>