Kütüphanesiz State Yönetimi
Redux, MobX, Zustand... Bunlara gerçekten ihtiyacınız var mı? Çoğu zaman React'in yerleşik araçları yeterlidir. State yönetim kütüphanesine ne zaman gerçekten ihtiyacınız olduğunu anlamanın yollarını inceleyelim.
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ı
Lokal state ile başla.
Sadece gerektiğinde yukarı taşı.
Context'i tasarruflu kullan.
Kütüphanelere en son başvur.
Çoğu karmaşıklık, araç eksikliğinden değil, aşırı mühendislikten kaynaklanır.
