useState
なぜ学ぶか： 「ボタンを押したら数字が増える」— この当たり前の動きを作るのがuseStateです。Reactの心臓部で、AIのコードに必ず出てきます。まずは下の例を見てください。
まずはこの例を見てみましょう
function Counter() {
// 「押された回数」を覚えておく箱を作る（最初は 0）
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{count} 回押されました
</button>
);
}ボタンを押すとsetCountが呼ばれ、countが1増えて、画面の数字も変わります。
state＝コンポーネントが覚えておく値
例のcountがそれです。押された回数のように「操作で変わり、画面に出したい値」を入れる箱です。
useStateは「今の値」と「変え方」のペアを返す
useState(0)は「最初は0」の箱を作り、今の値（count）と、変えるための関数（setCount）を返します。[count, setCount]という受け取り方は、前にやった分割代入の形です。
setCountで変えると、画面が描き直される
例のsetCount(count + 1)を呼ぶと、Reactが画面を描き直して新しいcountを表示します。「set〇〇 を呼ぶと画面が変わる」— これが核心です。
直接書き換えても、画面は変わらない
count = count + 1と直接書き換えるのはダメです。Reactはset〇〇 が呼ばれたときだけ描き直すので、画面に反映されません。
ステップ 1 / 3
※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。