最終更新:2023-04-04 (火) 18:54:38 (614d)
React/フック
フック (hook) はReact 16.8で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。
要するに
- 関数コンポーネントに state やライフサイクルといった React の機能を “接続する (hook into)” ための関数
RFC
使い道
- 関数コンポーネントを書いていて state が必要だと気付いた場合、これまではコンポーネントをクラスに変換する必要がありました。
- 今後は、既に書いた関数コンポーネントの中でフックを使うことができます。
フックのルール
https://ja.reactjs.org/docs/hooks-rules.html
- フックは JavaScript の関数ですが、2 つの追加のルールがあります。
フックを呼び出すのはトップレベルのみ
- フックは関数のトップレベルのみで呼び出してください。ループや条件分岐やネストした関数の中でフックを呼び出さないでください。
- 数回 useState や useEffect が呼び出された場合でも React がフックの状態を正しく保持するための仕組み
フックを呼び出すのは React の関数内のみ
- フックは React の関数コンポーネントの内部のみで呼び出してください。通常の JavaScript 関数内では呼び出さないでください（ただしフックを呼び出していい場所がもう 1 カ所だけあります — 自分のカスタムフックの中です。）
ドキュメント
1 フックの導入 https://ja.reactjs.org/docs/hooks-intro.html
2 フック早わかり https://ja.reactjs.org/docs/hooks-overview.html
3 ステートフックの利用法 https://ja.reactjs.org/docs/hooks-state.html
4 副作用フックの利用法 5 フックのルール 6 独自フックの作成 7 フック API リファレンス https://ja.reactjs.org/docs/hooks-reference.html
8 フックに関するよくある質問
主なフック
useState
- React/関数コンポーネントでReact/ステートを管理（保持と更新）するためのReactフック
const [状態変数, 状態を変更するための関数] = 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?
メモ
- フックはクラスの内部では動作しません。クラスを書く代わりに使うものです。
