keyup-fetch-debounce.js

// simple example of using a debounce in a react input component

class Input extends Component {
  
  // Returns a function, that, as long as it continues to be invoked, will not
  // be triggered. The function will be called after it stops being called for
  // N milliseconds. If `immediate` is passed, trigger the function on the
  // leading edge, instead of the trailing.
  // taken from https://davidwalsh.name/javascript-debounce-function
  debounce = (func, wait, immediate) => {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };
  
  fetchData = this.debounce((query) => {
      axios.get('someurl.com/api', { params: { query })
  }, 1000, false)
  
  handleKeyUp = (event) => {
    const { value } = event.target
    if (!value) {
      this.setState({data: []})
      return null
    }
    this.fetchData(value)
  }
  
  render() {
    return (
      <input onKeyUp={this.handleCityKeyUp} />
    )
  }
}