Ad

Using Lodash Throttle With React Text Input And Typescript

- 1 answer

I'm struggling to make this text input throttle work in react even after reading lots of docs.

import { throttle } from 'lodash';
...
      <input
        type="text"
        onChange={(e): void => throttle(handleTextInput, 1000)(e)}
      />

I'm obviously doing something wrong, any help appreciated!

Ad

Answer

Right now you are calling throttle function while defining onChange for the input. You have to give a function to the throttle which needs to be called after the wait. Try this -

throttledInput = throttle(input => this.handleTextInput(input), 1000);
...
<input
   type="text"
   onChange={(e) => this.throttledInput(e.target.value);}
 />
Ad
source: stackoverflow.com
Ad