javascript - función con retardo no se está llamando en un componente de react

Tengo el siguiente componente de React. Se llama al método raiseCriteriaChange, pero la línea this.props.onCriteriaChange(this.state.criteria) nunca se ejecuta.

¿Alguna idea de por qué el código nunca llega a this.props.onCriteriaChange?

import * as React from 'react';
import { debounce } from 'lodash';

interface CustomerSearchCriteriaProps {
  onCriteriaChange: (criteria: string) => void;
}
interface CustomerSearchCriteriaState {
  criteria: string;
}

class CustomerSearchCriteria extends React.Component<CustomerSearchCriteriaProps, CustomerSearchCriteriaState> {

  constructor() {
    super();

    this.state = {
      criteria: ''
    };
  }

  // problem method:
  raiseCriteriaChange = () => {
    // the call reaches here fine ...
    debounce(
    () => {
       // ... but the call never reaches here ... why is this?
       this.props.onCriteriaChange(this.state.criteria);
    },  
    300);
  }

  handleCriteriaChange = (e: React.FormEvent<HTMLInputElement>) => {
    this.setState({ criteria: e.currentTarget.value }, () => {
      this.raiseCriteriaChange();
    });
  }

  render() {

    return (
      <div className="input-group">
        <input
          type="text" 
          value={this.state.criteria} 
          onChange={this.handleCriteriaChange} 
          className="form-control"
        />
      </div>
    );
  }
}

export default CustomerSearchCriteria;

Respuesta #1

_.debounce simplemente devuelve una función que debe ser llamada. Intenta cambiar tu código así:

raiseCriteriaChange = debounce(() => {
    this.props.onCriteriaChange(this.state.criteria);
}, 300);

Respuesta #2

Vea _.debounce, que lo dice

(Función): Devuelve la nueva función con retardo.

así que necesitas llamarlo así

var debounced = debounce(
    () => {
       // ... but the call never reaches here ... why is this?
       this.props.onCriteriaChange(this.state.criteria);
    },  
    300
);

debounced();