知っておくべきあと 8 つの React フック

マシュー・タイソン著

ソフトウェアアーキテクト、InfoWorld |

React は依然として JavaScript UI フレームワークの先導者です。 React では多くの開発が進行中ですが、ここ数年の最も重要な変化は機能コンポーネントへの移行でした。 機能コンポーネントは、その機能の多くをフックに依存しています。 最も一般的なフックは useState ですが、他にもたくさんあります。

ここでは、意外と知られていない 8 つの便利な React フックとその使用方法を紹介します。

useState については誰もが知っています。これは、クラスベースのコンポーネントの重要な機能 (状態を保持するメンバー変数) を機能的に同等のものに置き換えるからです。 useReducer フックは同様のことを行いますが、状態遷移がより複雑で、遷移を明示的に行うことでアプリケーションが恩恵を受ける、より複雑なシナリオ向けです。 useReducer フックは、Redux にある Reducer からインスピレーションを得ています。 これは、useState の単純さと Redux のような状態管理システムの複雑さの間の中間点とみなすことができます。

useReducer フックを使用する方法の例を次に示します。 この JSFiddle では、リデューサーがライブで動作していることも確認できます。

この例の目的は、入力ボックスからテキストを取得し、ユーザーがボタンをクリックしてテキストをすべて大文字またはすべて小文字で表示できるようにすることです。 このコードは、const [state,dispatch] = useReducer(reducer,initialState); を使用して新しいリデューサーを宣言します。 useReducer は、reducer 関数と初期状態を取得して配列を返し、それを状態に分解して変数をディスパッチします。

レデューサ自体は次のように定義されます: const raiser = (state, action) => で、2 つの引数を持つ関数が与えられます。 コード内でディスパッチ関数が呼び出されるたびに、アクション オブジェクトとともに現在の状態が渡されます。 この場合、アクション オブジェクトには type フィールドがあり、それを使用して状態を変更する方法を決定します。

適度に複雑なアプリケーションでは、useReducer は複雑さを管理するのに役立ち、コンテキストを使用してアプリケーション全体で共有することもできます。 アプリケーションの複雑さのために useState の管理が難しい場合は、useReducer フックが役に立ちます。

useCallback フックはパフォーマンス フックです。 これは関数を受け取り、単一のバージョンのみが返され、すべての呼び出し元で再利用されるようにします。 関数が高価であり、ループまたは子コンポーネントによって繰り返し呼び出される場合、useCallback フックによりパフォーマンスが大幅に向上する可能性があります。 この種の最適化は、関数のメモ化として知られています。

リスト 2 には、useCallback を使用してリスト内の多くの項目にわたって同じ関数を使用する例があります。 これはライブ JSFiddle の例です。

React.useCallback() を使用して、incrementCounter で新しいメモ化された関数を作成します。 メモ化された関数は、リスト内の onClick ハンドラーで通常の関数として使用できます。 useCallback() は関数を最初の引数として受け取ります。 その関数内で、必要な作業を実行できます。 主な違いは、依存関係変数のリスト (この例ではカウンター変数) に何か変更がない限り、React は単純にキャッシュされた関数の値を返すことです。

これは、高価な関数を複数の呼び出し元、特に子コンポーネント間で共有する必要がある場合に、貴重な魔法の力です。 次のフック (useMemo) を見るとき、useCallback が関数自体を隠していることに注意してください。 つまり、useCallback は、実際の関数が出現するたびに再作成されるのを防ぎ、必要な場合にのみ再作成します。

useMemo フックは useCallback の兄弟です。 useCallback が関数をキャッシュするのに対し、useMemo は関数の戻り値をキャッシュします。 それは微妙な違いですが、重要です。

useMemo と useCallback はどのような場合に使用するべきですか? 答えは、可能な場合は useMemo を使用し、必要な場合は useCallback を使用することです。 useCallback フックは、レンダリングで関数自体を作成することで回避したいパフォーマンス ヒットの場合に役立ちますが、useMemo は関数がどこに表示されても再作成されることを妨げません。 ただし、依存関係が変更されていない場合、useMemo は関数がキャッシュされた値を返すことを保証します。