ReactのuseStateについて

今後業務で使用する可能性がある為、最近Reactを勉強し始めた。
その中で、特有の機能である"useState()"を学んだので、復習がてらちょくちょく書いていく。
間違っている部分もあると考えられる為、あらかじめご了承願いたい。

Reactは、コンポーネント(部品)ベースを基本としており、UI全体を小さな部品単位で組み立てて行く。
恩恵として、複雑な構造のUIも作成しやすくなる。

また、各コンポーネントで状態管理を行う為にuseState()を使用する事で、予期せぬエラーを防ぎやすくなる。

例

// この場合、countが初期値"0"の状態を保持している
// countを更新する為には、setCount(セット関数)を使用する必要がある
// 下記のコードでは、各ボタンをクリックする度にpタグ内の{count}が増減する

function Counter() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>カウント: {count}</p>
            <button onClick={() => setCount(count + 1)}>増加</button>
            <button onClick={() => setCount(count - 1)}>減少</button>
        </div>
    );
}