React.js'de state yönetimi nasıl çalışır?

03 Tem 21:04

React.js'de state yönetimini anlamak için öncelikle bileşenlerin yerel state'inden başlamak gerekiyor. `useState` hook'u tamamen yerel state'ler için — bir bileşenin kendi içinde tuttuğu verilerde değişiklik yaparken kullanılır. Örneğin, bir butonun tıklanma sayısını saymak istiyorsan, `useState(0)` ile basitçe bir sayaç state'i oluşturabilirsin. Zaten `useEffect` ise state'in yanı sıra prop'lar, dış veriler veya bileşen yaşam döngüsüyle (mount, update, unmount) ilgili yan etkileri yönetiyor. Temel fark, `useState` state'in kendisini güncellerken, `useEffect` bu state veya başka bir faktör değiştiğinde tetikleniyor. Componentler arası state paylaşımında standart yöntemler arasında prop drilling (üst bileşenden alt bileşene prop olarak state göndermek), Context API (state'i tüm uygulamada paylaşmak) ve Redux (merkezi state yönetimi) var. Context API, temel düzeydeki projelere uygun çünkü basitçe bir `createContext` ve `useContext` kombinasyonuyla çalışıyor — özellikle tema değişikliği, kullanıcı oturumu gibi global durumlarda pratik. Redux ise daha karmaşık uygulamalar için ideal; state'in öngörülebilir olmasını sağlayan actions, reducers ve store yapısıyla büyük ölçekteki projelerde bakımı kolaylaştırıyor. Kendi deneyimimde, Context API'yi orta boyutlu projelerde Redux'tan daha hızlı kurup çalıştırabiliyorum, ama state karmaşıksa Redux'un avantajları devreye giriyor.