Throttling a Function in React

Sometimes you don’t want to trigger an event handler too often, due to performance issues. In the example below, the function will be called every half a second at most.

import throttle from 'lodash/throttle';

(...)

componentDidMount() {
  window.addEventListener('resize', this.handleResize);
  this.onResize();
}

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize);
}

handleResize = throttle(() => {
  this.onResize();
}, 500)

onResize = () => {
  (...) // Some operations based on the current screen width
}