TechBlog
記事一覧に戻る
ReactのuseStateを理解した
2026年2月11日
React

ReactのuseStateを理解した

Reactの状態管理で最も基本的なフックであるuseStateについて、実際のコードを書きながら学んだことをまとめました。

はじめに

インターンでReactを使った開発を始めて、最初に学んだのがuseStateでした。

シンプルだけど奥が深いこのフックについて、実際に手を動かしながら理解したことをまとめます。


useStateとは

useStateは、関数コンポーネントで状態を管理するためのReact Hooksの一つです。

基本的な使い方はこんな感じです:

test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test

つまずいたポイント

1. 状態の更新は非同期

最初、以下のようなコードを書いて混乱しました:

test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test

状態の更新は非同期的に行われるため、setCountを呼んだ直後にcount

を参照しても、まだ更新前の値が取得されます。

2. オブジェクトや配列の更新

オブジェクトや配列を状態として持つ場合、直接変更してはいけません:

test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test

スプレッド構文を使って新しいオブジェクトを作成する必要があります。


まとめ

useStateは基本的なフックですが、正しく理解することでReactの状態管理の基礎が身につきました。

次はuseEffectについて学んでいきたいと思います!