【React】this.stateとuseStateの違いを調べてみた

最新トレンド・技術研究

this.stateとuseStateの違いは?

this.stateuseState は、両方とも「Reactコンポーネント内で状態(state)を管理するためのもの」ですが、使う場所やスタイルが違います
わかりやすく整理して説明します。

 

this.state とは?

クラスコンポーネントclass XXX extends React.Component)の中で使う state。

書き方例:

 state は this.state に入れる
更新は this.setState() を使う
thisを明示的に使う → thisの扱いがやや面倒になることがある

useState とは?

関数コンポーネントconst MyComponent = () => {})の中で使う state。
React Hooks(useStateはHooksの1つ) を使ったモダンなスタイル。

書き方例:

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

 

コメント

タイトルとURLをコピーしました