📢 このシリーズについて
このシリーズは、React公式ドキュメント（ https://ja.react.dev/ ）を(できるだけ)全て読み、学んだことやコード例、自分なりの補足をまとめていくチャレンジの記録です。
目的
- Reactの基礎〜応用を公式の正しい情報で体系的に理解する
- 自分の言葉でアウトプットして知識を定着させる
このシリーズでは、ただ内容をなぞるのではなく、**「自分がReactを使っていても気づかなかった事実や落とし穴」**を重点的にまとめます。
読んだときに「へぇ、そうなんだ！」となったポイントは必ず記録します！
目次 - 本記事で取り扱う内容
- なぜローカル変数そのものでなく、stateを用いるのか
- useStateの使用方法
- stateの実際の動き
🗂 基本情報
- タイトル:state：コンポーネントのメモリ
- URL: https://ja.react.dev/learn/state-a-components-memory
- カテゴリ: Learn
- 難易度: ★
- 読了日: 2025/08/15
📌 内容
コンポーネント内で行われたユーザ操作を記憶しておくためのメモリをstateという。
言い方を変えると、stateを使用するということは、そのコンポーネントに何かを覚えさせるようReactに指示を出すということとも言える。
なぜローカル変数そのものでなく、stateを用いるのか
onClickイベントによってある変数 ”index” を変更したとしても、見ためは全く変更されない。その理由は以下の2点。
- ローカル変数はレンダー間で保持されず、再レンダリングを行う際には初期値が用いられる。
- ローカル変数を変更したタイミングで再レンダリングが発生しない。
この2点の課題を useState というHookは解決している。つまり、
- レンダー間でデータを保持できる。
- stateセッタ関数を用いて変数を変更すると、Reactが再レンダリングをトリガする。
useStateの使用方法
インポートした後、以下のように定義する。
const [index, setIndex] = useState(0);
この際の [ ] は分割代入のカッコらしい。
つまり、 useState()は常に2つの要素を持っているということだ。
1つ目の要素が変数で、2つ目の要素がセッタ関数であり、セッタ関数(); を呼び出すことで、変数を更新することができる。
stateの実際の動き
コンポーネントがレンダーされる度、useStateは上のような２つの要素をもつ配列を返す。具体的には
- 値を保持するstate変数
- state変数の更新、Reactに対しコンポーネントの再レンダーをトリガするセッタ関数
レンダリングとstateがどのように連動するかに注目すると以下のようになる。
- 初めてレンダーされるときは、 [ 初期値, セッタ関数 ] が返される。
- セッタ関数が呼ばれた際、Reactは更新されたstate変数の記憶と、再レンダーの予約を行う。
- 2回目以降レンダーされた場合、Reactは初期値ではなく記憶したstate変数含む [ 記憶された値, セッタ関数 ] を返す。
🚀 宣伝コーナー
個人開発もやっています🍃
ぜひ一度触ってみてください！
1. CAN I DO THIS
📜概要
🌟 「この問題、私に解ける？」がすぐ分かる！ 🌟
CAN I DO THIS は、問題（文章／画像）をポンっと入れるだけで、「解くのに必要な前提知識」を瞬時に可視化するツールです💡
🛡 前提知識がないまま無理に挑んで、時間と体力をムダに消耗…
そんな経験、もうしなくてOK。
必要な知識が足りているか、すぐ判断できます！
✨ 主な機能
- 問題を貼るだけ → 必要知識リスト＋学習ルート自動生成
- 前提 → 派生が一目で分かる依存関係グラフ
- 登録不要＆無料（広告視聴で利用可能）