【初心者向け】 React Hooks とは?その特徴・使い方・注意点について解説！

React Hooksは、JavaScriptライブラリのReactに備わっている機能です。この記事では、React Hooksの特徴や基本的な使い方、注意点などを分かりやすく解説します。WebサービスなどのUI開発に携わるエンジニアの方はぜひ参考にしてください。

React Hooksとは

React Hooksのフック（hook） とは、2019年2月リリースのReact16.8から追加された、クラスを使用せずに Reactを書くことができる機能です。React Hooksは便利な機能のため、最近ではフックを使った関数コンポーネントによる開発が主流になりました。

特徴・メリット

React Hooksの長所は、クラスを書かなくてもReactの機能を使えることです。例えば、関数コンポーネントにstateを持たせたり、ライフサイクルに応じた処理を実装したりできます。また、フックを利用すると、1つのコンポーネントを複数の関数に分割することも可能です。

これらの特徴により、フックを利用すると従来よりも簡潔で読みやすいコードが書けます。また、既存のコードを完全に書き換えることなく、一部のコンポーネントで利用できることもフックのメリットです。既存のコードとフックを含むコードを併用しながら、段階的に採用できます。

さらに、JavaScriptライブラリのRedux（リダックス）と併用しやすいことも、フックを活用すべき理由の一つです。ReduxとReact Hooksを併用すると、stateを管理するためのコンテナコンポーネントを減らすことが可能となります。

基本的な React Hooks の使い方

React Hooksには、機能の異なる複数のフックがあります。基本的なフックの役割と使い方は次の通りです。

1．useState

useStateは、関数コンポーネントのstateを保持したり、更新したりするためのフックです。数あるReact Hooksの機能の中でも、特に頻繁に利用されます。

stateとは、フォームに入力されたデータなど、アプリケーションが保持している状態のことです。useStateは次のような形で記述されます。

const [stateの変数, stateを更新する関数] = useState(stateの初期値)

useStateが必要となる場面は、インタラクティブにやり取りされる値を管理したい時です。典型的な例として、入力フォームを実装する場合が挙げられます。

2．useEffect

useEffectは、関数コンポーネントで副作用を制御できるフックです。副作用とは、DOMの変更やファイルへの書き込みなど、関数の外に影響を与える処理を指します。useEffectを使用すると、関数を実行するタイミングをReactのレンダリング後まで遅らせることが可能です。

useEffectでは、マウント時に行った処理をアンマウント時に解除します。副作用関数はレンダリング時に毎回実行される仕組みです。そして、次の副作用関数を実行する前にクリーンアップ関数を返し、一つ前の副作用関数を解除します。一連の繰り返し処理はライフサイクルと呼ばれます。

useEffectの基本的な記述方法は次の通りです。

useEffectが必要なケースとして、コンポーネントの呼び出し時に外部APIからリソースを取得する場合などが挙げられます。

3．useContext

useContextは、複数のコンポーネント間で共通して利用したいデータを管理できるフックです。通常はpropsを通じて、親コンポーネントから子コンポーネントへデータを受け渡しが行われます。一方、useContextを使えばpropsを介さずにデータのやり取りが可能です。

useContextは次のように記述します。

第1引数には、「React.createContext」で作成したコンテキストオブジェクトを指定しましょう。

useContextは、認証情報の管理など複数のコンポーネント間でデータを横断的に扱う場合に利用します。

4．useRef

useRefはrefオブジェクトを生成するためのフックです。refオブジェクトとは.currentプロパティに値を保持できるオブジェクトで、Reactコンポーネントの要素に対する参照などを保存できます。

useStateとuseRefの違いは、コンポーネントの再レンダリングの有無です。useStateでは、stateが変更された時に毎回コンポーネントが再レンダリングされます。一方、useRefは保持している値が変更されても再レンダリングが起きません。

useRefの基本的な記述方法は次の通りです。

useRefが必要となる主なケースとして、DOMへの参照を保存する場合が挙げられます。

5．useMemo

useMemoは、関数が出力した値を保持しておくためのフックです。何度実行しても結果が変わらない計算などの値を保存し、必要なタイミングで再取得できます。useMemoを使って、初回に実行した結果だけを2回目以降に取得できるようにする処理は、「メモ化」と呼ばれます。

依存配列が空の場合のuseMemoの記述方法は次の通りです。

依存配列に値が入っている場合は次のように記述します。

useMemoの主な利用シーンは、配列を保持するstateで配列を頻繁に走査処理する場合などです。

6．useCallback

useCallbackは、関数をメモ化し、パフォーマンス向上を実現するためのフックです。依存配列の要素が変化した場合に、メモ化した関数を再計算します。useCallbackの利用時は、基本的にReact.memoと併用する必要があります。

useMemoとuseCallbackの違いはメモ化する対象です。useMemoは関数の計算結果を保持し、useCallbackは関数そのものをメモ化します。

useCallbackの基本的な記述方法は次の通りです。

useCallbackは、処理を最適化する上で子コンポーネントのpropsに関数を渡す必要がある場合などに利用されます。

7．useReducer

useReducerは、複雑なstateを管理するためのフックです。useReducerを使用すると、useStateよりも複雑な状態を管理できます。また、state管理のロジックを一元的にまとめることが可能です。

useStateは、useReducerの内部に実装されています。useStateはオブジェクトや数値、文字列、論理値などのstateを扱えます。一方、useReducerで扱えるstateはオブジェクトと配列のみです。useStateはローカルのstateが対象、useReducerはグローバルかつ複数のstateが対象となります。

useReducerの基本的な記述方法は次の通りです。

useReducerは、複数の値に関連するstateを更新したい場合などに必要となります。

その他の便利な React Hooks

基本的なもの以外にも、React Hooksには様々なフックの種類があります。知っておくと便利なその他のフックは以下となります。

react hook form

react hook formを利用すると、入力フォームのデータを簡単に扱えるようになります。入力された値の取得やバリデーションなど、フォームに必要な機能を効率的に実装することが可能です。

custom hooks

custom hooksは、独自の機能を持つフックを定義できる機能です。custom hooksを使うと、コンポーネントのコードを簡潔にしたり、複数のフックをまとめたりできます。

React Hooksの注意点

React Hooksは、便利な機能ではあるものの、使用時にはいくつかの注意点もあります。

まず、フックは関数コンポーネントでのみ使用可能で、クラスコンポーネントに使用することはできません。

また、コンポーネントで複数のフックを呼び出す場合は順番と回数が同じであることが必須条件です。特定のケースではフックを実行しないなど、順番や実行回数のルールが変わるような書き方は禁止されています。

特に、依存配列を含むフックを使用する場合、依存関係の記述漏れによってバグが発生しやすい傾向があります。例えば、useEffectやuseMemo、useCallbackなどのフックでは、記述漏れがないように注意が必要です。JavaScript向け検証ツール「ESLint（イーエスリント）」 のeslint-plugin-react-hooksプラグインを導入すると、記述の不備を簡単に見つけられます。

useEffectによる無限ループも、注意すべきポイントです。useEffectのコールバック関数でstateを変更した時に第二引数にstateを渡すようなコードを書いてしまうと、無限ループが発生します。この問題を避けるために、useEffectの第二引数は空にしておきましょう。

React Hooksを用いたコードは既存のコードと併用できるため、フックへの移行を急ぐ必要はありません。既存の複雑なコンポーネントを大幅な書き換えるとトラブルが起きやすいため、段階的な移行がおすすめです。

React Hooksとは、クラスを使うことなくReactのstateを扱ったり、ライフサイクルに応じた処理を実装したりできる機能です。React Hooksを活用すると、簡潔で読みやすいコードを記述できます。Reactを扱うエンジニアの方は、ぜひReact Hooksの使い方を学び、開発に役立てましょう。