Perform debounce in React.js

Question

How do you perform debounce in React.js?

I want to debounce the handleOnChange.

I tried with debounce(this.handleOnChange, 200) but it doesn\'t

Answer 1

Using ES6 CLASS and React 15.x.x & lodash.debounce Im using React's refs here since event losses the this bind internally.

class UserInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userInput: ""
    };
    this.updateInput = _.debounce(this.updateInput, 500);
  }


  updateInput(userInput) {
    this.setState({
      userInput
    });
    //OrderActions.updateValue(userInput);//do some server stuff
  }


  render() {
    return ( 

      
 User typed: {
        this.state.userInput
      } 
       this.updateInput(this.refs.userValue.value) } type = "text" / >
      
    );
  }
}

ReactDOM.render( <
  UserInput / > ,
  document.getElementById('root')
);