React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする - Qiita

はじめに React（v16.12.0）のReact.memo、useCallback、useMemoの基本的な使い方、使い所に関しての備忘録です。 「React でのパフォーマンス最適化の手段を知りたい」 「なぜReact.memo、useCallback、useMemoを利用するのかわからない」 といった人達向けに書いた記事です。 デモは CodeSandbox 上に置いてあります。編集して動作を確認してみると理解が深まると思います。 本記事で用いている用語 メモ化 計算結果 メモ化 計算結果を保持し、それを再利用する手法のこと。 キャッシュのようなものだとイメージすれば良いと思う。 そのため、以下の言葉の意味は大体同じ。 「メモ化された値」=「計算結果が保持された値」 「メモ化する」=「計算結果を再利用できるように保持する」 メモ化によって都度計算する必要がなくなるため、パフォーマン

[akatakun]

通常親コンポーネントがre-renderされる・local stateが変化するとre-renderされる。メモ化すると前者はpropsが変化しない限り防げる

[carolina04]

“React では、不要な再計算やコンポーネントの再レンダリングを抑えることが、パフォーマンス最適化の基本的な戦略となる。 それらを実現する手段としてReact.memo、useCallback、useMemoを利用する。 計測は必須。”

[Cherenkov]

useCallback

[sh19910711]

"新しく渡された Props と前回の Props を比較し、等価であれば再レンダリングをせずにメモ化したコンポーネントを再利用"

[Keisuke69]

こちらもReactでのメモ化について。さっきのより包括的