はじめに

Reactの再レンダリングとメモ化、について学習したことを簡単にまとめてみました。

参考

わかりやすく有益な記事で、参考にさせていただきした。
本当にありがとうございました！！

例：フォーム入力の値を監視するstateを保持しており、そのstateの値に変更があったとき（フォームに値を入力 or 削除するとき）

例：親コンポーネントで値を保持しており、その値をpropsで子コンポーネントに渡して表示している際にその値に変更があったとき

Reactのコンポーネントではレンダリングは頻繁に起きることが多いため、そのたびに重い処理などを走らせるとパフォーマンスが落ちる。
その不必要な処理をできるだけ抑え、処理は必要最低限にしたい。

それによりページ描画スピード向上など、パフォーマンスの最適化をはかることが再レンダリングの最適化である。

計算処理結果や生成された関数、コンポーネントなどを保持しておき、それを適切に再利用すること。

メモ化しておくことで不必要に処理を走らせることを防ぐことができる。

※メモ化すること事態にもコストが発生するようなので、何でもかんでもメモ化すれば良いということでもないようである。

親コンポーネントが再レンダリングされても、子コンポーネントに渡すpropsの値が変更されない限り、子コンポーネントは再レンダリングされないようにする仕組み。

逆に言えばmemo()を利用してもpropsに変更があれば再レンダリングされてしまう。

memo(コンポーネント);

不必要に関数が再生成されることを防ぐ。
第２引数で指定する依存配列に変更がない限り第１引数のコールバック関数は再生成されず、メモ化された保持している関数をコールバック関数を返す。

useCallbackを利用しないと、このコンポーネントがレンダリングされるたびにその関数は再生成される。この関数をpropsとして渡していたら、再生成のタイミングでpropsが変更されたことを子コンポーネントが検知して子コンポーネントも再レンダリングされる。

const 関数名 = useCallback(コールバック関数, [依存配列]);

※ 利用方針は様々あると思うが、基本的にはmemo(コンポーネント)とセットで利用することで子コンポーネントの不必要な再レンダリングを防ぐ目的で利用する。

不必要に重い処理を走らせることを防ぐ。
第２引数で指定する依存配列に変更がない限り第１引数の処理は実行されず、メモ化された保持している値を返す。

const 変数名 = useMemo(処理, [依存配列]);

※第１引数で渡す処理が重い処理でなければ、useMemo()を利用するコストの方が大きくなることもあり、利用するメリットが無いこともあるよう。