Yerel state ile küresel state arasındaki fark nedir?

Question

Accepted Answer

**Yerel state** tek bir bileşene (veya küçük bir alt ağaca) aittir ve başka yerde gerekli değildir. **Küresel state** uygulama genelinde genellikle uzak birçok bileşen tarafından paylaşılır.

## Yerel state — tek bir bileşene kapsam

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

Yerel state bileşen içinde yaşar (`useState`, `ref`, `data()`). Örnekler: giriş değerleri, açılır menü açık mı, hover durumu, bir formun taslağı. Başka hiçbir bileşen buna umursamaz.

## Küresel state — uygulama genelinde paylaşılan

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

Küresel state, birçok ilgisiz bileşenin tutarlı bir şekilde okuması veya güncellemesi gereken verilerdir: kimliği doğrulanan kullanıcı, tema, alışveriş sepeti, uygulama çapında bildirimler. Bir Context, bir mağazada (Redux/Zustand/Pinia) veya benzerine yaşar.

## Nasıl karar verilir

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

## Yaygın bir hata: aşırı küreselleştirme

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

Her şeyi küresel yapmak kalıp kodu ekler, bileşenleri bağlar ve performansı düşürebilir (daha fazla yeniden render). En iyi uygulama **state'i mümkün olduğu kadar yerel tutmak** ve yalnızca paylaşım gerçekten gerektirdiğinde onu küresele yükseltmektir.

## ## Neden önemli

Yerel ve küresel arasında seçim yapmak en önemli state kararlarından biridir.

State'i yerel tutmak bileşenleri basit, kendi kendine yeterli ve performantlı tutarken; küresel state'e yalnızca veriler gerçekten paylaşıldığında ulaşmak gereksiz karmaşıklığı önler.

Yaygın ters desen — her şeyi "eğer diye" genel bir mağazaya koymak — şişkin, sıkı bir şekilde birleştirilmiş uygulamalar oluşturur.

Rehberlik kuralı: **varsayılan olarak yerelleştir, yalnızca paylaşım gerektirdiğinde küreselleştir.**