ReactJS: Handle onChange api call when user stops typing
When we have Input Fields which have to fire api requests on change we always tend to fire multiple api requests.
We can cancel the api request on duplicate api calls by using cancelToken. Or we can use clearTimeout and setTimeout
Declaring Global Variables
We need to declare a time out interval that will run our setTimeout function.
const WAIT_INTERVAL = 1000;
We can declare event code for ‘enter’ if the user wants to fire the api on keypress
const ENTER_KEY = 13;
Implementing on TextField
So what this code does is when the user stops typing triggerChange is fired where you can place your api.
Whenever the user presses a key handleKeyDown function is called and clearTimeout is called and setTimeout is again initialized with WAIT_INTERVAL initial value.