Debounce or Throttle not working with TypeScript/React

[martinmckenna]

I'm having trouble getting Debounce to work correctly. Here's what I have so far (not sure if you've used React, but basically the handleChangeQuery function will run when the <TextField/> component is typed into)

  handleChangeQuery = (e: any) => {
    this.setState({ query: e.target.value }); // this is running properly
    debounce(200, false, () => console.log('hello world')); // not console logging
  }

  render() {
    const { query } = this.state;
    return (
      <React.Fragment>
        <TextField
          InputProps={{
            placeholder: 'search for something',
            value: query,
            onChange: this.handleChangeQuery,
          }}
        />
      </React.Fragment>
    );
  }
}

for some reason the debounce function is not running at all despite this line before it running properly. Is there some step I'm missing?

e: FYI, I tried using the typings provided and then shortly after deleted the typings file and instead went with https://www.npmjs.com/package/@types/throttle-debounce.

[martinmckenna]

I found a solution. Here's what worked for me

class DebouncedSearch extends React.Component<CombinedProps, State> {

  state: State = {
    query: '',
    debouncedSearch: debounce(400, false, this.props.onSearch)
  };

  handleChangeQuery = (e: any) => {
    const { debouncedSearch } = this.state;
    this.setState({ query: e.target.value });
    debouncedSearch(e.target.value);
  }

  render() {
    const { query } = this.state;
    return (
      <React.Fragment>
        <TextField
          fullWidth
          InputProps={{
            placeholder: 'search for something',
            value: query,
            onChange: this.handleChangeQuery,
          }}
        />
      </React.Fragment>
    );
  }
}

[franklixuefei]

@martinmckenna Take a look at the debounce section in https://www.peterbe.com/plog/how-to-throttle-and-debounce-an-autocomplete-input-in-react

[niksy]

Hi @martinmckenna, I’m currently not using TypeScript so unnfortunately I don’t know how to help you :(

Maybe @franklixuefei’s answer works for you?

[martinmckenna]

this can be closed. I posted my solution as the first comment @niksy