useCallback

ユーズコールバック

useCallback を分かりやすく

今回の課題は「useCallback」ですね。「useCallbackって何？」「そもそもこれ使う意味あるん？」と思う方もいるでしょう。それでは、これからuseCallbackの全貌を明らかにしていきましょう！

useCallbackはReactのフックの一つで、特定の関数を再利用するために使用します。具体的には、関数とその依存配列を引数に取り、その関数のメモ化（覚えておく）されたバージョンを返します。メモ化された関数は、依存配列のいずれかの要素が変更されるまで同一のものとして扱われます。つまり、無駄な再レンダリングを防ぐのに役立ちます。

例え話で言うと、useCallbackはちょうどお気に入りのレストランを思い出すようなものです。最初にレストラン（関数）を訪れたとき、その場所（依存配列）を記憶します。そして次にそのレストランに行きたくなったとき、以前の記憶（メモ化された関数）を頼りに直接行くことができます。しかし、レストランが移転（依存配列が変更）した場合、新しい場所を覚えて、それを新たに記憶（新たにメモ化）する必要があります。

useCallbackの利用は、以下のような場面で特に有効です。

高コストな計算を行う関数の最適化
関数をpropsとして子コンポーネントに渡す際の最適化
関数をメモリに保持して、後で使用する（例えば、イベントリスナーなど）

だいぶヤバいやつですよね〜（褒め言葉）。めっちゃ便利なんですよ！

とはいえ、useCallbackは必要な場合にのみ使用すべきです。すべての関数にuseCallbackを使うと、メモ化によるオーバーヘッドが逆にパフォーマンスを低下させる可能性があるからです。つまり、無闇に使うと逆効果、というわけなんですよ。

結論

用語「useCallback」（ユーズコールバック）は、React という JavaScript ライブラリを使用して作成された Web アプリケーションにおいて、関数をメモ化するための機能です。useCallback を使うことで、再レンダリングのたびに新しい関数が生成されるのを防ぎ、パフォーマンスを向上することができます。

useCallback の使い方

以下は、useCallback を使った例を紹介します。

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

export default function Example() {
  const [count, setCount] = useState(0)

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

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

この例では、useCallbackフックを使って、handleClick関数をメモ化しています。useCallbackは、関数を引数に取り、その関数をメモ化します。第 2 引数には、依存する値の配列を渡します。依存する値が変更された場合に、useCallbackの中の関数が再度実行されます。

この例では、handleClick関数内で、setCount関数を呼び出しています。第 2 引数には、count を渡しています。これにより、handleClick関数が再レンダリングのたびに生成されるのを防ぎ、パフォーマンスを向上することができます。

useCallback の実行結果

最後に、return 文の中で、count の値を表示しています。また、ボタンをクリックすることで、count の値をインクリメントすることができます。

このように、useCallback を使うことで、再レンダリングのたびに新しい関数が生成されるのを防ぎ、パフォーマンスを向上することができます。また、依存する値が変更されたときだけ、関数を再度実行することができるため、必要なときにしか処理を実行しないようにできます。

Next.js を学ぶ一覧へ