React フックを使うと、React の機能をクラスを書かずに使えるようになります。useMemo を使うと不必要なレンダリングを避けることができます。この記事では、useMemoの使用例をメモしています。
useMemo は子コンポーネントの計算量の高い再レンダーをスキップするために使うことができます。例で確認します。
import React, { useEffect, useState } from "react";
function App() {
const [count, setCount] = useState(0);
const [count2, setCount2] = useState(0);
useEffect(() => {
console.log("Parent")
})
return (
<div className="App">
{count}
<button onClick={() => setCount(count + 1)}> + </button>
<Child count={count2} />
<button onClick={() => setCount2(count2 + 1)}> + </button>
</div>
);
}
const Child = ({ count }) => {
useEffect(() => {
console.log("Child");
})
return <>
<p>child: {count}</p>
</>
}
export default App;
useMemoはパフォーマンス最適化のために使うものであり、useMemoなしでも動作するコードを書き、パフォーマンス最適化のためにuseMemoを加えるようにしましょう
14: count を更新すると、16: Child (count2 を表示)コンポーネントも再レンダリングされます。
Child コンポーネントが計算量が高いと仮定して、count の更新時の再レンダリングをスキップして、パフォーマンスの最適化を行いたいです。useMemo を使って、count2 の値が変更された場合にのみ Child コンポーネントを再レンダリングするようにします。
import React, { useEffect, useState, useMemo } from "react";
function App() {
const [count, setCount] = useState(0);
const [count2, setCount2] = useState(0);
useEffect(() => {
console.log("Parent")
})
const memoChild = useMemo(() => {
return <Child count={count2} />
}, [count2]);
return (
<div className="App">
{count}
<button onClick={() => setCount(count + 1)}> + </button>
{memoChild}
<button onClick={() => setCount2(count2 + 1)}> + </button>
</div>
);
}
const Child = ({ count }) => {
useEffect(() => {
console.log("Child");
})
return <>
<p>child: {count}</p>
</>
}
export default App;1: useMemo を読み込んで、11~13: useMemo でコンポーネントを囲って、第２引数に count2 を指定して、19: 表示させます。
Child コンポーネントの再レンダリングが必要になる、count2 の更新のみ Child コンポーネントが再レンダリングされるようになります。
以上です。
