React Hooks'ta Ustalaşmak: Ölçeklenebilir Uygulamalar İçin Gelişmiş Desenler

React Hooks, bileşen yazma şeklini devrim niteliğinde değiştirdi; sınıf temelli yaşam döngüsü yöntemlerinden daha işlevsel ve bileşenleştirilebilir bir yaklaşıma geçişi sağladı. useState ve useEffect gibi temel hooks iyi belgelenmiş olsa da, ara ve kıdemli geliştiriciler genellikle karmaşık durum mantığı oluştururken, performansı optimize ederken veya yeniden kullanılabilir UI kütüphaneleri yaratırken zorluklarla karşılaşır. Bu yazı, kod kalitenizi yükselten, sürdürülebilirliği artıran ve React ekosisteminin tam potansiyelini ortaya çıkaran gelişmiş React hooks desenlerini inceler.

Özel Hooks'un Gücü

Gelişmiş React geliştirme işinin kalbinde Özel Hook (Custom Hook) yatar. Bir özel hook, adı "use" ile başlayan ve diğer hookları çağırabilen basit bir JavaScript işlevidir. Bileşen mantığını yeniden kullanılabilir işlevlere ayırmanıza olanak tanır ve DRY (Kendini Tekrar Etme) ilkesini teşvik eder.

Çok bileşenin bir API'den veri çekmesi gereken bir senaryoyu ele alalım. Her bileşende useEffect mantığını tekrarlamak yerine, bir useFetch hook'u oluşturabilirsiniz:

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let isMounted = true;
    
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        const result = await response.json();
        if (isMounted) {
          setData(result);
          setLoading(false);
        }
      } catch (err) {
        if (isMounted) {
          setError(err);
          setLoading(false);
        }
      }
    };

    fetchData();

    return () => {
      isMounted = false;
    };
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Bu soyutlama, bileşenlerinizi temizlemenin yanı sıra hata yönetimini ve yaşam döngüsü yönetimini de merkezi hale getirir. Asenkron işlemlerde sıkça karşılaşılan bir tuzak olan, montajı kaldırılmış (unmounted) bileşenlerde durum güncellemelerini önlemek için isMounted bayrağının kullanımına dikkat edin.

Bileşik Bileşenler Deseni

Bileşik Bileşenler (Compound Components) deseni, Shadcn UI veya Radix UI gibi esnek UI kütüphaneleri oluşturmak için temel öneme sahiptir. Özellik aktarımı (prop drilling) olmadan örtük durumu paylaşan bileşenler oluşturmanıza olanak tanır. Bu genellikle React.createContext ile useContext'in kombinasyonu ile elde edilir.

Genel bir açılır-kapanır (accordion) bileşeni nasıl yapılandırabileceğinize bir bakalım:

const AccordionContext = React.createContext();

function Accordion({ children }) {
  const [isOpen, setIsOpen] = React.useState(false);
  
  return (
     setIsOpen(!isOpen) }}>
      {children}
    
  );
}

function AccordionHeader({ children }) {
  const { isOpen, toggle } = React.useContext(AccordionContext);
  return (
    

      {isOpen ? 'Gizle' : 'Göster'} {children}
    
  );
}

Accordion.Header = AccordionHeader;

Alt bileşenleri ana bileşenin özellikleri olarak dışa aktararak, iç durumun otomatik olarak yönetildiği ancak her parçanın bileşenleştirilebilir kaldığı sezgisel bir API oluşturursunuz.

Render Props vs. Fonksiyon Olarak Children

"Render Props" terimi tarihsel olarak bileşenlerle ilişkilendirilse de, modern React'te benzer esnekliği elde etmenin yolu children as functions (fonksiyon olarak children) kullanmaktır. Bu desen, iç içe geçmiş bileşenlerin karmaşıklığından kaçınır ve okunabilirliği artırır.

Örneğin, dinamik stillendirme veya veri sağlaması gereken bir bileşeniniz varsa, children olarak bir işlev iletebilirsiniz:

function DataProvider({ children }) {
  const [data, setData] = useState(initialData);
  
  return children(data);
}

Bu, tüketicilerin veriye tam olarak ihtiyaç duydukları yerde erişmesini sağlar ve ağaçtaki alakasız kısımlardaki yeniden renderları azaltır. Ancak performansa dikkat edin; işlev her seferinde yeni bir nesne döndürürse, alt bileşenlerde gereksiz yeniden renderlara neden olabilir. Bu noktada useMemo veya React.memo ile memoizasyon hayati önem taşır.

Sonuç

Gelişmiş React hooks desenlerinde ustalaşmak, sadece zeki kod yazmakla ilgili değildir; sürdürülebilir, ölçeklenebilir ve performanslı uygulamalar yazmakla ilgilidir. Özel hooks'tan yararlanarak karmaşıklığı soyutlarsınız. Bileşik bileşenler sayesinde esnek API'ler oluşturursunuz. Render props gibi desenleri anlayarak ise render davranışını tam olarak kontrol edersiniz.

React ile geliştirmeye devam ettikçe, bu desenlerle deney yapın. Mantığı basitleştirmek için özel hooks'ların nerede kullanılabileceğini görmek adına mevcut bileşenlerinizi yeniden düzenleyin. Bileşik bileşen desenini kullanarak küçük bir UI kütüphanesi oluşturmaya kendinizi zorlayın. Bu uygulamalar, sağlam frontend çözümleri mimarisi yapabilecek bir kıdemli geliştirici olarak öne çıkmanızı sağlayacaktır.