Reactにおいてのパフォーマンス最適化について

大仰な題目を掲げていますが、プログラミング初心者が書いたメモ書き程度に読んでいただけると幸いです。
※誤っている部分があればコメント等でご指摘お願いします。

対象読者についてはReactについてなんとなく理解できてきた初心者としています。

再レンダリングについて

どうやらReactは事あるごとに再レンダリングが行われて負荷がかかるらしい・・・。

以下が再レンダリングが起きる３つのパターン。
1.stateが更新された際
2.propsが変更された際（親コンポーネントから子コンポーネントへの受け渡し）
3.デフォルトでReactは再レンダリングされたコンポーネントの子要素は全て再レンダリング

再レンダリングによる負荷を減らすには？

Reactに標準機能である
・memo
・useCallBack
・useMemo
を使用する。

__メモ化について　__

Memoization）とは、プログラムの高速化のための最適化技法の一種であり、サブルーチン呼び出しの結果を後で再利用するために保持し、そのサブルーチン（関数）の呼び出し毎の再計算を防ぐ手法である。メモ化は構文解析などでも使われる（必ずしも高速化のためだけとは限らない）。キャッシュはより広範な用語であり、メモ化はキャッシュの限定的な形態を指す用語である。

（Wikipedia https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%A2%E5%8C%96 より引用）

Reactにおいては関数や変数における計算結果をキャッシュとして保持しておき、再レンダリングによる不要な再計算を起こさせないようにするものだと私は認識しています。
結果としてパフォーマンス向上につながるのかなと。

memoについて

親のコンポーネントが再レンダリングされても、propsに変更がない限りは子コンポーネントを再レンダリングしないようにできる。
つまり、親の再レンダリングに伴って不要な再レンダリングを起こさないためのものであり、複数の要素から成り立っているコンポーネントに付与すると良い。

●使い方
子コンポーネント内でexportする関数に下記のように記述する。

export const 関数名 = memo((props) => {

// 処理内容

});

useCallBackについて

処理が変わらない関数を使いまわすためのもの。
[　]内部に監視したい値を設定し、監視している値が変更された時にuseCallBack内の関数を再生成する。また、[　]の部分を空にすると、最初に生成した関数をずっと使う（再生成しない）という設定もできる。

●使い方
子コンポーネントへpropsとして渡す関数に下記のように記述する。

const 関数名 = useCallback(() => {

// 処理内容

}
, [監視する値]);

useMemoについて

変数をメモ化するもの。変数内で計算する時に使用する。計算は初回のみ行われ、その後は計算結果を使い回すことができる。計算の中に変数があれば、[ ]の中にその変数を指定し、その変数の変更時に再計算するというやり方もできる。

●使い方
使用したい変数に下記のように記述する

const 変数名 = useMemo(() => {

// 処理内容

}, [監視する値]);

おわりに

重たい画面で待たされるとUXの低下にも繋がりますので、うまく使いこなしてユーザ価値向上に繋げていきましょう◎
何かご質問や不備がございましたらコメントいただけたら幸いです。

以上。読んでくださりありがとうございます。