再レンダリングを防ぐことでパフォーマンスを向上する方法(関数)についての備忘録
React.memo()
コンポーネントの再レンダリングを防ぐための高階コンポーネント。
受け取ったpropsの値が同じであれば再レンダリングをスキップする機能がある。
propsの変更を判定し、変更があった場合のみ再レンダリングをする。
usecCallback()
関数をメモ化(キャッシュ)するためのフック。
コンポーネント内で定義した関数をメモして再利用し、レンダリングのたびに生成されることを防ぐ。
子コンポーネントに関数を渡している場合に、不要のレンダリングを防ぐことができる。
イベントハンドラーを毎回新しく作らないようにできる。
useMemo()
値をメモ化するためのフック。
コンポーネントだけではなく値をメモすることが可能。コストの高い処理などをメモ化する。
useMemo自体の実行にもコストがかかるため、重い処理にのみ使用する。