lodash debounce not firing function

Question

I want to use the lodash debouce method to improve the UX of a customer when they enter input in an input box. For some reason the debounce function isnt returning the value from the function been debounced.

Can anyone spot what may be wrong?

import debounce from "lodash/debounce"; 


render() {

   const inputValid = () => {
      console.log('triggered');
      return this.state.input.length > 0;
   };

   let d = debounce(inputValid, 100);
   d();
   console.log(d()); // this gets logged as undefined although I 
                     //thought it would be either true or false

   return <input onChange="updateInput" value={this.state.input} />;

}

score 1 · Accepted Answer · answered Aug 09 '17 at 12:03

debounce breaks the synchronous program flow and makes it asynchronous. You can't simply get the return value from it. You should check out this one:

How do I return the response from an asynchronous call?

But your example also looks poorly designed for that usecase. For a deterministic render method simply get this information in the flow without the debounced handler. You should only render against the state at the time of the rendercycle.

The debounced function should only be used to trigger a setState after a onChange event.

lodash debounce not firing function

1 Answers1