ReactのuseCallback

useCallbackについての理解のためにまとめてみました。

useCallbackはメモ化したコールバックを返すHooks APIになります。
メモ化とは、同じ結果を返す関数などに関して初回のみ処理を実行しておき、2回目以降は初回の結果を呼び出すことを言います。
これにより、2回目以降は処理が実行されないため、毎回実行されるケースに比べるとパフォーマンスが良くなります。

具体的な使用方法としては以下のようなボタンをクリックした場合にコンソールに文字を出力する関数があるとします。
このときbuttonタグのonClickに渡している関数（{}で囲われている部分）をコールバック関数といいます。

const ExampleComponent: React.FC = () => {
  const handleClick = () => {
   console.log('Button Click');
  };
  return (
    <div>
      <button onClick={handleClick} />
    </div>
  ); 
};

このコールバック関数（handleClick）がExampleComponentが描画されるたびに新しい関数として再生成されてしまいます。
この再生成を避けるために以下のようにuseCallbackを利用することでhadnleClickがメモ化されます。

const ExampleComponent: React.FC = () => {
  const handleClick = React.useCallback(() => {
   console.log('Button Click');
  }, []);
  return (
    <div>
      <button onClick={handleClick} />
    </div>
  ); 
};

useCallbackを使用した際に第2引数に渡されている配列は、依存配列といい下のようにコールバック関数内で変数などが使用されている場合に依存配列内にも変数を書きます。
そのようにすると依存配列内に書かれた変数の値が変化した場合にコールバック関数が再生成されるようになります。このようにしないと変数の値が変わった場合にも、コールバック関数の結果前の変数の値で結果が返されてしまうためです。

[count, setCount] = useState();
const handleClick = React.useCallback(() => {
 console.log(count);
}, [count]);

useCallbackはこのように関数の結果をメモ化するため、useCallback化した関数とは関係のない変数が更新されコンポーネントが再描画される場合にパフォーマンスを上げることができます。