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 を使わなくてよくなる → コードがすごくスッキリ
コメント