組み込みの React フック

state フック

state を使うと、ユーザの入力などの情報をさせることができます。例えば、フォームコンポーネントは入力された文字を保持し、画像ギャラリのコンポーネントは選択された画像を保持できます。

コンポーネントに state を追加するには、次のフックのいずれかを使います：

は直接的に更新できる state 変数を定義します。
は、内に書いたロジックを用いて更新を行う state 変数を定義します。

コンテクストフック

コンテクストを用いると、コンポーネントは props を渡すことなく、。例えば、アプリの最上位のコンポーネントが、現在の UI テーマをコンポーネントの階層に関係なくすべてのコンポーネントに渡すことができます。

は、コンテクストの値を読み取り、変更を受け取れるようにします。

ref フック

ref を用いると、コンポーネントは DOM ノードやタイムアウト ID などの、することができます。state と違い、ref の値を更新してもコンポーネントは再レンダーされません。ref は、React パラダイムからの「避難ハッチ」です。これらは組み込みのブラウザ API などの、React 外のシステムを取り扱うときに役立ちます。

は ref を宣言します。useRef にはどんな値でも格納できますが、多くの場合、DOM ノードを格納するために使われます。
を用いると、コンポーネントが公開する ref をカスタマイズできます。これはほとんど用いられることはありません。

エフェクトフック

エフェクトを使うことで、ことができます。これには、ネットワーク、ブラウザの DOM、アニメーション、別の UI ライブラリを使って書かれたウィジェット、その他の非 React コードの処理が含まれます。

は外部のシステムとコンポーネントを接続します。

エフェクトは、React パラダイムからの「脱出ハッチ」です。エフェクトをアプリケーションのデータフローを調整するために使ってはいけません。外部のシステムとやりとりを行わないならば、。

useEffect には、実行タイミングが異なり、まれに使われることのある 2 つのバリエーションがあります：

はブラウザが画面を再描画する前に発火します。このフックでレイアウトを測定できます。
は React が DOM に変更を加える前に発火します。ライブラリは動的な CSS をこのフックで挿入できます。

パフォーマンス関連フック

再レンダーのパフォーマンスを最適化するためのよくある方法は、不要な処理を減らすことです。例えばキャッシュ済みの計算結果を再利用したり、データの変更がない場合の再レンダーをスキップしたりするよう、React に伝えることができます。

不要な計算やレンダーをスキップするためには、以下のフックを用いることができます：

を用いると高負荷な計算の結果をキャッシュできます。
を用いると、最適化済みのコンポーネントに渡すために関数定義をキャッシュしておくことができます。

画面の更新が実際にあるため、再レンダーをスキップできない場合もあるでしょう。その場合、同期的に行う必要があるユーザインターフェイスをブロックする更新（ユーザの文字入力など）を、ユーザインターフェイスをブロックする必要のないノンブロッキングな更新（図の更新など）から分離することで、パフォーマンスを向上することができます。

レンダーの優先度付けを行うために、以下のフックを用いることができます：

を用いることで、state の遷移をノンブロッキングなものとしてマークし、他の更新による割り込みを許可します。
を用いると、UI の重要でない部分の更新を遅延させて、他の部分を先に更新させることができます。

その他のフック

これらのフックはライブラリの開発者には有用ですが、アプリケーションコードでは通常は用いられることはありません。

を用いると、React DevTools が表示するカスタムフックのラベルをカスタマイズできます。
を用いると、コンポーネントにユニークな ID を関連付けることができます。通常はアクセシビリティ API とともに使用されます。
を用いると、コンポーネントは外部のストアを参照できるようになります。
によってアクションの state を管理できます。

独自のフック

JavaScript の関数としてすることもできます。