最終更新:2022-12-26 (月) 14:42:26 (40d)  

useCallback
Top / useCallback

メモ化されたコールバックを返します。

https://ja.reactjs.org/docs/hooks-reference.html#usecallback

useCallback(実行する関数, [依存する値]);

  • const memoizedCallback = useCallback(
      () => {
        doSomething(a, b);
      },
      [a, b],
    );

概要

  • 関数をReact/メモ化
  • "依存する値"が変わると関数を再作成

React/メモ化

  • 同じ入力が再度発生した時に、キャッシュした結果を返す処理

関数を子コンポーネントに渡す場合

  • 何もしないと再レンダリングでコードが実行されるたびに新しい関数が再生成される
    • propsが変化してしまい、子要素もレンダリングされてしまう
  • useCallbackを使い関数をメモ化

メモ

関連