ローカルステートとグローバルステートの違いは何ですか？

Question

Accepted Answer

**ローカルステート**は単一のコンポーネント（またはは小さいサブツリー）に属し、他の場所では不要です。**グローバルステート**はアプリ全体で多くのコンポーネント（しばしば離れた場所にある）で共有されます。

## ローカルステート — 1つのコンポーネントにスコープされている

```jsx
function SearchBox() {
  const [query, setQuery] = useState(""); // only THIS component needs `query`
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}
```

ローカルステートはコンポーネント内（`useState`、`ref`、`data()`）に存在します。例：入力値、ドロップダウンが開いているかどうか、ホバーステート、フォームの下書き。他のコンポーネントはそれについて気にしません。

## グローバルステート — アプリ全体で共有

```jsx
// the logged-in user is needed by the navbar, profile page, settings, checkout...
const user = useUserStore(s => s.user); // from a global store/context
```

グローバルステートは、多くの無関係なコンポーネントが一貫して読み取りまたは更新する必要があるデータです：認証されたユーザー、テーマ、ショッピングカート、アプリ全体の通知。Context、ストア（Redux/Zustand/Pinia）、または類似のものに存在します。

## 決定方法

```text
Ask: "How many components need this, and how far apart are they?"

One component (or parent+child)         → LOCAL state
Many unrelated components / whole app    → GLOBAL state
```

## よくある間違い：過度にグローバル化する

```jsx
// ❌ putting a single form's input in global state — unnecessary complexity
globalStore.setFormInput(value);

// ✅ keep it local — only this form uses it
const [value, setValue] = useState("");
```

すべてをグローバルにするとボイラープレートが増え、コンポーネントが結合され、パフォーマンスが低下する可能性があります（再レンダリングが増加）。ベストプラクティスは**状態をできるだけローカルに保つこと**であり、共有が本当に必要な場合にのみグローバルに上げることです。

## なぜ重要なのか

ローカルとグローバルを選択することは、最も重要なステート判断の1つです。

ステートをローカルに保つことでコンポーネントはシンプルで自己完結型かつ高性能になります。データが本当に共有される場合にのみグローバルステートを使用することで、不要な複雑さを避けられます。

よくあるアンチパターン — 念のためすべてをグローバルストアに入れる — は肥大化し、密に結合されたアプリにつながります。

ガイドル：**デフォルトではローカライズし、共有が必要な場合にのみグローバル化する。**