React Snippets

Javascript_React_Snippets_Debouncing-Throttling-Events.jsx

import React, { Component, PropTypes } from 'react';
import _ from 'lodash';

class SomeComponent extends Component {
  constructor(props) {
    super(props);
    this.fetchAjaxFromDebouncedInput = _.debounce(this.fetchAjaxFromDebouncedInput, 3000);
  }
  
  fetchAjaxFromDebouncedInput(event) {
    //handle ajax from debounced event here...
  }

  handleKeyStrokes(event) {
    //http://stackoverflow.com/questions/23123138/perform-debounce-in-react-js
    event.persist(); //<--- This is key 
    this.fetchAjaxFromDebouncedInput(event);
  }

  render() {
    return (
      <div className="example-input">
        <input onChange={this.handleKeyStrokes.bind(this)} placeholder="Enter text" type="text"/>
      </div>
    );
  }
}