Kütüphanesiz State Yönetimi

Harici bir state yönetim kütüphanesine eliniz gitmeden önce şu soruyu sorun: "Şu an hangi problemi çözüyorum?" Modern React ekosisteminde, henüz bir darboğaza çarpmadan aşırı mühendislik (over-engineering) yapmaya meyilliyiz.

State Karmaşıklık Merdiveni

State'i bir merdiven gibi düşünün. Sadece mevcut basamak kilonuzu taşıyamadığında bir üste çıkın:

• 1. Seviye: Lokal State

  • 🐜 Kapsam: Tek bileşen.

  • 🐜 Araç: useState.

• 2. Seviye: Taşınmış (Lifted) State

  • 🐜 Kapsam: Ebeveyn ve çocuklar.

  • 🐜 Araç: Prop drilling (bu bir suç değil, netliktir).

• 3. Seviye: Context

  • 🐜 Kapsam: Uygulama geneli (Auth, Tema, Dil).

  • 🐜 Araç: useContext.

• 4. Seviye: Harici Kütüphane

  • 🐜 Kapsam: Karmaşık asenkron akışlar, ağır hesaplanmış state'ler.

  • 🐜 Araç: Zustand, Redux vb.

Çoğu Uygulama 3. Seviyede Durur

Context ve custom hook kombinasyonu, ihtiyaçların %90'ını çözer. Kütüphane gerektirmeyen temiz bir Auth örneği:

TypeScript

// Temiz, basit, kütüphanesiz.
const AuthContext = createContext<AuthState | null>(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState<User | null>(null);
  // Login/Logout mantığı burada...
  return (
    <AuthContext.Provider value={{ user, user_data }}>
      {children}
    </AuthContext.Provider>
  );
}

Ne Zaman Kütüphane Kullanmalı?

Mimarınız konusunda dürüst olun. Şu durumlarda harici araçları düşünün:

• Time-travel debugging (zaman yolculuğu hata ayıklama) şartsa.

• Yarış durumları (race conditions) içeren çok karmaşık asenkron akışlarınız varsa.

• State güncellemeleri birbirine aşırı bağımlıysa ve performans sorunları oluşuyorsa.

"Lazy Ant" Yaklaşımı

1. Lokal state ile başla.

2. Sadece gerektiğinde yukarı taşı.

3. Context'i tasarruflu kullan.

4. Kütüphanelere en son başvur.

Çoğu karmaşıklık, araç eksikliğinden değil, aşırı mühendislikten kaynaklanır.