Reactは仮想DOMを使用しているため、コンポーネントの再レンダリングが頻繁に発生することがあります。しかし、コンポーネントが何度も再レンダリングされると、パフォーマンスに影響が出ます。
そこで、ReactではuseMemo
というフックを提供しています。このフックを使うことで、コンポーネントの再レンダリングを最適化することができます。
useMemo
は、計算に時間がかかる値をメモ化するために使用されます。メモ化することで、同じ計算を繰り返し実行する必要がなくなり、パフォーマンスが向上します。
例えば、以下のようなコンポーネントがあるとします。
function MyComponent({ data }) {
const sortedData = data.sort((a, b) => a - b);
return (
<div>
{sortedData.map((item) => (
<div key={item}>{item}</div>
))}
</div>
);
}
このコンポーネントでは、data
が変更されるたびにsort
メソッドが呼び出されます。しかし、data
が変更されても、sort
メソッドの結果は同じであるため、この計算結果をメモ化することができます。
useMemo
を使用して、sortedData
をメモ化することができます。
function MyComponent({ data }) {
const sortedData = useMemo(() => data.sort((a, b) => a - b), [data]);
return (
<div>
{sortedData.map((item) => (
<div key={item}>{item}</div>
))}
</div>
);
}
このように、useMemo
を使用することで、コンポーネントのパフォーマンスを最適化することができます。