最終更新:2022-12-16 (金) 05:28:53 (51d)  

React/フック
Top / React / フック

フック (hook) はReact 16.8で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。

要するに

  • 関数コンポーネントに state やライフサイクルといった React の機能を “接続する (hook into)” ための関数

使い道

  • 関数コンポーネントを書いていて state が必要だと気付いた場合、これまではコンポーネントをクラスに変換する必要がありました。
  • 今後は、既に書いた関数コンポーネントの中でフックを使うことができます。

フックのルール

フックを呼び出すのはトップレベルのみ

  • フックは関数のトップレベルのみで呼び出してください。ループや条件分岐やネストした関数の中でフックを呼び出さないでください。
    • 数回 useState や useEffect が呼び出された場合でも React がフックの状態を正しく保持するための仕組み

フックを呼び出すのは React の関数内のみ

  • フックは React の関数コンポーネントの内部のみで呼び出してください。通常の JavaScript 関数内では呼び出さないでください(ただしフックを呼び出していい場所がもう 1 カ所だけあります — 自分のカスタムフックの中です。)

ドキュメント

主なフック

useState

useEffect

  • DOM への更新を反映した後にあなたが定義する「副作用関数」を実行するように React に指示
  • ある値が変わっときに処理を実行する機能
  • 関数の実行タイミングをReactのレンダリング後まで遅らせるhook
    useEffect(実行する関数, [依存する値]);

useContext

  • React/コンテクストを使う
    • 各階層で手動でプロパティを下に渡すことなく、コンポーネントツリー内でデータを渡す方法

useReducer?

useCallback

  • 関数をReact/メモ化 (キャッシュ)
    useCallback(実行する関数, [依存する値]);
  • 依存する値が変わると関数を再作成

useMemo

useRef

種類

基本的なフック

useState

useEffect

useContext

追加のフック

useReducer?

useCallback

useMemo

useRef

useImperativeHandle?

useLayoutEffect

useDebugValue?

useDeferredValue?

useTransition?

useId?

ライブラリ製作者用フック

useSyncExternalStore?

useInsertionEffect?

メモ

  • フックはクラスの内部では動作しません。クラスを書く代わりに使うものです。

関連

React/カスタムフック