フック (Hook)とは

Reactフック(Hook)は、関数コンポーネント内で状態(state)やライフサイクルメソッドなどのReactの機能を使用するための新しい方法です。

以前のReactでは、クラスコンポーネントを使用してこれらの機能を扱っていましたが、フックは関数コンポーネントでも同じ機能を使用できるようにします。

 

フックを使用すると、状態の管理や副作用の実行など、コンポーネントの機能をカプセル化できます。フックは、useState、useEffect、useContext、useReducer、useCallback、useMemoなどの関数として提供されます。

 

具体的なフックの例を見てみましょう。

 

useStateフック

useStateフック

useStateフック

上記の例では、useStateフックを使用してcountという状態変数と、その状態を更新するためのsetCount関数を宣言しています。

countの初期値は0です。ボタンをクリックするとincrement関数が呼び出され、countの値がインクリメントされます。

 

useEffectフック

useEffectフック

useEffectフック

上記の例では、useEffectフックを使用してタイマーを作成しています。

コンポーネントがマウントされたときにタイマーが開始し、コンポーネントがアンマウントされたときにタイマーが停止します。

 

フックは、関数コンポーネントのトップレベルでのみ呼び出す必要があります。

また、条件付きで呼び出すことや、ループの中で呼び出すことはできません。

 

フックにはさまざまな種類があり、それぞれ異なる目的や使用方法があります。

Reactの公式ドキュメントには、詳細な情報や具体的な使用例が記載されていますので、必要に応じて参照することをオススメします。

Quick Start – React (英語版)

Getting Started – React (翻訳版)