A higher order component for debouncing function calls.

Debouncer.js

import React, { Component } from "react";

function withDebounce(WrappedComponent) {
  return class extends Component {
    constructor(props) {
      super(props);
      this.timeout = null;
      this.debounce = this.debounce.bind(this);
    }

    debounce(fn, time) {
      if (this.timeout) clearTimeout(this.timeout);
      this.timeout = setTimeout(fn, time);
    }

    render() {
      return <WrappedComponent debounce={this.debounce} {...this.props} />;
    }
  };
}

export default withDebounce;