What is the difference between local and global state?

Question

Accepted Answer

**Local state** belongs to a single component (or a small subtree) and isn't needed elsewhere. **Global state** is shared across many, often distant, components throughout the app.

## Local state — scoped to one component

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

Local state lives inside the component (`useState`, `ref`, `data()`). Examples: input values, whether a dropdown is open, a hover state, a form's draft. No other component cares about it.

## Global state — shared app-wide

```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
```

Global state is data many unrelated components must read or update consistently: the authenticated user, theme, shopping cart, app-wide notifications. It lives in a Context, a store (Redux/Zustand/Pinia), or similar.

## How to decide

```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
```

## A common mistake: over-globalizing

```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("");
```

Making everything global adds boilerplate, couples components, and can hurt performance (more re-renders). The best practice is **keep state as local as possible**, and only lift it to global when sharing genuinely requires it.

## Why it matters

Choosing local vs global is one of the most consequential state decisions.

Keeping state local keeps components simple, self-contained, and performant; reaching for global state only when data is truly shared avoids needless complexity.

The frequent anti-pattern — putting everything in a global store "just in case" — leads to bloated, tightly-coupled apps.

The guiding rule: **localize by default, globalize only when sharing demands it.**