最終更新:2022-08-04 (木) 14:17:02 (4d)  

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

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

ドキュメント

主なフック

useState

  • React/関数コンポーネントでstateを管理(stateの保持と更新)するためのReactフック
    const [状態変数, 状態を変更するための関数] = useState(状態の初期値);

useEffect

  • ある値が変わっときに処理を実行する機能
  • 関数の実行タイミングをReactのレンダリング後まで遅らせるhook
    useEffect(実行する関数, [依存する値]);

useContext

useReducer?

useCallback

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

useMemo

useRef

種類

基本的なフック

useState

useEffect

useContext

追加のフック

useReducer?

useCallback

useMemo

useRef

useImperativeHandle?

useLayoutEffect?

useDebugValue?

useDeferredValue?

useTransition?

useId?

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

useSyncExternalStore?

useInsertionEffect?

メモ

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

関連