はじめに
Rectを勉強し始めたのだけど、
memo、useCallbackとuseMemoの違いがよくわからない！！
memo、useCallbackもuseMemoもメモ化をするための道具だよ！
今回は、これらについて違いについて学んでいこう！
結論
メモ化の対象
| 種類 | メモ化の対象 |
|---|---|
| React.memo | コンポーネント |
| useCallback | コールバック関数 |
| useMemo | 値 |
useCallbackとuseMemoの使い分け
- useCallback
子コンポーネントにPropsで関数を渡す場合 - useMemo
コンポーネント内で計算結果を値として使用する場合
解説
React.memo、useCallbackとuseMemoはいずれもメモ化（※）のために使用します。でこれらを使用することで値や関数を保持して、必要の子要素のレンダリングを抑制し、パフォーマンスを向上させることができます。
※メモ化・・関数の計算結果を保持して、同一の呼び出しがあった場合には保持していた結果を返すこと。パフォーマンスを最適化につながる。
通常、コンポーネントが再レンダリングされるケースは以下の３通りあります。
- 使用しているPropsが更新されたとき
- 使用しているContextが更新されたとき
- 親コンポーネントがレンダリングされたとき
React.memo、useCallback、useMemoはいずれも、上記の３つ目「親コンポーネントがレンダリングされたとき」の不要な子コンポーネントのレンダリングを抑制します。
React.memo
コンポーネントをメモ化することで、コンポーネントの再レンダリングを抑制することができます。これにより、Propsや参照しているContextの値が変わらない限り、このコンポーネントの再レンダリングが行われません。
React.memo（コンポーネント）例えば、outputNameというコンポーネントの場合、以下のように書きます。
props.nameが更新されない限り、コンポーネントは再レンダリングされません。
const outputName = React.memo(props => {
return <h1>{props.name}</h1>;
});しかし、React.memoのみだと、Propsに関数やオブジェクトが渡された場合には再レンダリングを抑制できません。関数やオブジェクトが渡された場合に、再レンダリングを抑制するために使用するのが、次に紹介するuseCallback、useMemoになります。
useCallback
関数をメモ化することで、コンポーネントの再レンダリングを抑制することができます。
第一引数は関数を取り、第二引数は依存配列です。
関数の再描画が行われる時に、useCallbackは依存配列の中の値を比較します。依存配列の中の値が描画時と同じ場合はuseCallbackはメモ化している関数を返します。もし、依存配列の中で描画時に異なる値があれば、新しい関数を返します。
依存配列が空の場合、初期描画時に生成された関数を常に返します。
useCallback（関数,依存配列）- 依存配列がある場合
height、widthの値に変更があると関数が再実行されます。
const Triangle = useCallback(calcTriangle(height,width) ,[height,width])- 依存配列がない場合
初回のみ実行されます。
const Triangle = useCallback(calcTriangle(height,width) ,[])useMemo
useMemoは値のメモ化をします。第一引数には値を生成する関数を、第二引数には依存配列をわたします。依存配列の値が再描画時に異なる場合は、関数を実行し、新しい値としてメモに保存します。依存配列の値が再描画時に同じ場合は、関数は実行されず、メモ化している値を返します。
useMemo(値を生成する関数,依存配列)- 依存配列がある場合
height、widthの値に変更があると再計算されます。
const Triangle = useMemo(() => (height * width) / 2 ,[height,width])- 依存配列がない場合
初回のみ実行されます。
const Triangle = useMemo(() => (height * width) / 2,[])終わりに
本記事はここまでとなります。
最後に私がReact学習に使用したおすすめ教材を紹介します。
以下の２つのUdemyがおすすめです。書籍よりもずっと効率よく必要なスキルを取得できます。多くの人に愛されベストセラーを獲得しています。もしよかったら活用してみてください！
ご覧いただきありがとうございました。ご指摘等がございましたら頂けますと嬉しいです。
引き続き、プログラミングについて定期的に発信していきますのでよろしくお願いします！
また、もしよろしければtwitterもフォローしていただけると嬉しいです！🐢
コメント