Knowledge EC

useState の基本と初期化

useState は React のフックの一つで、関数コンポーネント内で状態（state）を管理するために使用されます。

簡単に説明すると：

コンポーネント内で変更可能な値を保持します
値が更新されると、コンポーネントが再レンダリングされます
初期値を設定でき、現在の値と更新関数のペアを返します

基本的な使い方の例：

import React, { useState } from "react";

function Counter() {
  // [現在の値, 更新関数] = useState(初期値)
  const [count, setCount] = useState(0);

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

この例では、count が状態変数で、setCount が更新関数です。ボタンをクリックするとカウントが増加し、コンポーネントが再レンダリングされて画面が更新されます。

おわりに

Claude 3.7 Sonnet で生成した、勉強会用のダミーデータです。

エラーハンドリングの実装

useState の基本と初期化

おわりに