正解パターンは後編です。関数をメモ化して同じ処理が再実行されないようにする(前編)#React若槻龍太2021.10.02この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。IoT事業部の若槻です。今回は、Reactアプリケーションのパフォーマンスチューニングとして、関数をメモ化して同じ処理が再実行されないようにする方法を確認してみた、の前編です。(後編はこちら)再実行されてしまうパターン1以下では同じ関数getResult()を複数箇所で呼び出しています。);};実行結果を見ると、Consoleにログが2回出力されているためgetResult()が2回実行されていることが分かります。getResult()の実行結果は毎回同じであるため、複数回呼び出されると同じ処理が再実行されてパフォーマンス上よろしくありません。再実行されてしまうパターン2(useCallbackだけを使う)getResult()をuseCallbackを利用してメモ化してみます。これによりuseCallbackの依存配列の要素のいずれかが変化した場合にのみ関数が変わります。);};しかし実行結果を見ると、Consoleにログが2回出力され、getResult()が2回実行されていました。useCallbackだけを使いメモ化するだけではだめのようです。再実行されないパターン(useCallbackでメモ化し、useState、useEffectを使う)正解パターンはこちらでした。下記のようにgetResult()をuseCallbackでメモ化した上で、useEffectでgetResultが変更された時のみ実行してその結果をuseStateのステートに代入しています。);};Consoleにログが1回だけ出力されています。getResult()を複数回呼び出すこと無く、その結果を複数回利用することができました。補足:useCallbackを使わない場合ちなみに上記でuseStateとuseEffectは使うがuseCallbackを使わない場合。);};Consoleにログが2回出力されており、getResult()が複数回実行されています。getResult()はeslintによりwarningとなっています。関数を副作用フックのdependencyに利用する際は、useCallbackでその関数をメモ化しないとレンダリングごとにその関数が実行されてしまうとのこと。useCallback、useState、useEffectをセットで使う必要があったんですね。(react-hooks/exhaustive-deps)eslint正解パターンは後編です。はじめ「useCallbackでメモ化し、useState、useEffectを使う方法」を正解パターンとしていましたが、もっと簡潔な記述でメモ化する方法を教えて頂いたので後編にて紹介します。