React'te Kompozisyon Desenleri: Render Props, HOC'ler ve Compound Components ile Esnek Arayüzler

Modern web uygulamaları geliştirirken, kod tekrarını azaltmak, bileşenleri daha esnek hale getirmek ve bakımını kolaylaştırmak temel hedeflerimizden biridir. React'in bileşen tabanlı yapısı, bu hedeflere ulaşmak için harika bir temel sunsa da, bazı senaryolarda sadece prop drilling veya basit bileşen hiyerarşileri yeterli gelmeyebilir. İşte bu noktada React Kompozisyon Desenleri devreye giriyor.

Benim geliştirme tecrübelerimde, özellikle büyük ve karmaşık React projelerinde, doğru kompozisyon desenlerini uygulamak, kod tabanının ne kadar ölçeklenebilir ve anlaşılır olduğunu doğrudan etkilediğini defalarca gördüm. Bu desenler, bileşenler arası mantığı ve UI'ı ayırarak, daha işlevsel, yeniden kullanılabilir ve test edilebilir bir yapı kurmamıza yardımcı olur. Bu yazıda, React ekosisteminde sıklıkla karşılaştığımız ve uygulamalarınızı güçlendirecek üç temel kompozisyon desenini derinlemesine inceleyecek, pratik örneklerle nasıl entegre edebileceğinizi göstereceğim: Render Props, Higher-Order Components (HOC'ler) ve Compound Components.

React Kompozisyon Desenleri Nedir ve Neden Kullanmalıyız?

Kompozisyon desenleri, React bileşenlerinin işlevselliğini ve görünümünü daha etkili bir şekilde birleştirmek veya ayırmak için kullanılan tekniklerdir. Bileşenlerin yeniden kullanılabilirliğini artırmanın yanı sıra, sorumlulukların daha net tanımlanmasına ve kodun daha okunaklı olmasına yardımcı olurlar. Temel amaç, bir bileşenin ne yaptığını (davranışını) ve nasıl göründüğünü (render çıktısını) birbirinden ayırarak esnekliği artırmaktır.

Neden Kompozisyon Desenleri Kullanmalıyız?

• Yeniden Kullanılabilirlik: Ortak mantığı veya davranışı birden fazla bileşen arasında kolayca paylaşmanızı sağlarlar.
• Esneklik: Bileşenlerin farklı senaryolara kolayca adapte olmasını sağlayan dinamik bir yapı sunarlar.
• Bakım Kolaylığı: Sorumlulukların ayrılması, bir bileşen üzerinde yapılan değişikliğin diğer bileşenleri beklenmedik şekilde etkileme riskini azaltır.
• Test Edilebilirlik: Mantığın UI'dan ayrılması, iş mantığını daha izole bir şekilde test etmeyi kolaylaştırır.

1. Render Props Deseni: Dinamik İçerik ve Mantık Paylaşımı

Render Props, bir bileşenin, render edilecek içeriği veya mantığı bir prop olarak (genellikle bir fonksiyon olarak) kabul ettiği bir tekniktir. Bu fonksiyon, ana bileşenin kendi iç state'ini veya mantığını dışarıya, yani kendisine prop olarak gönderilen fonksiyona geçirerek kullanıcının istediği UI'ı render etmesine olanak tanır.

Nasıl Çalışır?

Bir bileşen (örneğin DataSource), kendi içinde bir mantık barındırır ve bu mantıktan elde ettiği veriyi veya state'i, render adında bir prop olarak aldığı fonksiyona parametre olarak iletir. Bu fonksiyon da aldığı parametrelerle UI'ı oluşturur.

Kullanım Alanları:

• Mouse pozisyonu, pencere boyutu gibi global olayları dinleme.
• Veri çekme, kimlik doğrulama gibi ortak mantığı farklı UI'larda kullanma.
• Birden fazla bileşenin aynı state'i paylaşması gerektiği durumlar.

JavaScript (React) Örneği:

import React, { useState, useEffect } from 'react';

// Ortak mantığı (veri çekme) içeren bileşen
const UserDataLoader = ({ userId, render }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      setLoading(true);
      try {
        // Simüle edilmiş API isteği
        const response = await new Promise(resolve => setTimeout(() => {
          if (userId === 1) {
            resolve({ id: 1, name: 'İsmail YAĞCI', email: 'ismailyagci371@gmail.com' });
          } else {
            reject(new Error('Kullanıcı bulunamadı.'));
          }
        }, 1000));
        setUser(response);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [userId]);

  return render({ user, loading, error });
};

// Bu mantığı kullanan farklı UI bileşenleri
function UserProfile() {
  return (
    <UserDataLoader
      userId={1}
      render={({ user, loading, error }) => {
        if (loading) return <p>Kullanıcı yükleniyor...</p>;
        if (error) return <p style={{ color: 'red' }}>Hata: {error}</p>;
        if (user) {
          return (
            <div>
              <h2>Kullanıcı Profili</h2>
              <p><strong>Ad:</strong> {user.name}</p>
              <p><strong>E-posta:</strong> {user.email}</p>
            </div>
          );
        }
        return null;
      }}
    />
  );
}

function UserNameDisplay() {
  return (
    <UserDataLoader
      userId={1}
      render={({ user, loading, error }) => {
        if (loading) return <em>Yükleniyor...</em>;
        if (error) return <span style={{ color: 'orange' }}>Hata!</span>;
        return user ? <h3>Merhaba, {user.name}!</h3> : null;
      }}
    />
  );
}

Render Props'ın Avantajları ve Dezavantajları:

• Avantajlar: Yüksek esneklik, açık ve net prop geçişi, UI ve mantık ayrımı.
• Dezavantajlar: İç içe geçmiş render fonksiyonları "callback hell" benzeri bir yapıya yol açabilir, özellikle çoklu Render Props kullanıldığında okunabilirlik azalabilir. Hooks ile birlikte kullanıldığında bu dezavantajlar azalır.

2. Higher-Order Components (HOC'ler): Mantık Yeniden Kullanımı

Higher-Order Component (HOC), React bileşenleri için ileri düzey bir yeniden kullanım tekniğidir. Bir HOC, bir bileşeni girdi olarak alan ve çıktı olarak geliştirilmiş veya ek özelliklere sahip yeni bir bileşen döndüren bir fonksiyondur. Kendi kişisel tecrübelerimde HOC'leri özellikle yetkilendirme (authentication) veya veri çekme gibi ortak davranışları farklı bileşenlere eklemek için sıkça kullandım.

Nasıl Çalışır?

Bir HOC, mevcut bir bileşenin üzerine bir

Orijinal yazı: https://ismailyagci.com/articles/reactte-kompozisyon-desenleri-render-props-hocler-ve-compound-components-ile-esnek-arayuzler