Her bir durum parçasının nerede yaşaması gerektiğine nasıl karar verirsiniz?

Question

IT Interview Practice · Accepted Answer

**Durumun nerede yaşadığına** karar vermek, en önemli mimari becerilerden biridir. Rehber ilke: her durum parçasını, bunu gerektiren herkesi hala karşılayan **dar kapsamda** yerleştirin — ve her *tür* durumunu uygun araçla eşleştirin.

## Bir karar çerçevesi

```text
1. Who needs this state?
   - One component                  → local state (useState)
   - A few related components        → lift to common parent / small context
   - Many distant components         → global store or context

2. What KIND of state is it?
   - Server/remote data              → server-state library (React Query/SWR)
   - UI/client state                 → useState / Zustand / Redux
   - URL-derivable (filters, page)    → the URL (searchParams)
   - Form input                       → form library or local state

3. How OFTEN does it change?
   - Rarely, widely shared (theme)    → Context is fine
   - Frequently, widely shared        → store with selective subscriptions
```

## Kategoriler ve onların evleri

```text
State type     Lives in                       Examples
─────────────────────────────────────────────────────────────────
Local UI       component (useState)           input text, isOpen, hover
Shared UI      lifted parent / Context / store modal state, selected item
Server data    React Query / SWR / RTK Query  users, products (cached remote)
URL state      router / searchParams          filters, page, search query, tab
Form state     React Hook Form / local         field values, validation
Global app     Zustand / Redux / Context      auth user, theme, cart
```

## Çerçevenin önlediği yaygın hatalar

```text
❌ Server data in Redux       → use React Query (it's a cache, not UI state)
❌ Everything global "just in case" → over-coupling, extra re-renders; keep local
❌ Filters/page in state       → put in the URL (shareable, bookmarkable, back-button)
❌ Duplicating derivable values → derive instead (single source of truth)
❌ Form state in a global store → usually overkill; keep local or use a form lib
```

## URL az kullanılan bir durumdur

```text
Filters, pagination, search, active tab → belong in the URL.
Benefits: shareable links, browser back/forward works, survives refresh, SEO.
```

## Neden önemli

Durumun nerede yaşadığı, bir uygulamanın basitliğini, performansını ve bakım yapılabilirliğini belirler.

Beceri, her şeyi global yapmaya yönelik dürtüye direnç göstermek ve bunun yerine **varsayılan olarak yerelleştirmek, her tür durumu doğru aracıyla eşleştirmek** (sunucu verileri → React Query, URL-türetilmesi mümkün → URL, UI → yerel/store).

Bunu doğru yapmak, en yaygın mimari sorunları önler — Redux'a sıkıştırılmış sunucu verileri, yeniden renderlamaya neden olan aşırı globalleştirilmiş durumlar ve URL yerine bileşen durumunda filtreler.

Bu yargı, temiz, ölçeklenebilir bir durum mimarisini karışık bir mimariden ayıran şeydir.

Bir karar çerçevesi

Kategoriler ve onların evleri

Çerçevenin önlediği yaygın hatalar

URL az kullanılan bir durumdur

Neden önemli

İlgili sorular