ReactJSのHooksは、コンポーネント内で状態を管理するための便利な機能です。その中でもuseMemoは、特定の値をメモ化することができるので、パフォーマンスの改善につながるとされています。この記事では、useMemoの使い方と具体的な例を紹介します。
useMemoとは?
useMemoは、特定の値をメモ化するためのHooksの1つです。メモ化することで、その値が再計算されるのを防ぎ、パフォーマンスの改善につながります。基本的には、計算に時間がかかる値を返す関数をuseMemoでラップすることで、再計算を減らすことができます。
useMemoの使い方
useMemoは、以下のように使います。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
第1引数には、メモ化する値を計算する関数を渡します。第2引数には、依存する値の配列を渡します。依存する値が変化した場合にのみ、再計算が行われます。
実際の例
例えば、以下のようなコンポーネントがあるとします。
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
const expensiveValue = () => {
console.log('expensiveValue is calculated.');
let result = 0;
for (let i = 0; i < 100000000; i++) {
result += i;
}
return result;
};
const memoizedValue = useMemo(() => expensiveValue(), []);
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
<p>Expensive value: {memoizedValue}</p>
</div>
);
};
export default Counter;
このコンポーネントでは、カウンターの値をインクリメントすると同時に、計算に時間がかかる値を表示しています。ここで、useMemoを使わずに実行してみると、ボタンを押すたびに計算が実行されていることがわかります。しかし、useMemoを使うことで、初回のレンダリング時にのみ計算が実行され、以降は再計算が行われなくなります。
まとめ
useMemoは、特定の値をメモ化するこ
とで、パフォーマンスの改善につながるReactJSのHooksの1つです。計算に時間がかかる値を返す関数をuseMemoでラップすることで、再計算を減らすことができます。また、依存する値の配列を第2引数に渡すことで、依存する値が変化した場合にのみ再計算が行われます。
この記事では、useMemoの使い方と具体的な例を紹介しました。このように、useMemoを使うことで、パフォーマンスの向上につながるコンポーネントを作成することができます。是非、ReactJSの開発において活用してみてください。