【ReactHooks】useCallbackについて

useCallbackとは

パフォーマンス最適化を行うためのフックです。メモ化されたコールバック関数を返します。依存関係の変更がない場合にキャッシュされた関数を返すため、余分な再レンダリングを防げます。

通常、Reactコンポーネントが再レンダリングされるたびに、コンポーネント内で定義されたすべての関数が再定義されますが、これはパフォーマンス上の問題を引き起こす可能性があります。なので、useCallback関数を使用し(コールバック関数をメモ化して)不必要な再レンダリングを防止するようです。

※メモ化とは、関数の呼び出しで同じ入力が再発生した時にキャッシュした結果を返すことです。キャッシュされた結果を再計算せずに返すことができるので、2回目以降の同じ入力の関数呼び出しに対するコストが削減されます。

使い方

2つの引数が必要です。1つ目の引数は、メモ化したいコールバック関数。2つ目の引数は、依存する値の配列です。依存する値が変更された場合にのみ、新しいコールバック関数が作成されます。

基本型

useCallback(callbackFunction, [deps]);

例

import React, { useCallback, useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

useCallbackを使用して increment関数をメモ化。countの値が変更された場合にのみ新しい関数が作成されます。1クリックに1ずつ増加するボタンです。

なお、useCallbackを使用しない例です。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

ボタンがクリックされるたびにhandleClick関数が再定義されます。

再レンダーのコストについて、以下を参考にさせていただきました。

すべてのコンポーネントが再レンダーされる場合の負荷が想像できますね...
以上です。