皆さん、こんにちは。
今日は「React：useMemoとuseCallbackのよい点」についてご紹介します。
useMemoとuseCallbackは、Reactのパフォーマンス最適化のために使われるフックです。
特にコンポーネントが再レンダリングされる際に、不要な再計算を避けるために使用されます。
以下で、それぞれのフックの特徴と使い方を詳しく説明します。
useMemo
useMemoは、計算結果をメモ化して再利用できるようにするためのフックです。特に計算が高価な場合や、レンダリングごとに再計算する必要がない場合に有効です。
よい点
- 高価な計算を一度だけ実行し、依存する値が変わった場合にのみ再計算されるため、パフォーマンスを改善できる。
- 計算量が多い処理を、無駄に繰り返さないようにする。
使い方
import { useMemo } from 'react';
const MyComponent = ({ items }) => {
// items が変わらない限り、フィルタリングされたリストを再計算しない
const filteredItems = useMemo(() => {
return items.filter(item => item.active);
}, [items]); // items が変更された場合にのみ再計算
return (
<ul>
{filteredItems.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};
-
useMemoの最初の引数は計算する関数、2番目の引数は依存配列です。依存配列の値が変わるときにだけ再計算が行われます。
useCallback
useCallbackは、関数をメモ化するためのフックです。特に関数を props として子コンポーネントに渡す場合に、不要な再レンダリングを防ぐために使用します。
よい点
- 関数が再作成されるのを防ぎ、特に子コンポーネントに関数を渡す場合にパフォーマンスを向上させる。
- useEffect や useMemo と一緒に使うことで、依存配列に不必要な再実行を避けることができる。
使い方
import { useCallback } from 'react';
const MyComponent = ({ onAction }) => {
// onAction が変更されない限り、新しい関数を作成しない
const handleClick = useCallback(() => {
onAction();
}, [onAction]); // onAction が変更された場合にのみ再生成
return <button onClick={handleClick}>Click me</button>;
};
-
useCallbackの最初の引数はメモ化する関数、2番目の引数は依存配列です。依存配列内の変数が変わった場合にのみ、新しい関数が生成されます。
まとめ
-
useMemoは高価な計算をメモ化して、無駄な計算を避けるために使用します。 -
useCallbackは関数をメモ化して、再レンダリング時に不必要な関数の再生成を防ぐために使用します。
どちらも、パフォーマンスを最適化するためのツールとして非常に有効ですが、過度に使用するのは避けるべきです。依存関係が多い場合や、計算が簡単な場合には、使うことが逆にパフォーマンスを悪化させることがあります。
ぜひ参考にしてみてください。
今日は以上です。
ありがとうございました。
よろしくお願いいたします。