Function Components ve React.FC Arasındaki Farklar TypeScript'te: Yapıcı Bir Tartışma

React bileşenlerinde TypeScript tiplerinin evrimini anlamak

TypeScript'te Function Components ve React.FC: Yapıcı Bir Tartışma

React ve TypeScript birlikte bir projeye girerler. TypeScript der ki, "Ben tipleri halledeceğim." React der ki, "Ben render'ı halledeceğim." Ve bir noktada biri sorar:

React.FC kullanmalı mıyız, yoksa fonksiyonu doğrudan mı tiplemeliyiz?

Makul bir soru. İlk bakışta, React.FC şık, resmi—hatta sofistike görünür. Sanki kodunuza bir kadeh şarap koyup "Haydi bu bileşeni şık hale getirelim" der gibi. Ama yüzeyin altında modern TypeScript'in çoğunlukla aşmaya başladığı bazı sorunlar taşır.

Detaylıca bakalım.

İki Stil

Basit Fonksiyon Bileşeni

type Props = { title: string };

function MyComponent({ title }: Props) {
  return <h1>{title}</h1>;
}

Temiz, net ve anlaşılması kolay. Siyah kahve gibi: süslemesi yok, işi hallediyor.

Ya da ok fonksiyonlarını tercih ediyorsanız:

const MyComponent = ({ title }: Props) => {
  return <h1>{title}</h1>;
};

İkisi de geçerli, okunabilir ve güncel en iyi uygulamalarla uyumludur.

React.FC Varyantı

import { FC } from 'react';

type Props = { title: string };

const MyComponent: FC<Props> = ({ title }) => {
  return <h1>{title}</h1>;
};

Bu versiyon bileşeni generic tipiyle sarar. Daha "resmi" görünür ve eğer yakın zamanda TypeScript'in yardımcı tiplerini keşfettiyseniz, gizli bir kulübün kapısını açmış gibi hissedebilirsiniz. Ama bazen gizli kulüpler ince yazılarla gelir.

React.FC Gerçekte Ne Yapar?

React.FC (React.FunctionComponent'nin kısaltması), bir fonksiyon bileşenini tanımlayan yardımcı bir tiptir. Bazı varsayılan davranışlar sunar:

  • İster isteyin ister istemeyin, otomatik olarak children prop’unu içerir.
  • Bazı editörlerde otomatik tamamlama desteğini kısmen artırabilir.
  • Fonksiyonun dönüş tipini biraz daha açık hale getirebilir, ancak pratikte bunun önemi nadirdir.

Bunlar mütevazı kolaylıklar olup, React + TypeScript’in ilk zamanlarında daha faydalıydılar. Ancak zaman değişti ve bugün bu "özellikler" çoğunlukla işe yaramaktan çok engel oluyor.

Neden Tercih Edilmeyi Bırakıyor?

React.FC'yi TypeScript’in çok cepli kargo pantolonu gibi düşünebilirsiniz—birçok cebi var, çoğu kullanılmıyor.

  1. Gizli children

Her bileşene çocuk prop’u eklenir, bileşenin isterse de isterse değil. Bu, geliştiricilerin tipte varsa çocukların geçerli olduğunu varsayması yüzünden kafa karıştırıcı hatalara yol açabilir. (Sürpriz: Aslında olmaması mümkün.)

  1. Generikler ile uyumsuzluk

Bileşeniniz generic tipler kullanmak istediğinde, React.FC işleri temizlemek yerine karmaşık hale getirir. Sözdizimi hantallaşır ve TypeScript daha az yardımcı olur.

  1. Netlik olmadan uzunluk

const MyComponent: FC<Props> yazmak, doğrudan props’ları tiplemekten daha uzun ve tartışmalı olarak daha karmaşıktır.

  1. Artık gerek yok

React.FC kullanmanın orijinal nedenleri—editör desteği, JSX çıkarımı—çoğunlukla TypeScript gelişmeleriyle çözüldü. Bir zamanlar pratik bir geçici çözümdü; şimdi ise sadece miras stil.

Yan Yana Karşılaştırma

Özellik function Component() const Component: FC
Children dahil mi? Sadece tanımlanırsa Her zaman dahil
Generikleri destekler mi? Sorunsuz Çaba olmadan değil
Uzunluk? Minimum Bariz daha uzun
Editör desteği? Yeterli Belirli durumlarda biraz daha iyi
Tavsiye edilen? Evet Artık değil

Tavsiye Edilen Yöntem

Toplulukta genel görüş basit: props’larınızı doğrudan tipleyin. Bileşeninizin children kabul etmesini istiyorsanız, açıkça belirtin. İstemiyorsanız, olmayacak. Gelecekteki siz bunun gibi dürüstlükleri takdir edecektir.

type Props = {
  title: string;
  children?: React.ReactNode;
};

const MyComponent = ({ title, children }: Props) => (
  <div>
    <h1>{title}</h1>
    {children}
  </div>
);

Açık. Bakımı kolay. Ve bileşeniniz çocukları yönetmediği halde öyleymiş gibi davranmıyor.

React.FC'nin Hâlâ Mantıklı Olduğu Durumlar Var Mı?

Nadir de olsa. Özellikle React.FC üzerine kurulmuş eski bir kod tabanında çalışıyorsanız, tutarlılığı korumak her şeyi yeniden yazmaktan daha önemli olabilir. Hızlıca bileşenler oluşturuyorsanız ve children tipini düşünmek istemiyorsanız React.FC hala pratik bir kısayol olabilir.

Ama genelde bunlar kuralı teyit eden istisnalardır.

Sonuç Olarak

React.FC yanlış değil. Sadece artık gerekli değil. Modern TypeScript, React bileşenlerini tiplemeyi onsuz daha basit ve öngörülebilir hale getirdi.

Bir sonraki sefer React.FC’ye uzanırken durup düşünün: Değer mi katıyorsunuz, yoksa sadece ekstra katman mı ekliyorsunuz? Çoğu zaman, sadece basit bir şekilde tiplenmiş fonksiyon daha iyi hizmet edecektir.

Yazılımcılıkta—hayatta olduğu gibi—netlik zekâdan daha değerlidir. Ve daha az sürpriz genellikle daha az pişmanlık demektir.

Categories