1. Render Props

• Render props, bir bileşene prop olarak fonksiyon verilmesi mantığıdır.
• Bu fonksiyon, bileşenin ne render edeceğine karar verir.
• Örneğin List bileşeninde items dizisini alırım, her bir elemanı dışarıdan gönderilen render fonksiyonuna veririm.
• Böylece aynı List hem ürünleri hem şirketleri render edebilir. Mantık (listeleme) ile sunum (nasıl görünecek) ayrılmış olur.

<List
  items={products}
  renderItem={(product) => <ProductItem product={product} />}
/>
<Listitems={companies}
  renderItem={(company) => <CompanyItem company={company} />}
/>

2. Higher-Order Components (HOC)

• HOC, bir bileşeni parametre olarak alıp yeni bir bileşen döndüren fonksiyondur.
• Genellikle var olan bir bileşene değiştiremeyeceğimiz mantıkları eklemek için kullanılır.
• Mesela: Authentication kontrolü, logging, theme gibi cross-cutting concerns.
• Ama modern React dünyasında genelde Custom Hook tercih edilir.

3. Compound Components

• Compound Components, ana bileşenin alt bileşenleriyle birlikte çalıştığı bir kalıptır.
• Mantık: Counter tek başına değil, kendi parçalarıyla birlikte mantıklıdır.

<Counter>
  <Counter.Label>Sayaç</Counter.Label>
  <Counter.Increase />
  <Counter.Decrease />
  <Counter.Count />
</Counter>

• İçeride bir Context tanımlanır. Alt bileşenler bu context sayesinde ana bileşenin state’ine erişir.
• Bu yöntem sayesinde props zinciriyle uğraşmam. Alt bileşenleri istediğim gibi ekleyip çıkarabilirim.
• cloneElement ile çocuk bileşenlere ek props aktarabilirim.