using debounce for search input in react

Question

I have a search input, to make API calls on the fly. I'd like to implement debounce to reduce the amount of server calls.

  _debouncedSearch() {
    debounce(this.props.fetchRoutes(this.state.searchText), 1000);
  }

  _updateResults(searchText) {
    this.setState({searchText});
    this._debouncedSearch();
  }

I am expecting debouncedSearch every 1 second. But it is still called on the fly. And throw errors:

Uncaught TypeError: Expected a function at debounce (lodash.js?3387:10334)

Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development.

I feel like this question must get asked around a lot, but none of the solution seems to work for me. Could someone explain to me what exactly is the problem here? I thought debounce is just a setTimeOut.

Thanks

Answer 1

_.debounce is already a carried out function (function returns function ) . Then _debouncedSearch should be an attribute of the class , and not method :

  _debouncedSearch=  debounce(() => this.props.fetchRoutes(this.state.searchText), 1000);

instead of :

  _debouncedSearch() {
    debounce(this.props.fetchRoutes(this.state.searchText), 1000);
  }

Also, notice , the first argument of _.debounce is a function (() => this.props.fetchRoutes...) , not directly this.props.fetchRoutes...