ステートとは？

ここまではすべて静的なものでした。データが入力され、ページが出力され、何ひとつ変わることはありませんでした。実際のアプリは、いいねの数、開いたメニュー、検索ボックスのテキストなど、変化するものを記憶します。その記憶のことをstateと呼びます。

Reactは、useState フックを通じてコンポーネントにステート（状態）を提供します：

import { useState } from 'react';

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

1行に3つの要素があります：

• count: 現在の値
• setCount: それを変更する関数
• useState(0): 初期値

黄金ルール：ステートに直接代入してはいけません。 count = 5 は React が監視していない変数を変更します。setCount(5) はステートを変更し、コンポーネントを再レンダリングします。その再レンダリングによって画面が更新されます。