React Hooks早わかり(useMemo, useCallback, React.memo編)
投稿日 : 2022-04-05
更新日 : 2022-04-07
パフォーマンス最適化
React では不要なレンダリングを避けるために、React.memo, useMemo, useCallback が利用される。
本ページでは使用方法、タイミングを記載する。
useCallback
関数に対して使用。(処理をメモ化)
メモ化されたコールバック関数を返すフック。
第二引数に指定した依存配列に指定した値が変化した場合のみ、useCallbackの関数も変化する。
よって、不要に生成される関数インスタンスの作成を抑制し、再描画を減らすことにつながり、パフォーマンス向上が期待できる。
React.memo と併用することで、コンポーネントの不要な再レンダリングをスキップできる
//[deps]は依存配列(コールバック関数が依存している要素が格納された配列)
useCallback(callbackFunction, [deps]);カスタムフック内の関数はuseCallbackをとにかく使え！的な意見もある。
https://blog.uhy.ooo/entry/2021-02-23/usecallback-custom-hooks/
React.memo
コンポーネントに対して使用。
コンポーネントが返した React 要素を記録し、再レンダーされそうになった時に
本当に再レンダーが必要かどうかをチェックして、必要な場合のみ再レンダーする。
- 本当に再レンダーが必要かどうかをチェック
- メモ化によりコンポーネントの再描画をスキップ
- 必要な場合のみ再レンダー
// メモ化したいコンポーネントをラップして使うことで、不要な再レンダリングを防ぐ。
const メモ化されたコンポーネント = React.memo(
元のコンポーネント,
(prevProps, nextProps) => {
/* true or flase */
}
);useMemo
計算結果の値をメモ化
// render時に毎回重い処理をするのを避けたいときとか。
// a, bの値の変更を検知して再計算する。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);