フック (Hook)とは
Reactフック(Hook)は、関数コンポーネント内で状態(state)やライフサイクルメソッドなどのReactの機能を使用するための新しい方法です。
以前のReactでは、クラスコンポーネントを使用してこれらの機能を扱っていましたが、フックは関数コンポーネントでも同じ機能を使用できるようにします。
フックを使用すると、状態の管理や副作用の実行など、コンポーネントの機能をカプセル化できます。フックは、useState、useEffect、useContext、useReducer、useCallback、useMemoなどの関数として提供されます。
具体的なフックの例を見てみましょう。
useStateフック
上記の例では、useStateフックを使用してcountという状態変数と、その状態を更新するためのsetCount関数を宣言しています。
countの初期値は0です。ボタンをクリックするとincrement関数が呼び出され、countの値がインクリメントされます。
useEffectフック
上記の例では、useEffectフックを使用してタイマーを作成しています。
コンポーネントがマウントされたときにタイマーが開始し、コンポーネントがアンマウントされたときにタイマーが停止します。
フックは、関数コンポーネントのトップレベルでのみ呼び出す必要があります。
また、条件付きで呼び出すことや、ループの中で呼び出すことはできません。
フックにはさまざまな種類があり、それぞれ異なる目的や使用方法があります。
Reactの公式ドキュメントには、詳細な情報や具体的な使用例が記載されていますので、必要に応じて参照することをオススメします。
Quick Start – React (英語版)
Getting Started – React (翻訳版)