Reactのmemo、useMemo、useCallback

Reactのパフォーマンス変換フックのメモです。

memo

memo　は親コンポーネントの再レンダリングにより、同時に子コンポーネントが再レンダリングされるのを防ぐ機能。　memoで親に影響されたくないコンポーネントを囲って使う。
でも、propsで受け取っている変数に変更があった場合は再レンダリングされる。ここでの「変更」とは値の変更ではなく参照場所が変わった時を指す。

useCallback

子コンポーネントに渡す関数をuseCallbackでラップした場合、親コンポーネントが再描画された場合に新しい関数が作成されるの防げるため、子コンポーネントが再描画されるのを抑制することができます。
つまり、useCallbackでラップされている関数は再レンダリングされることがないので、memoでコンポーネントを防いでいる場合propsでは変更されてしまうが、
そのpropsでもらっている変数が、親コンポーネント内でuseCallbackで包まれているものであれば、これは子コンポーネントの際レンダリングを防ぐことになる。

useMemo

useCallbackでは　そもそも関数を再生成しないという機能であったが、useMemoは下記のように書き、変数の変化による再実行を特定の値の時に限定するものである。

test.tsx

const cachedValue = useMemo(calculateValue, dependencies)

これはuseEffectが特定の変数の値が変更されたときに再実行されるのに対して、useMemoも特定の値が変更された場合に実行されていますね。

違いは現時点でわかっていることですが、最初の実行のタイミング、です!!

useMemo はレンダリング中に実行される。
useEffect　はレンダリング後に実行される。

また、非同期などの関数を扱う場合もuseEffectが良いでしょう。

ではさようなら。間違えていることもあると思いますのでご指摘いただけると勉強になって助かります。