React hooksのuseMemoについて勉強した。
謝罪
参考にした記事がまとまりすぎて、ほぼパクリ記事になっています。
useMemoとは
//useMemo(() => 値を計算するロジック, 依存配列); //使用例 const result = useMemo(() => count * 2, [count]);
値を計算するロジックがすぐに終わるなら問題ないのですが ありえないぐらい遅い処理の場合、関係ない変数が更新されて再レンダリングされた時に無駄に時間がかかってしまいます。それを阻止するために、パフォーマンスの向上する機能です。
文章にするとわかりにくいのですが オススメの記事で紹介されているデモを見れば一目瞭然です。
useMemoを使っていない場合
ここで試してほしいのは、Increment count1のボタンです。 Increment count1で関係ないdoubleの処理が動いてしまい 表示が遅いです。
useMemoを使った場合
Increment count1のボタンを押すとすぐに変わります。依存関係にないものが更新されても実行されないのです。
useMemoはコンポーネントの再レンダリングをスキップできる
useMemoはレンダリング結果もメモ化できるため、React.memoのようにコンポーネントの再レンダリングをスキップできる。
useMemoを使っていない場合
useMemoを使った場合
感想
パファーマンスを意識した作りが全然できていないので、「ふ〜ん」程度の理解になってしまった。
useMemoの場合、「再計算のコスト < useMemoの実行コスト」の時もあれば、「再計算のコスト > useMemoの実行コスト」の時もあると認識しています。
この再計算コストと useMemoの実行コストを測れないと話にならないな〜
補足
codesandboxで重い処理を表現する場合は
while (i < 1000000000) i++;
と書くみたい
ちなみにfor文だとエラーになります
for (let i = 1; i <= 1000000000; i++) {
}
この差がよくわからないのですが「while文を使え」って事かな？？
