React Hooksを学習する際、多くの初学者が「Hooks」という概念でつまずくという声が聞かれます。特にuseStateとuseEffectは、どちらも頻繁に使用されるものの、違いや使い分けがわかりにくいと言われることが多い概念です。
そこで今回は、React Hooksの基本中の基本であるuseStateとuseEffectについて、実際にカウンターアプリを作りながら学んでいく方法を紹介します。この2つのHooksを理解することで、Reactの状態管理の基礎を学ぶことができます。
Reactはフロントエンド開発の需要が高い技術として知られており、実務においても広く活用されています。プログラミング初心者の方でも、この記事を通じてHooksの基本についての理解を深めるための基礎知識が得られます。
React Hooksとは?事前に知っておくべき基礎知識
React Hooksを学ぶ前に、まず基本的な概念を整理しておきましょう。
Hooksが登場した背景
以前のReactでは、状態を持つコンポーネントを作るにはクラスコンポーネントを使う必要がありました。しかしクラス構文は初心者には難しく、コードも複雑になりがちでした。
React 16.8（2019年2月リリース）でHooksが正式導入され、関数コンポーネントでも状態管理ができるようになりました。これによりコードがシンプルになり、初心者でも理解しやすくなったとされています。
useStateとuseEffectの役割
この2つのHooksはそれぞれ明確な役割があります:
– useState: コンポーネントに「状態」を持たせる(データを記憶する)
– useEffect: 「副作用」を扱う(画面更新後に実行する処理)
「useStateは変数の記憶、useEffectはタイミング制御」という理解の仕方が、開発者の間で共有されることが多い表現です。
Hooksを使う際のルール
Hooksには守るべき2つのルールがあります:
– 関数の最上位レベルでのみ呼び出す(条件分岐やループの中では使わない)
– React関数コンポーネント内、またはカスタムフック内でのみ使用する
これらのルールを守らないと予期しないエラーが発生するため注意が必要です。
ステップ1: useStateで基本のカウンター機能を作る
それでは実際にコードを書いていきましょう。まずはuseStateを使った基本的なカウンター機能から始めます。
環境準備
- Reactプロジェクトを作成する(ViteやCreate React Appを使用)
- srcフォルダ内にCounter.jsxファイルを新規作成
- エディタでCounter.jsxを開く
基本的なカウンターコードを書く
- 以下のコードをCounter.jsxに記述します:
- App.jsxでCounterコンポーネントをインポートして表示
- npm run devで開発サーバーを起動して動作確認
useStateの仕組み理解
useState(0)は配列を返します:
– 第1要素(count): 現在の状態値
– 第2要素(setCount): 状態を更新する関数
setCount(count + 1)を実行すると、Reactが自動的に画面を再描画してくれます。この「状態が変わったら自動で画面更新」がReactの強力な機能です。
React公式ドキュメントでは、複数の状態を管理する場合は複数のuseState呼び出しが推奨されています:
ステップ2: useEffectで副作用処理を追加する
次に、useEffectを使ってカウントが変更されたときの処理を追加します。
useEffectの基本構文
- Counter.jsxの先頭でuseEffectをインポート:
- Counterコンポーネント内に以下のuseEffectを追加:
- ブラウザで動作確認し、コンソールとタブのタイトルを確認
依存配列の重要性
useEffectの第2引数[count]を「依存配列」と呼びます。この配列に指定した値が変更されたときのみ、useEffect内の処理が実行されます。
依存配列の使い分け:
– [count]: countが変更されたときのみ実行
– []: 初回レンダリング時のみ実行(マウント時)
– なし: 毎回のレンダリングで実行(通常は使わない)
クリーンアップ処理
- タイマー機能を追加して、クリーンアップの仕組みを学ぶ:
- コンポーネントがアンマウントされたときに適切に処理が終了することを確認
useEffectから関数を返すと、それがクリーンアップ関数として実行されます。これにより、タイマーやイベントリスナーなどのリソースを適切に解放できます。
ステップ3: 実践的なアプリケーションに発展させる
基本が理解できたら、より実践的な機能を追加してみましょう。
コンポーネント分割
- src/componentsフォルダを作成
- Display.jsxファイルを作成し、表示専用コンポーネントを作る:
- Counter.jsxを修正してDisplayコンポーネントを使用:
ローカルストレージへの保存
- カウント値をローカルストレージに保存する機能を追加:
- ブラウザをリロードしても値が保持されることを確認
入力フォームとの連携
- 目標値を設定できる機能を追加:
この段階まで来ると、useStateとuseEffectを組み合わせた実践的なアプリケーションが作れるようになります。
よくある失敗と解決方法
React Hooksを使い始めると、誰もが陥りやすい失敗パターンがあります。開発者がよく遭遇する失敗例と対処法を紹介します。
無限ループに陥る
useEffectの依存配列を正しく設定しないと、無限ループが発生します:
解決法: 依存配列を正しく設定するか、関数型更新を使う:
古い状態値を参照してしまう
useEffect内で状態を参照する際、クロージャの仕組みで古い値が使われることがあります:
解決法: 関数型更新を使う:
useEffectの依存配列に関数を入れる
関数を依存配列に入れると、毎回新しい関数として認識され意図しない再実行が発生します:
解決法: useCallbackを使うか、依存配列から除外します。
オブジェクトや配列の更新
状態がオブジェクトや配列の場合、直接変更してもReactは変更を検知できません:
解決法: スプレッド構文で新しいオブジェクトを作る:
React公式ドキュメントでは、イミュータブルな更新がReactの重要な概念として説明されています。
まとめ
React HooksのuseStateとuseEffectは、現代のReact開発で頻繁に使用される基本機能です。useStateで状態を管理し、useEffectで副作用を扱うという役割分担を理解すれば、多くのReactアプリケーションが作れるようになります。
最初は難しく感じるかもしれませんが、実際に手を動かしてカウンターアプリを作りながら学ぶことで、自然と理解が深まっていきます。基礎知識の習得は実務での応用につながるため、しっかりと学習することが重要です。
次のステップとしては、useContextやuseReducerなど他のHooksも学んでいくと、より複雑な状態管理ができるようになります。まずは今回紹介したuseStateとuseEffectをしっかりマスターしましょう。
よくある質問
Q. useStateとuseEffectはどちらを先に学ぶべきですか?
まずuseStateから学ぶことが推奨されるケースが多いです。状態管理の基本を理解してから、その状態変化に応じた処理を行うuseEffectに進むと理解しやすいとされています。両方セットで使うことが多いため、早めに両方学んでおくことが望ましいでしょう。
Q. useEffectの依存配列を空にするとどうなりますか?
依存配列を空[]にすると、コンポーネントのマウント時(初回レンダリング時)にのみuseEffect内の処理が実行されます。API呼び出しなど、初回だけ実行したい処理に使われます。ただし、状態を参照する場合は注意が必要です。
Q. クラスコンポーネントも学ぶ必要がありますか?
2026年現在、Hooksを使った関数コンポーネントが標準的なアプローチとなっており、新規プロジェクトではクラスコンポーネントが使われることは少なくなっています。まずはHooksに集中して学ぶことが効率的とされています。既存コードのメンテナンスで必要になった際に学ぶという方法も考えられます。
コメント