状態管理 とは？

普通の変数だと値が変わってもUIが更新されない。Reactの useState は値が変わったことを検知してコンポーネントを再描画してくれる。状態管理の仕組みを使うから「データが変わる→画面も変わる」が自動で実現できる。

アプリ全体で共有する状態のこと。ログインユーザー情報やテーマ設定など、どのページでも使うデータ。コンポーネント間でpropsをバケツリレーするのが大変なとき、ReduxやContext APIで一箇所にまとめて管理する。

小規模ならReactのuseStateとContext APIで十分。中〜大規模になったらZustandが手軽でおすすめ。Reduxは大規模向けで学習コストが高い。まずは useStateをしっかり使いこなすことから始めよう。

最近はそれが主流だよ。サーバー状態（APIから取得するデータ）はTanStack Query（旧React Query）やSWRで管理して、クライアント状態（UIの開閉状態、フォーム入力など）はuseStateやZustandで管理する。2つを混ぜるとキャッシュの管理が複雑になるから、分離するのがベストプラクティスなんだ。

よくあるのは「画面に古いデータが表示される」「入力した内容が勝手にリセットされる」「同じAPIを何度も呼んでしまう」というバグだね。特にグローバル状態に何でも入れすぎると、あるページの操作が別のページに予期しない影響を与える「スパゲッティ状態」になる。状態は必要最小限にして、できるだけローカルに保つのが鉄則だよ。