Props vs Context vs State: Doğru Aracı Seçmek

Props vs Context vs State: Doğru Aracı Seçmek

React'te state yönetimi konusu çoğu zaman basit gibi görünür. Bir veri vardır, bir yere koyarsın ve kullanırsın. Ama proje büyüdükçe bu kararlar kritik hale gelir. Çünkü state'i nereye koyduğun, nasıl paylaştığın ve nasıl güncellediğin doğrudan mimariyi etkiler.

Genelde üç temel aracımız var: props, local state ve context. Her biri doğru yerde kullanıldığında işleri çok basitleştirir. Yanlış yerde kullanıldığında ise karmaşıklık üretir.

Local State: Başlangıç Noktası

React'te en doğal başlangıç noktası local state’tir. Bir component kendi içinde kullandığı veriyi useState ile yönetir.

function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Bu yaklaşım basit, okunabilir ve izole bir yapı sağlar. Eğer veri sadece o component’i ilgilendiriyorsa, en doğru yer local state’tir.

Sorun, bu state başka component’ler tarafından da kullanılmak istendiğinde başlar.

Props: Veri Taşımanın En Basit Yolu

Bir state’i child component’lara geçirmek istediğinde props kullanırsın. Bu React’in en temel veri akış modelidir.

function Parent() {
  const [count, setCount] = useState(0)
  return <Child count={count} />
}

Props kullanımı explicit (açık) olduğu için okunması ve takibi kolaydır. Veri nereden geliyor, nereye gidiyor çok nettir.

Ama component ağacı derinleştiğinde şu problem ortaya çıkar:
Prop drilling.

<App>
  <Layout>
    <Sidebar>
      <UserProfile user={user} />
    </Sidebar>
  </Layout>
</App>

user verisi sadece UserProfile içinde kullanılıyor olabilir. Ama yukarıdan aşağıya kadar taşımak zorunda kalırsın. Bu da gereksiz bağımlılık ve karmaşıklık yaratır.

Context: Paylaşım Var, Ama Bedelsiz Değil

Context API genelde prop drilling’i çözmek için kullanılır. Ortak veriyi component ağacının herhangi bir yerinden erişilebilir hale getirir.

const UserContext = createContext()

function App() {
  return (
    <UserContext.Provider value={user}>
      <UserProfile />
    </UserContext.Provider>
  )
}

Bu kullanım ilk bakışta çok temiz görünür.
Ama Context’in de bir maliyeti vardır.

Context değiştiğinde, o context’i kullanan tüm component’ler re-render olur. Bu da özellikle büyük uygulamalarda performans sorunlarına yol açabilir.

Ayrıca Context fazla kullanıldığında şu problem ortaya çıkar:
State'in nerede olduğu belirsizleşir.

Bu da debug etmeyi zorlaştırır.

En Büyük Hata: Her Şeyi Global Yapmak

React'te en sık yapılan hatalardan biri, state’i gereğinden fazla global yapmaktır.

"İleride lazım olur" diye Context’e koyulan veriler, zamanla kontrol edilemez hale gelir.

Bu yaklaşım kısa vadede kolaylık sağlar ama uzun vadede karmaşıklık üretir.

Peki Doğru Seçim Nasıl Yapılır?

Basit bir düşünce modeli iş görür:

Eğer veri sadece bir component’i ilgilendiriyorsa → Local State
Eğer birkaç component arasında geçiyorsa → Props
Eğer birçok farklı noktadan erişilmesi gerekiyorsa → Context

Ama en kritik nokta şu:
Her zaman en basit çözümle başla.

İhtiyaç oluşmadan Context’e geçme.

Gerçek Hayattan Bir Senaryo

Bir e-ticaret uygulaması düşün:

• Ürün sayfasındaki quantity → Local state

• Sepet bilgisi → Context veya global state

• Ürün detayları → Props ile taşınabilir

Burada her şeyi Context’e koymak yerine, kullanım alanına göre parçalamak daha sağlıklı bir mimari oluşturur.

Sonuç

React’te state yönetimi bir teknik detay değil, mimari bir karardır.

Props, Context ve Local State birbirinin alternatifi değil, tamamlayıcısıdır.

Yanlış araç seçimi küçük projelerde fark edilmez.
Ama proje büyüdükçe ciddi problemlere dönüşür.

İyi React geliştiricileri her problemi aynı araçla çözmez.
Probleme göre doğru aracı seçer.

Çünkü iyi mimari, doğru araç seçimiyle başlar.