Reactのclassでlodashのdebounceやthrottleを使う

Reactで lodash を使って、連続処理を制御したいときに、意外とトリッキーだと感じたのでメモしておく。

class LodashSample extends React.Component {
  constructor(props) {
    super(props);
  }
  onInputChange = _.debounce((value) => {
    // Implement Logic here
    console.log('debounce!!');
  }, 300)
  throttleMethod = _.throttle((value) => {
    // Implement here
    console.log('throttle!!');
  }, 300)
}

こんな感じに書くと綺麗に書ける。

最初は下記のような感じで書いてしまった。

  onInputChange(value) {
    _.debounce((value) => {
      console.log('debounce!!');
    }, 300);
  }

こうすると、 debounce の中のfunctionが呼び出されない。
というのも、 debounce は、メソッドを返すので、メソッドをCallする部分がないからそりゃ呼ばれないという話。

ちょっと癖があってミスったりするけど意味が理解できるとしっくりくる。