今回もReact Hooksの紹介をしていきます。
useMemo
useMemoはuseCallbackと同じくパフォーマンスの最適化に使われるHookです。
例えば、APIや複雑な計算の結果をレンダリングの度に実行させたくない場合に、同一の関数の結果を返すことができます。
以下の例ではユーザー情報から計算して値を出す処理をuseMemoでラップすることにより、依存データの更新以外で処理を再実行させるのを防いでいます。
また、useMemoは計算結果を返すため、依存データの更新以外では同一オブジェクトであるのを保証したい場合でも使用することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React, { useMemo } from 'react'; function MyComponent(props) { const { firstName, lastName } = props; const fullName = useMemo(() => { return { firstName, lastName, getFullName: function() { return `${this.firstName} ${this.lastName}`; } }; }, [firstName, lastName]); return ( <div> <p>First name: {firstName}</p> <p>Last name: {lastName}</p> <p>Full name: {fullName.getFullName()}</p> </div> ); } export default MyComponent; |
この例では、firstName, lastNameを使用するオブジェクトでそれらの値が変更されるまではfullNameオブジェクトは同一のものであり続けます。
これによって、レンダリングの度に新しいオブジェクトを作成されるのを防ぐことができます。
useRef
useRefはuseStateと同様にコンポーネント内の変数を管理するために使用されます。
ただ、useStateとは異なり、useRefが更新されてもコンポーネントは再レンダリングされない特徴があります。
主な用途としては
- DOM要素へのアクセス
- タイマーの管理
の場合です。
以下は、useRefでカウントダウンタイマーを実装した例となります。
この例ではタイマーのIDをuseRefで管理することにより、タイマーの設定やリセットをするタイミングでコンポーネントの再レンダリングを防いでいます。
また、以下の例ではDOM要素をuseRefで取得し、フォーカスする実装をしています。
useRefを使用するとDOM要素へのアクセスが簡単になります。上記の例ではinput要素のフォーカスに用いていますが、要素の位置の管理や、アニメーションの管理などにも役立ちます。
このようにuseRefは、値を更新してもコンポーネントの再レンダリングがされないという特徴を持つため、タイマーやDOM操作でよく使用されます。
まとめ
- useMemoは関数の結果を依存データが更新されるまで保持する
- APIや複雑な計算をレンダリングごとに実行しなくて済む
- 関数の結果がオブジェクトの場合、更新されるまでは同一であることが保証される
- useRefは値が更新されてもコンポーネントの再レンダリングは行わない
- タイマーをセットしたり、DOMを操作する時によく使われる