React ve TypeScript ile Gelişmiş Component Kalıpları

Modern web geliştirme dünyasında React ve TypeScript ikilisi vazgeçilmez hale geldi. Bu yazımızda projelerinizi daha ölçeklenebilir ve hatasız hale getirecek gelişmiş component kalıplarını (Advanced Patterns) inceleyeceğiz.

Polymorphic Componentler

Bir butonun duruma göre <a> veya <button> olarak render edilmesini istiyorsanız, Polymorphic component yapısı tam size göre. Generics kullanarak type-safety'i bozmadan esnek yapılar kurabilirsiniz.

// (c) CodeMareFi - codemarefi.com.tr
type TextProps = {
  as?: C;
  children: React.ReactNode;
} & React.ComponentPropsWithoutRef;

export const Text = ({ as, children, ...rest }: TextProps) => {
  const Component = as || "span";
  return {children};
};

Compound Components

Özellikle Dropdown, Modal ve Tabs gibi karmaşık UI bileşenlerinde state'i parent component'te tutup child'lara Context API ile aktarmak, temiz ve okunaklı bir kod yapısı sunar.