Props ve composition

Props Nedir

Props, ebeveynin çocuğa verdiği girdilerdir. Component fonksiyonunun tek parametresi olan bir objedir; genellikle destructuring ile açılır ve varsayılan değer orada verilir:¹

type PriceProps = {
  amount: number;
  currency?: string;
};

export function Price({ amount, currency = "TL" }: PriceProps) {
  return (
    <span>
      {amount.toLocaleString("tr-TR")} {currency}
    </span>
  );
}

<Price amount={1499} />;

Props salt okunurdur. Component kendi props'unu değiştirmez; farklı bir değer gerekiyorsa ebeveyn yeni props gönderir.¹ Props tiplerinin detayı React'te tipler dersinde.

Veri yukarıdan aşağı akar; çocuk ebeveyne bir şey söylemek istediğinde ebeveynin verdiği fonksiyonu çağırır. Bu fonksiyon prop'ları geleneksel olarak on ile başlar, ebeveyndeki karşılığı handle ile:²

<AddToCartButton onAdd={handleAdd} />

children ve Slot'lar

Bir component'in içine yazılan JSX, children prop'u olarak gelir. Böylece component, içinde ne olduğunu bilmeden bir boşluk bırakır:¹

function Card({ children }: { children: React.ReactNode }) {
  return <div className="card">{children}</div>;
}

<Card>
  <Price amount={1499} />
</Card>;

Birden fazla boşluk gerekiyorsa JSX'i adlandırılmış prop olarak geçin. Bu kalıba slot denir:

<Dialog
  title="Sepeti boşalt"
  actions={<Button onClick={clearCart}>Boşalt</Button>}
>
  Sepetteki 3 ürün silinecek.
</Dialog>

Dialog butonun ne yaptığını bilmez; yalnızca nereye konacağını bilir. Bu, showCancel, confirmText, danger gibi boolean ve string prop'larını çoğaltmaktan daha esnek bir yoldur. Kalıbın büyük ölçekli hâli (compound component) Component ve Kod Organizasyonu rehberinde.

Props'u State'e Kopyalamayın

En sık yapılan hatalardan biri, prop'u useState'in başlangıç değeri yapıp sonra onu kullanmaktır:

function EmailField({ email }: { email: string }) {
  const [value, setValue] = useState(email); // ❌ email değişince güncellenmez
  // ...
}

useState'in başlangıç değeri yalnızca component ilk kez ekrana geldiğinde okunur. Ebeveyn başka bir kullanıcı seçip yeni email gönderdiğinde value eski kalır.³ Dan Abramov buna "veri akışını durdurmak" diyor: prop'u state'e kopyaladığınızda ona gelen tüm güncellemeleri görmezden gelirsiniz.⁴

Çözüm duruma göre değişir:

key değiştiğinde React component'i baştan kurar, useState de yeni başlangıç değerini okur:³

<EmailField key={user.id} initialEmail={user.email} />

İsimdeki initial öneki okuyana "bu prop sonradan değişirse dikkate alınmaz" der.⁵

Prop Drilling ve İlk Çözüm

Bir değeri beş seviye aşağıya prop olarak taşımaya prop drilling denir. İki üç seviye sorun değildir; veri akışı açık kalır. Uzadığında ilk refleks Context olmamalı. React dokümanı Context'ten önce iki şey denemeyi önerir: önce props'la devam edin, sonra ara component'lere props yerine children geçin.⁶

// Önce: Layout, Header ve Nav'a user'ı yalnızca aşağı iletmek için alıyor
<Layout user={user} />;

// Sonra: user'ı kullanan component doğrudan yerleştiriliyor
<Layout header={<Header><UserMenu user={user} /></Header>}>
  <ProductList />
</Layout>;

Ara katmanlar artık user'ı bilmiyor. Bu yaklaşım hem kodu sadeleştirir hem de gereksiz re-render'ı azaltır; nedenini React'te render performansı dersi anlatıyor. Gerçekten derinde ve çok yerde gereken veri için Context dersine geçeceğiz.

Kendin Dene

• Price'a discount?: number prop'u ekleyin; indirim varsa eski fiyatın üstünü çizin.

• Card'a footer slot'u ekleyin ve iki farklı kullanımda farklı butonlar verin.

• İki kullanıcılık bir listeden seçim yapan bir sayfada EmailField'ı önce key'siz, sonra key={user.id} ile deneyin.

• Kendi projenizde üç seviyeden fazla aşağı inen bir prop bulun ve children ile kısaltmayı deneyin.

Detaylı Öğrenmek İçin

• Yazı: Dan Abramov'un "Writing Resilient Components" yazısı; props'u state'e kopyalamamak, her an render'a hazır olmak ve tekil olmayan component'ler.⁴

• Yazı: TkDodo'nun props'u useState'e koymanın üç çözümünü karşılaştırdığı yazı.³

• Resmi doküman: "Passing Data Deeply with Context" sayfasının "Before you use context" bölümü.⁶