React Hooksのベストプラクティス完全ガイド！初心者でもわかるuseStateとuseEffectの使い方

1. useStateのベストプラクティス

1. useStateのベストプラクティス

useStateは状態を管理するためのHooksです。状態を直接書き換えるのではなく、set関数を使って更新します。これにより、Reactが変更を検知し、コンポーネントを再レンダリングして正しく画面に反映します。

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(prev => prev + 1);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={increment}>増やす</button>
    </div>
  );
}

export default App;

2. useEffectのベストプラクティス

2. useEffectのベストプラクティス

useEffectは副作用を扱うHooksです。副作用とは、APIの呼び出しやDOM操作、タイマーの設定など、レンダリング以外の処理のことです。副作用は必要なタイミングだけ実行されるように依存配列を使います。

import React, { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`現在のカウント: ${count}`);
  }, [count]); // countが変わったときだけ実行

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

export default App;

3. Hooksを使うときの共通ルール

3. Hooksを使うときの共通ルール

• Hooksはコンポーネント関数のトップレベルで呼び出す
• 条件分岐やループ内で呼び出さない
• 状態更新はset関数を使い、直接変更しない
• useEffectの依存配列は必要な値だけを指定し、無駄な再実行を防ぐ
• 複数のHooksを使うときは、順序を変えない

これらのルールを守ることで、Reactの状態管理や副作用処理が安定し、予期しないエラーを防げます。

4. ポイント整理

4. ポイント整理

初心者でも意識すべきポイントは、useStateとuseEffectをトップレベルで呼び出すこと、状態は直接書き換えず関数で更新すること、依存配列を正しく設定することです。これにより、Reactアプリがより安全で予測可能になります。

5. useStateで複雑な状態を扱うときの考え方

5. useStateで複雑な状態を扱うときの考え方

useStateは数値や文字列だけでなく、配列やオブジェクトのような少し複雑な状態も管理できます。 ただし、初心者の方がよくやってしまうのが「中身を直接書き換える」使い方です。 Reactでは、前の状態をもとに新しい状態を作り直す意識がとても大切になります。

例えば、配列に要素を追加するときは、既存の配列に追加するのではなく、 前の配列をコピーして新しい配列を作る流れになります。 この考え方を身につけると、画面の更新が安定し、思わぬ表示崩れを防げます。

const [items, setItems] = useState([]);

const addItem = () => {
  setItems(prev => [...prev, "新しい項目"]);
};

6. useEffectでよくある失敗と対処法

6. useEffectでよくある失敗と対処法

useEffectはとても便利ですが、使い方を間違えると処理が何度も実行されたり、 逆に必要な処理が動かなくなったりします。 特に多いのが、依存配列を省略したり、必要な値を入れ忘れるケースです。

依存配列が空の場合は「最初の一回だけ実行」、 値が入っている場合は「その値が変わったときに実行」というルールを、 まずはシンプルに覚えておくと混乱しにくくなります。

useEffect(() => {
  console.log("初回のみ実行");
}, []);

7. Hooksを分割して読みやすくする工夫

7. Hooksを分割して読みやすくする工夫

コンポーネントが大きくなってくると、useStateやuseEffectが増えて、 全体の流れが分かりにくくなることがあります。 その場合は、処理のまとまりごとにHooksを整理する意識が大切です。

関連する状態と副作用を近くに書いたり、 別の関数として切り出すことで、コードの見通しが良くなります。 読みやすい構成を意識することも、ベストプラクティスのひとつです。

function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(prev => prev + 1);
  return { count, increment };
}

まとめ

まとめ

今回の記事では、ReactにおけるHooksの基本であるuseStateとuseEffectの使い方と、そのベストプラクティスについて丁寧に整理してきました。特に重要なのは、状態管理と副作用処理を正しく理解し、意図した通りにアプリケーションを動作させることです。Reactは宣言的なUIライブラリであり、状態の変化に応じて画面が更新される仕組みになっています。そのため、状態の扱い方を誤ると、画面が更新されなかったり、予期しない挙動が発生したりする原因になります。

useStateでは、状態を直接書き換えるのではなく、必ずset関数を通じて更新することが基本です。さらに、前の状態を元に更新する場合は、prevを使った関数形式の更新を利用することで、安全に状態を変更できます。この考え方は、配列やオブジェクトといった複雑なデータ構造を扱うときに特に重要になります。状態をイミュータブルに扱うことで、Reactが変更を正しく検知し、再レンダリングが安定して行われます。

一方でuseEffectは、副作用を扱うためのHooksであり、API通信やログ出力、イベントの登録など、レンダリング以外の処理を記述する場面で活躍します。ここでのポイントは依存配列の扱いです。依存配列を正しく設定することで、必要なタイミングでのみ処理が実行され、無駄な再実行やバグを防ぐことができます。依存配列が空の場合は初回のみ実行され、値を指定した場合はその値が変更されたときに処理が走るというルールをしっかり理解しておくことが重要です。

また、Hooksは必ずコンポーネント関数のトップレベルで呼び出す必要があります。条件分岐やループの中で呼び出してしまうと、Hooksの呼び出し順序が変わり、Reactの内部処理に不整合が生じてエラーの原因になります。これはReactの基本ルールの一つであり、初心者のうちにしっかり身につけておくことで、後々のトラブルを未然に防ぐことができます。

さらに実務的な観点では、コードの可読性も非常に重要です。useStateやuseEffectが増えてきた場合は、処理ごとに整理したり、カスタムHooksとして分割したりすることで、コードの見通しが良くなります。読みやすいコードはバグを減らすだけでなく、他の開発者との共同作業においても大きなメリットになります。

ReactのHooksは非常に強力ですが、その分ルールや考え方を正しく理解して使う必要があります。今回学んだ内容をもとに、状態管理と副作用処理を意識しながらコーディングすることで、より安定したアプリケーションを構築できるようになります。基礎をしっかり押さえたうえで、応用へとステップアップしていきましょう。

サンプルコードで理解を深める

import React, { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState("");

  useEffect(() => {
    setMessage(`現在のカウントは ${count} です`);
  }, [count]);

  const increment = () => {
    setCount(prev => prev + 1);
  };

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={increment}>カウントを増やす</button>
    </div>
  );
}

export default App;

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

ReactのuseStateとは何ですか？初心者にもわかるように教えてください

useStateはReactのHooksの一つで、コンポーネント内で状態（データ）を管理するために使います。状態を変更する際はset関数を使うのがReactのベストプラクティスです。