• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

React/フック

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を使い関数をメモ化

メモ

• useCallback(fn, deps) は useMemo(() => fn, deps) と等価です。

関連

• React/props/関数
• useEffect