Reactの useState は書き方自体はシンプルですが、使い方を少し間違えるだけで「画面がおかしい」「動きが重い」といった分かりにくい不具合につながります。初心者が特に引っかかりやすい3つのチェックポイントを見てみます。

チェック1: 初期値の計算を毎回実行していないか

// 悪い例
function UserList({ rawData }) {
  const [list, setList] = useState(parseAndSortUsers(rawData)); // 重い処理
  // ...
}

useState(初期値) の「初期値」の部分は、コンポーネントが再描画されるたびに毎回評価されます。parseAndSortUsers(rawData) が重い処理だった場合、実際に使われるのは最初の1回だけなのに、再描画のたびに無駄に実行され続けてしまいます。

// 良い例
function UserList({ rawData }) {
  const [list, setList] = useState(() => parseAndSortUsers(rawData)); // 関数として渡す
  // ...
}

初期値を関数（() => ...）として渡すと、Reactはその関数を最初の描画時にだけ呼び出します。これを「遅延初期化」と呼びます。重い計算や、localStorageから値を読み込むような処理を初期値にする時は、この書き方が基本です。

チェック2: イベントハンドラの中で古い値を読んでいないか

// 悪い例
const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  setCount(count + 1);  // 2回呼んでも+1にしかならない
}

handleClick が実行された瞬間の count はその時点の値に固定されています。2行とも同じ count（例えば0）を見ているので、どちらも「0+1」を積んでいるだけです。

// 良い例
function handleClick() {
  setCount(c => c + 1);
  setCount(c => c + 1);  // 直前の値を受け取って+1ずつ積み上がる
}

「前の値を使って次の値を決める」場合は、値ではなく関数を渡す形（関数型更新）にすると、直前の更新結果を確実に受け取れます。

チェック3: イベント登録時に関数を実行してしまっていないか

// 悪い例
<button onClick={handleClick()}>送信</button>

onClick={handleClick()} と書くと、handleClick() はボタンが描画された瞬間にその場で実行され、その戻り値（多くの場合 undefined）が onClick に渡ってしまいます。クリックしても何も起きません。

// 良い例
<button onClick={handleClick}>送信</button>

onClick に渡したいのは「クリックされた時に呼ばれる関数そのもの」であって「関数を呼び出した結果」ではありません。() を付けずに関数の参照だけを渡すことで、クリックされたタイミングで初めて実行されるようになります。

AIに聞くときのコツ

この3パターンはどれも見た目が似ているコードでも挙動がまったく違うため、自分で見分けるより「このコードで想定と違う動きになる理由を教えて」とAIに聞いた方が早いことが多いです。ただし、AIの答えをそのまま貼るだけだと「初期化のタイミングの問題」「クロージャの問題」「実行タイミングの問題」のどれを指しているのか区別がつかないまま終わることもあります。

コードをAIに渡して終わりにせず、「今のコードはこの3パターンのどれに当てはまりますか」と聞き返す——この一手間が、単に直すだけでなく仕組みを理解する近道になります。プログラミングの知識と同じくらい、こうしたAIとのやり取りの組み立て方も、学んでいくうちに自然と身についていくスキルです。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全20セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください