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;

（prevを使った更新で、複雑な状態更新でも安全に反映されます）

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;

（依存配列にcountを入れることで、必要なときだけ副作用が実行されます）

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

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

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

4. ポイント整理

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

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

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

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


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

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

（前の配列をもとに新しい配列を作ることで、一覧表示が正しく更新されます）

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

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

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


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

（画面を開いたときに一度だけ処理が実行されます）

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

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

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


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

（処理を分けることで、コンポーネントの役割が分かりやすくなります）