useCallbackの使い所 📝 - みかづきブログ・カスタム

blog.kimizuka.org

昨日は、React.callbackを使って子コンポーネントのレンダリングをスキップすることに成功しました。

今回はその続きです。

React.memoを使っても、子コンポーネントのレンダリングをスキップできないケースがあります。それが、propsとして関数が渡されているときです。

例えばこのようなコードを書くとReact.memoをつかっても子コンポーネントのレンダリングはスキップされません。

なぜならば、

function handleClickCount() {
  alert('click!');
}

return (
  <div>
    <canvas ref={ canvasRef } />
    <Child
      count={ 0 | (current / 1000) }
      onClick={ handleClickCount }
    />
  </div>
);

と、子コンポーネントに関数を渡しているからです。
しかし、渡している関数は毎回作り直さなくてもOKの類いのものです。
そういう時は、useCallbackを使いましょう。

ja.reactjs.org

useCallbackは関数をメモ化してくれます。

今回は依存する値がないので依存配列は空でOKです。

なので、

function handleClickCount() {
  alert('click!');
}

を、

const handleClickCount = React.useCallback(() => {
  alert('click!');
}, []);

にしてみましょう。

これで、子コンポーネントのレンダリングがスキップされるようになります。非常にお手軽です。