軽く自己紹介
今回が初投稿になります.
普段はDeep Learningによる画像AIの開発に携わっているのですが,興味で最近web技術,特にフロントエンド領域に触れ始めました.
まだまだ未熟ではありますが,備忘録的に投稿できたらなと思います
はじめに
タイトルにもあるとおり,Reactを勉強していると必ず耳にする"メモ化"についてまとめたいと思います.
React.memoやuseCallback()などの使用方法に関する記事は多く目にするのですが,私からすると"そもそも Reactのメモ化ってなんやねん"と思ったのでその備忘録です.
この記事は初学者の私がまとめたものですので,解釈の誤り等ありましたらぜひコメントいただけますと嬉しいです.
(一般的な)メモ化とは
早速,本題ですがwikipediaでメモ化と検索すると以下のように定義されています
メモ化(英: memoization)とは、プログラムの高速化のための最適化技法の一種であり、サブルーチン呼び出しの結果を後で再利用するために保持し、そのサブルーチン(関数)の呼び出し毎の再計算を防ぐ手法である。メモ化は構文解析などでも使われる(必ずしも高速化のためだけとは限らない)。キャッシュはより広範な用語であり、メモ化はキャッシュの限定的な形態を指す用語である。
かなりわかりやすいですね
このことから(一般的な)メモ化の利点として
もう一回使うものを保存(メモ)しておけば,次使う時にわざわざ最初から計算しなくて良い
ことがわかります
Reactのメモ化とは
先ほどの話からメモ化は効率を上げるために有効であることがわかりました.そのためReactでもメモ化はパフォーマンスを上げるために使用されています.
Reactのパフォーマンスとレンダリング
ではReactは何をメモ化するのでしょうか?
ここで深く関わってくる言葉がレンダリングです.
またここで複雑なのですが一般的なレンダリングの意味とReactの指すレンダリングは少し意味が異なります.
意味の違いについては以下の記事がとても参考になりました.
Reactのレンダリングを理解する
Reactのドキュメントではレンダリングは以下のように定義されています.
“Rendering” is React calling your components.
これはまたややこしいですね...
この定義からReactにおけるレンダリングではコンポーネントが鍵になることは間違いなさそうです.
Reactのパフォーマンスはレンダリングとかなり強い結びつきがあるので,無駄なコンポーネントの呼び出しを防止すれば,パフォーマンス向上につながります.
改めてReactのメモ化について
やっとReactが何をメモ化するか見えてきました.
Reactのメモ化ではパフォーマンス向上のため
コンポーネント(コンポーネントのレンダリング結果)をメモ化する
ことが基本になっています.
もちろん細分化するとコールバック関数をメモ化するなどの話に発展していきます.
おわりに
今回はそもそもReactのメモ化とは何かについてまとめてみました.
メモ化のやり方については他に素晴らしい記事がたくさんありますので,そちらを参考にしていただけると良いかと思います.
参考記事