React Hooks って、どんな機能があるのかな？
今回は、React.js を学ぶ上で押さえておきたい主要な機能のひとつである、React Hooks についてご紹介します。
React Hooks とは何か？
React Hooks とは、React 16.8 で導入された機能で、 これまで クラスコンポーネント でしか扱えなかった “状態管理” などのReactの機能 を、関数コンポーネント でも扱えるようにした仕組みです。
現在の React.jsの開発 では、React Hooks を前提とした 関数コンポーネント が主流です。
React Hooks が生まれた背景
それまでの React.js では、状態管理 や ライフサイクルの処理 を行うには クラスコンポーネントが必要でした。
しかし、クラスコンポーネント はコードが複雑になりやすく、同じロジックを複数のコンポーネントで共有することも簡単ではありませんでした。
そこで登場したのが React Hooks です。
React Hooks により、関数コンポーネント だけで効率的に再利用可能なコードを書くことができるようになりました。
React Hooks 一覧
React Hooks 主要な機能の一覧は下記になります。※Hook名 がリンクになっています。
| Hook名 | 用途 | 簡単な説明 | サンプルコード |
|---|---|---|---|
useState | 状態管理 | コンポーネント内で状態を保持し、更新すると再レンダリング | const [count, setCount] = useState(0); |
useEffect | 副作用処理 | API取得、DOM操作、タイマーなど副作用処理を実行 | useEffect(() => { fetchData(); }, []); |
useRef | DOM参照・値保持 | DOM参照や再レンダリング不要の値保持に使用 | const inputRef = useRef(); |
useContext | コンテキスト利用 | Contextの値を取得してコンポーネントで使用 | const theme = useContext(ThemeContext); |
useReducer | 複雑な状態管理 | Redux風の状態管理が可能、状態遷移ロジックを分離 | |
useCallback | 関数メモ化 | 再レンダリング時に同じ関数を再利用、子コンポーネントの無駄レンダリング防止 | const increment = useCallback(() => setCount(c => c + 1), []); |
useMemo | 計算結果メモ化 | 重い計算の結果を再利用、パフォーマンス最適化 | const double = useMemo(() => count * 2, [count]); |
useImperativeHandle | Refカスタマイズ | 親コンポーネントに公開するインスタンスメソッドを定義 | useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus() })); |
useLayoutEffect | レイアウト副作用 | DOM描画後すぐに同期で副作用を実行（useEffectより優先） | useLayoutEffect(() => { console.log(divRef.current.offsetHeight); }, []); |
useDebugValue | デバッグ用 | カスタムHookのデバッグ情報を表示 | |
まとめ
React Hooks の 概要 や 生まれた背景・機能一覧 について、いかがでしたでしょうか？
次回は、上記一覧の React Hooks の各機能を具体的なサンプルコード付きで解説していきます。
コメント