title: How to perform debounce on onChange react event?
body: <p>I have a problem in performing requests to the server when the user types some info in input field. Requests are sent but if the user quickly removes everything from the field, request won't be sent as default but it will send the last letter. So some delay happens.</p>
  
  <p>I need to realize somehow debounce when the user types something quickly and send a request once for 2ms for example</p>
  
  <pre><code>&lt;input type="text"
    placeholder="add"
    className='input'
    onChange={(e) =&gt; this.search(e.target.value)}
    onKeyDown={this.handleSearchParam}
    value={keyword}
  /&gt;
  </code></pre>
  
  <p>function for handling input</p>
  
  <pre><code>search(text) {
      this.props.onTextInputAdd(text);
      if (text) {
       this.props.onSearchTypeResult(this.props.tab, text)
      } else {
        this.props.onLoadDefaultInfo(this.props.tab);
      }
  }
  
  const mapStateToProps = state =&gt; ({
    keyword: state.searchReducers.keyword,
  });
  
  const mapDispatchToProps = dispatch =&gt; ({
    onSearchTypeResult: (tabName, query) =&gt; dispatch(actionCreators.loadSearchInfo(tab, tabQuery)),
    onTextInputAdd: keyword =&gt; dispatch(actionCreators.addKeyword(keyword)),
  });
  </code></pre>
  
  <p>Here is the action:</p>
  
  <pre><code>const loadSearchResults = (tabName, query) =&gt; axios.get(`testurl?query1=${tabName}&amp;query2=${query}`)
  
  export const loadSearchInfo = (tabName, query) =&gt; dispatch =&gt; {
    loadSearchResults(tabName, query).then(response =&gt; {
      const data = { ...response.data };
      dispatch(updateTabInfo(data));
    });
  }
  
  export const updateTabInfo = data =&gt; ({
    type: LOAD_TAB_INFO,
    payload: data,
  });
  </code></pre>
  
  <p>I tried to use custom debounce but it doesn't work. It fires every time I put text but not on intervals</p>