this.stateとuseStateの違いは?
this.state と useState は、両方とも「Reactコンポーネント内で状態(state)を管理するためのもの」ですが、使う場所やスタイルが違います。
わかりやすく整理して説明します。
this.state とは?
クラスコンポーネント(class XXX extends React.Component)の中で使う state。
書き方例:

state は
更新は
thisを明示的に使う → thisの扱いがやや面倒になることがある
this.state に入れる更新は
this.setState() を使うthisを明示的に使う → thisの扱いがやや面倒になることがある
useState とは?
関数コンポーネント(const MyComponent = () => {})の中で使う state。
React Hooks(useStateはHooksの1つ) を使ったモダンなスタイル。
書き方例:

state は
更新は
関数コンポーネントは今の React では 主流
useState() を使って宣言する更新は
setCount など 専用の関数 を使うthis が不要 → コードがシンプルになる関数コンポーネントは今の React では 主流
違いまとめ表
| 比較項目 | this.state(クラス) | useState(関数) |
|---|---|---|
| コンポーネントの種類 | クラスコンポーネント | 関数コンポーネント |
| state の定義場所 | constructor 内の this.state | useState フックの中 |
| state の更新方法 | this.setState() | setXxx() 関数 |
this の扱い |
必要(やや面倒) | 不要(シンプル) |
| 現在の主流 | 古め(古いプロジェクトでよく見る) | モダンなReactでは主流 |
| Hooksが使えるか | ❌(Hooksは関数コンポーネント専用) | ✅ |
どちらを使うべき?
✅ 今からReactを書くなら 99% → useState(関数コンポーネント) を使うべき!
✅ クラスコンポーネントは 昔のプロジェクトや既存コードで出てくる → 読めるように知っておくのは大事
👉 React公式も 関数コンポーネント + Hooks を推奨している。
一言でまとめると:
昔はクラスコンポーネント(this.state)だったけど、今は関数コンポーネント(useState)+ Hooksが主流!
→ this を使わなくてよくなる → コードがすごくスッキリ


コメント