ways to use debounce in React

using-debounce.md

Ways to use debounce in React

In Constructor

inspired by: http://blog.revathskumar.com/2016/02/reactjs-using-debounce-in-react-components.html

class Test extends React.Component {
  constructor(props) {
    super(props)

    this.callworker = this.callworker.bind(this)
    this.doDifficultWork = debounce(this.doDifficultWork, 500)
  }

  callworker(e) {
    this.doDifficultWork(e)
  }

  doDifficultWork(e) {
    console.log('doing difficult work')
  }

  render() {
    return (
      <div>
        <button onClick={this.callworker}>click</button>
      </div>
    )
  }
}

In Method

inspired by: https://medium.com/gitconnected/debounce-react-and-redux-code-for-improved-performance-4b8d3c19e305

class Test extends React.Component {
  constructor(props) {
    super(props)
  }

  doDifficultWork = debounce((e) => {
    console.log('doing difficult work')
  }, 500)

  render() {
    return (
      <div>
        <button onClick={this.doDifficultWork}>click</button>
      </div>
    )
  }
}