[React] useCallback and React.memo

Prologue
開発中に忘れた部分があるので書きます.useCallbackとReact。Memoによるレンダリングの最適化の文章を読んで書いた文章
useCallback
TL;DR
useCallbackはdepsによって関数を再使用するかどうかを決定することができ、propsによって素子を再使用することもできる.
useCallbackのインタフェースは次のとおりです.

function useCallback <T extends (...args: any[]) => any>
(callback: T, deps: DependencyList): T;

useCallbackの2番目のパラメータdeps配列の値が変わらない場合、hookはコールバック:Tを新規に作成せずに再使用できます.実際、複雑な計算が必要な関数を再使用しなければ、あまり効果はありません.
しかし,これは関数の再使用ではなく素子の再使用の観点から有用である.構成部品のpropsを受信する場合、結果が同じ場合はpropsを再レンダリングする必要はありません.(以下react.memoの説明)
ここまでやってメモに移りますこのセクションで覚えておきたいのは、useCallbackはdepsによって関数を再使用するかどうかを決定することができ、関数を再使用するだけでなく、構成部品を再使用することもできます.さらに進むためにmemo()の詳細が必要かもしれません.
React.memo
TL;DR
React.memoは、パラメータとして関数型素子を受信し、受信したprops状態が変化すると再レンダリングされます.
memoのインタフェースは以下の通りです.

function memo<P extends object>(
        Component: SFC<P>,
        propsAreEqual?: (prevProps: Readonly<PropsWithChildren<P>>, 
        nextProps: Readonly<PropsWithChildren<P>>) => boolean
    ): NamedExoticComponent<P>;

エレメントをパラメータとして受け入れ、prevPropsとnextPropsを比較して異なるエレメントを表示します.同じ場合は再レンダリングのhookは行われません.構造的にはuseCallbackとは異なりますが、コンテキスト的に前後が異なる場合は再作成します.関数をpropsとしてサブエレメントに送信すると、useCallbackとuseMemoを同時に書き込むことができます.
親エレメントのrender()に()=>{}と同じarrow関数を埋め込むと、サブエレメントはpropsを使用して関数のメモリアドレスを受信し、親エレメントの再レンダリング後、propsは同じ関数コードを異なる主値とし、もちろんサブエレメントを再レンダリングしてリソースを浪費することに注意してください.
Conclusion
useCallbackは主に関数の再使用に使用され、関数をサブエレメントのpropsとして渡す場合に便利です.関数をpropsとしてサブエレメントに渡すと、再使用可能な関数(メモリ参照値が同じ関数)がpropsに移行すると、サブエレメントは復元されます.memoは同じ値を認識し、不要なレンダリングを減らすことができます.