状態（state）

useState で値を覚え、変わると画面が描き直される

ポイント

変わる値は useState で持つ。const [count, setCount] = useState(0)
値を変えるときは、必ず setCount(次の値) を使う
値が変わると、React が自動で画面を描き直す。DOM を自分で書き換えなくてよい

試してみよう

import { useState } from "react"

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

  return (
    <div style={{ padding: 16 }}>
      <p>押した回数：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

Open Sandbox

+1 を +10 に変えてみよう
−1 ボタンを足してみよう（ヒント：setCount(count - 1)）
0 に戻すリセットボタンを足してみよう（ヒント：setCount(0)）

つまずきポイント

let count = 0 では画面が変わらない

普通の変数を書き換えても、React は画面を描き直す必要があると気づかない。変わる値は useState で持つ。

onClick={setCount(count + 1)} と書くと、すぐ実行されてしまう

onClick に渡すのは「あとで実行する関数」。() => setCount(count + 1) のように関数で包む。