コンポーネントの無駄な再レンダリングを防ぐために、useCallback()を使用してコールバック関数をメモ化する必要があることをよく耳にしたことがあるでしょう 。

しかし、useCallback()とは正確には何ですか 🤔 . 考えたことはありますか？

それが何であり、どこでそれを正しく使用するかを理解するのを手伝わせてください。

まず関数の等価性チェックを理解しましょう

使い方を見る前に、それが解決するものを見てみましょう。関数を返す簡単な関数を書いてみましょう:

mul1とmul2は、2 つの数値を乗算する関数です。それらは乗算関数によって作成されています。

JavaScript の関数は通常のオブジェクトです。関数mul1とmul2は同じコードを共有しますが、それらは異なる関数オブジェクトです。それらを比較すると、falseと評価されます。

これが JavaScript オブジェクトの仕組みです。オブジェクト (関数オブジェクトを含む) は、それ自体にのみ等しい。

useCallback() の目的

React.useCallback() は基本的に、上で見た関数の等価性チェックを解決します。多くの場合、同じコードを共有するさまざまな関数オブジェクトが React コンポーネント内で作成されます。

handleClick (インライン関数) は、CustomComponent のレンダリングごとに異なる関数オブジェクトです。

また、React コンポーネントとインラインで宣言された関数を使用しても害はありません。パフォーマンスに悪影響を与えることはありません。

ただし、場合によっては、レンダリング間で単一の関数インスタンスを維持する必要があります。

1. たとえば、関数がデバウンス/スロットルされた場合など、関数に何らかの内部状態がある場合のように

2. 内部にラップされた機能コンポーネントReact.memo()は、関数オブジェクトの小道具を受け入れます。

コールバックを受け入れる子コンポーネントが参照等価性チェック (例: React.memo()またはshouldComponentUpdate() ) に依存して、props が変更されたときに不要な再レンダリングを防止する場合、コールバック props が次の間で変更されないことが重要です。レンダリングします。

したがって、親コンポーネントでは、コールバックプロパティを useCallback()でラップし、同じ関数オブジェクトが最適化された子コンポーネントに渡されることを保証できます。

3. 関数オブジェクトが他のフックへの依存関係である場合、たとえば useEffect(..., [callback])

上記の例では、myFunctionがMyComponentを再構築するようなことをした場合 (たとえば、props または状態を変更することを行った場合)、無限ループ状態に陥ります。

これを防ぐために、関数をuseCallback() でラップし、その依存関係を定義して、その依存関係が変更された場合にのみ関数が再作成されるようにします。したがって、関数はレンダリング サイクルごとに再宣言されなくなりました。

したがって、上記のユースケースは、useCallbackフックが役立つ場合です。同じ依存関係値が指定されている場合、フックはレンダリング間で同じ関数インスタンスを返し、パフォーマンスを向上させます。

それが実際にuseCallback() であることを理解するのに役立つことを願っています! 😊

この記事を読んでいただきありがとうございます。楽しんだ場合は、他の人が見つけやすいように、気軽に 👏 ボタンをクリックしてください。