Composition over Inheritance

Başka bir dilde nesne yönelimli programlama yaptıysanız, ortak davranışı kalıtımla paylaşmaya alışkın olabilirsiniz. Bu rehber React için tek bir soruyu cevaplıyor: ortak kodu nasıl paylaşırsınız? Cevap: kalıtımla değil, composition ile.

Kalıtım değil composition

Kalıtım, bir sınıfın başka bir sınıftan türeyip onun davranışını devralmasıdır. Composition ise bir component'in başka component'leri kullanarak kendini kurmasıdır.

React ekibinin resmi tutumu net: kod paylaşmak için composition önerilir. Dokümana göre Facebook'ta binlerce component'te React kullanıldı ve component kalıtım hiyerarşisi gerektiren bir durum bulunmadı. Props ve composition, bir component'in görünüşünü ve davranışını açık ve güvenli biçimde özelleştirmek için yeterli esnekliği veriyor.¹

// ❌ Kalıtımla özelleştirme
class DangerButton extends Button {}

// ✅ Composition: Button'ı kullanan yeni bir component
function DangerButton(props: ButtonProps) {
  return <Button {...props} variant="danger" />
}

İki kalıp: containment ve specialization

Dokümanda composition iki kalıpla anlatılıyor.¹

function Dialog({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section role="dialog" aria-label={title}>
      {children}
    </section>
  )
}

// Specialization: Dialog'un özel hâli
function ConfirmDeleteDialog() {
  return (
    <Dialog title="Silinsin mi?">
      <p>Bu işlem geri alınamaz.</p>
    </Dialog>
  )
}

children ve adlı slot'ların ayrıntısı Props ve Composition rehberinde. Büyük ölçekli kalıp olan compound component ise Component ve Kod Organizasyonu rehberinde. İkisini burada tekrar etmiyoruz.

Mantığı paylaşmak: mixin, HOC, hook

Composition yalnızca görünüş için değil, mantık paylaşmak için de gerekli. React'te bu iş zaman içinde üç yöntemle yapıldı.

Mixin. Ortak davranışı component'e dışarıdan karıştıran bir yapıydı. React ekibi mixin'leri sorunlu buldu: component ile mixin birbirinin metotlarına örtük olarak bağlanıyor, iki mixin aynı metot adını kullanınca birlikte çalışamıyor ve zamanla karmaşıklık büyüyor.²

Higher-order component (HOC). Bir component alıp yeni bir component döndüren fonksiyon. Orijinali değiştirmek yerine bir kapsayıcıyla sarmalıyor.³ Dokümana göre HOC'ler render içinde uygulanmamalı, çünkü her render'da yeni bir component türü oluşup alt ağacın state'i kaybediliyor.³ Aynı sayfa HOC'lerin modern React kodunda yaygın kullanılmadığını da belirtiyor.³

Custom hook. HOC ve render props ile mantık paylaşırken component ağacını yeniden düzenlemek gerekiyor ve bu DevTools'ta iç içe sarmalayıcılara ("wrapper hell") yol açıyor. Hook'lar mantığı hiyerarşiyi değiştirmeden paylaşmaya izin veriyor.⁴

import { useSyncExternalStore } from 'react'

function subscribe(callback: () => void) {
  window.addEventListener('online', callback)
  window.addEventListener('offline', callback)
  return () => {
    window.removeEventListener('online', callback)
    window.removeEventListener('offline', callback)
  }
}

export function useOnlineStatus() {
  return useSyncExternalStore(
    subscribe,
    () => navigator.onLine, // istemcideki değer
    () => true, // sunucudaki değer
  )
}

StatusBar ve SaveButton gibi iki component aynı useOnlineStatus() çağrısını yapar ve tarayıcı olayını izleme ayrıntısını bilmez.⁵ Hook mantığı paylaşır, state'i değil: her çağıran kendi state'ini alır.⁵ İsmin use ile başlaması da bir kural: çağıran yerden state ya da Effect saklı olabileceğini görürsünüz.⁵

Ne zaman gerekmez?