Reactフックの例 --- useMemo

React useMemo

useMemoはPureComponentに似ており、他の無関係なパラメータの変更によってコンポーネントが再レンダリングされないようにします。

PureComponentはクラスコンポーネント用で、useMemoはFunctionコンポーネント用です。さらに、React.useMemoはパラメータを指定することができ、そのパラメータが変更された場合にのみコンポーネントを再レンダリングします。

使用方法

import React, {useMemo, useState} from 'react'
function Child (props) {
 const showNumber = () => {
 console.log('========render========')
 return (
 <div>
 <p>number is : {props.number}</p>
 </div>
 )
 }
 return useMemo(showNumber, [])
}
export default () => {
 const [count, setCount] = useState(0)
 return (
 <>
 <p>{count}</p>
 <button onClick={() => setCount(count+1)}>Click me!</button>
 <Child number={count}/>
 </>
 )
}

上のコードでは、子関数コンポーネントはuseMemoによって処理されます。 useMemoの2番目のパラメータは、値を変更したときに再レンダリングされる関数コンポーネントに入れるオブジェクトの配列です。もし[]がnullの場合、レンダリングされるのは一度だけで、その後propsに何が起こってもレンダリングされることはありません。

上記のコードを実行すると、子コンポーネントは最初にレンダリングされたときに一度だけ showNumber メソッドを実行し、その後何度ボタンがクリックされても再レンダリングされないことがわかります。