React Hooks ile Modern Bileşen Kompozisyonu ve Tasarım Desenleri: Daha Temiz ve Ölçeklenebilir Uygulamalar

React, bileşen tabanlı mimarisiyle web uygulaması geliştirmede devrim yarattı. Ancak, sınıf tabanlı bileşenlerin getirdiği bazı karmaşıklıklar (this bağlama sorunları, yaşam döngüsü metotlarının dağılması gibi) her zaman geliştiricilerin önüne küçük engeller çıkardı. Ta ki React Hooks hayatımıza girene kadar! Hooks, fonksiyonel bileşenlerin durum (state) ve yaşam döngüsü gibi React özelliklerine erişmesini sağlayarak, kod yazma şeklimizi temelden değiştirdi. Benim geliştirme tecrübelerimde, Hooks'un sadece kodu kısaltmakla kalmayıp, aynı zamanda daha okunabilir, bakımı kolay ve hatta belirli tasarım desenlerini doğal bir şekilde uygulamamıza olanak tanıdığını defalarca gördüm. Bu yazıda, React Hooks'un modern bileşen kompozisyonunu ve popüler tasarım desenlerini nasıl güçlendirdiğini, daha temiz ve ölçeklenebilir uygulamalar inşa etmenize nasıl yardımcı olduğunu derinlemesine inceleyeceğiz.

React Gelişiminde Hooks'un Yeri ve Kompozisyonun Önemi

React'in temel felsefesi, uygulamanın küçük, bağımsız ve tekrar kullanılabilir bileşenlere ayrılması üzerine kuruludur. Bu, bileşen kompozisyonu prensibini merkeze alır. Hooks, bu prensibi bir adım daha ileri taşıyarak, durum mantığını bileşenler arasında daha kolay paylaşılabilir hale getirdi ve daha önce Render Props veya Yüksek Dereceli Bileşenler (HOC'ler) gibi desenlerle çözülen birçok sorunu doğrudan fonksiyonel bileşenler içinde ele almamızı sağladı. Daha önce React'te Kompozisyon Desenleri yazımda bahsettiğim gibi, esnek arayüzler inşa etmek için kompozisyon hayati öneme sahiptir. Hooks ise bu esnekliği yeni bir boyuta taşıyor.

Custom Hooks: Tekrar Kullanılabilir Mantığın Kalbi

Hooks'un en güçlü yanlarından biri, bileşenler arası mantık paylaşımını kolaylaştıran Custom Hooks'lardır. Aynı durum mantığını (örneğin, form yönetimi, API istekleri veya pencere boyutu izleme) birden fazla bileşende kullanmanız gerektiğinde, bu mantığı bir Custom Hook içine sararak kod tekrarını önler ve bakım kolaylığı sağlarsınız. Eğer Custom Hooks'a daha derinlemesine bakmak isterseniz, Derinlemesine React Hooks: Custom Hooks ile Daha Temiz ve Verimli Kod Yazın yazımı inceleyebilirsiniz. Custom Hooks, aslında bir nevi 'davranış' desenlerini React dünyasına taşır.

Hooks ile Modern Bileşen Kompozisyon Desenleri

Şimdi, Hooks'un yardımıyla popüler tasarım ve kompozisyon desenlerini nasıl daha zarif bir şekilde uygulayabileceğimize bakalım.

1. Provider Deseni ve Context API ile Durum Paylaşımı

Uygulamanızın derinliklerindeki bileşenlere veri veya işlevsellik aktarmanız gerektiğinde, geleneksel prop drilling (props'ları alt bileşenlere manuel olarak aktarma) karmaşıklığa yol açabilir. Context API ve useContext Hook'u, bu sorunu çözen doğal bir Provider deseni uygulaması sunar.

Bir Context oluşturup, bir Provider ile değeri sağlayarak, alt bileşenlerinizde useContext ile bu değere kolayca erişebilirsiniz. Bu yaklaşım, global veya yarı-global durum yönetimi için oldukça etkilidir. Örneğin, bir tema veya kullanıcı bilgisi yönetimi için:

// ThemeContext.js
import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext(null);

export const useTheme = () => useContext(ThemeContext);

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// App.js
import { ThemeProvider } from './ThemeContext';
import MyComponent from './MyComponent';

function App() {
  return (
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  );
}

// MyComponent.js
import { useTheme } from './ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();
  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#333' : '#fff' }}>
      <p>Aktif Tema: {theme}</p>
      <button onClick={toggleTheme}>Temayı Değiştir</button>
    </div>
  );
}

Bu yapı, React Context API'nin Gücü yazısında ele aldığımız konuları Hooks ile nasıl daha şık bir şekilde uygulayabileceğimizi gösteriyor.

2. Compound Components: Esnek ve İlişkili Arayüzler

Compound Components deseni, birden fazla bileşenin bir arada çalışarak tek bir kullanıcı arayüzü kontrolü oluşturduğu durumlarda kullanılır (örneğin, <Select><Select.Option>...</Select.Option></Select>). Hooks, bu bileşenlerin iç durumlarını ve davranışlarını gizli bir şekilde paylaşmasını, ancak yine de esnek bir API sunmasını sağlar.

Yine useContext kullanarak, ana bileşen (örneğin Select) bir Context oluşturur ve alt bileşenler (örneğin Select.Option) bu Context'e erişerek ana bileşenin durumuna (seçili öğe gibi) katılımcı olabilir.

// SelectContext.js
import React, { createContext, useContext, useState } from 'react';

const SelectContext = createContext(null);

export const Select = ({ children, onSelect }) => {
  const [selected, setSelected] = useState(null);

  const handleSelect = (value) => {
    setSelected(value);
    if (onSelect) onSelect(value);
  };

  return (
    <SelectContext.Provider value={{ selected, handleSelect }}>
      <div className="select-container">
        {children}
      </div>
    </SelectContext.Provider>
  );
};

export const Option = ({ value, children }) => {
  const { selected, handleSelect } = useContext(SelectContext);
  const isSelected = selected === value;

  return (
    <div
      onClick={() => handleSelect(value)}
      style={{ cursor: 'pointer', padding: '8px', background: isSelected ? 'lightblue' : 'white' }}
    >
      {children}
    </div>
  );
};

// App.js
import { Select, Option } from './SelectContext';

function App() {
  return (
    <div>
      <h3>Favori Meyve Seçin</h3>
      <Select onSelect={(val) => console.log('Seçilen:', val)}>
        <Option value="apple">Elma</Option>
        <Option value="banana">Muz</Option>
        <Option value="orange">Portakal</Option>
      </Select>
    </div>
  );
}

3. Hooklar ile Container/Presenter Ayırımı

Geleneksel olarak, bir bileşenin iş mantığını (veri çekme, durum yönetimi) arayüz sunumundan (UI rendering) ayırmak için Container/Presenter (veya Smart/Dumb) deseni kullanılırdı. Hooks, bu ayrımı Custom Hooks aracılığıyla daha zarif bir şekilde yapmamızı sağlar. Artık ayrı bir

Orijinal yazı: https://ismailyagci.com/articles/react-hooks-ile-modern-bilesen-kompozisyonu-ve-tasarim-desenleri-daha-temiz-ve-olceklenebilir-uygulamalar