フック

完了

フックは、値の変更や、その他のイベントが発生するフレームワークでよく使用されるパターンです。 状態が変わったとき、またはアプリケーションのライフサイクルの他の段階で、実行される自分独自のコードを、一元化された方法で挿入できます。

Effect フック

このユニットでは、Effect フックに焦点を当てます。 このフックは、状態値が設定されると発生します。 これは、初期値とそれ以降のすべての更新が設定されると発生します。

Effect フックを使用すると、設定値に応答してコードを実行できます。 実行するコードには副作用があるため、値は必要に応じて更新できます。

Effect フックはどのようなときに使用するか

Effect フックは、状態の変更に対して、一元的にコードを管理して応答したい場合にいつでも使用できます。 値が多数含まれる複雑なフォームを想像してください。 通常、[送信] ボタンは、サーバーに送信する必要があるデータが有効な状態になるまで、無効にします。 データ内の変更される個々の値にイベントを用意しているとします。 ユーザーがアプリケーションで国や地域を選択すると、サーバーから都道府県の一覧が取得されます。

データがサーバーに送信される準備ができているか、各イベント リスナーが状態を確認することは避けたいでしょう。 この設定は非効率的です。 代わりに、Effect フックを使用します。 Effect フックでは、データを参照する関数を 1 つ作成できます。 データの状態が有効である場合、[送信] ボタンを有効にできます。

useEffect

Effect フック用にリスナーを登録するには、useEffect を使用します。 useEffect では、状態が変わったときに実行されるパラメーターなしの関数を許可します。

useEffect(() => {
    // code goes here
});

useEffect は、すべてのステートフル オブジェクトで状態が変更されると既定で実行されます。 特定のオブジェクトのグループにフックを有効にして、依存関係を指定できます。

useEffect(() => {
    // code goes here
}, [ someStatefulObject ]);