React'te bir state management yaklaşımını nasıl seçersiniz?

Question

Accepted Answer

Aracı **durum** türüne göre eşleştirin, varsayılan olarak global bir depoya ulaşmak yerine. Çoğu "global state" sorunu aslında iş için yanlış araçtır.

## Neden önemli

```text
Local UI state (toggle, input)      → useState / useReducer
Shared, low-frequency (theme, user) → Context
Server/API data                     → React Query / SWR  (NOT a global store)
Complex global client state         → Zustand / Jotai / Redux Toolkit
URL-shareable state (filters, page) → the URL (search params)
```

## En önemli içgörü: server state ≠ client state

Bir API'den gelen veriler, sahip olduğunuz durum değil, uzak verilerin bir **önbelleğidir**. Bunu Redux'a koymak, yüklemeyi, önbelleğe almayı, yeniden getirmeyi ve geçersiz kılmayı manuel olarak işlemek anlamına gelir — acılı ve hatalara açık. Bir server-state kitaplığı hepsi yapar:

```jsx
// handles caching, dedup, background refetch, stale-while-revalidate for free
const { data, isLoading } = useQuery({ queryKey: ["todos"], queryFn: getTodos });
```

## Yönergeler

- Durumu mümkün olduğunca **yerel** tutun; kullanıldığı yere yakın konumlandırın.
- Hızla değişen değerleri **Context** içine koymayın (tüm tüketicileri yeniden işler).
- Sık güncellemelerle paylaşılan client durumu için, **seçici abonelikler** (Zustand/Jotai) içeren bir depoyu tercih edin, böylece bileşenler yalnızca okudukları dilim için yeniden işlensin.
- Redux Toolkit'e ulaşın, gerçekten karmaşık paylaşılan durum üzerinde devtools/middleware/yapısına ihtiyacınız olduğunda.

Gerçek beceri, **durumu en aza indirmek ve doğru yerleştirmektir** — kütüphane seçmek değil.