React'te Fonksiyonel Bileşenler — Modern Geliştirme Standardı

Functional Component Nedir?

Functional Component, bir props nesnesini alan ve bir React öğesi döndüren bir işlev olarak tanımlanan React bileşenidir. React 16.8'den önce, bu bileşenler durumsuz olarak adlandırılırdı çünkü iç durumu yönetemiyorlardı.

React 16.8'de (Şubat 2019) hook'ların tanıtılmasıyla, fonksiyonel bileşenler duruma (useState), yan etkilere (useEffect), bağlama (useContext) ve referanslara (useRef) erişim kazandı. ‘Durumsuz’ terimi güncelliğini yitirdi — modern fonksiyonel bileşenler durumu tamamen yönetir.

React resmi olarak fonksiyonel bileşenleri bileşen oluşturmanın birincil yolu olarak önerir. react.dev'deki tüm dokümantasyon, örnekler, eğitimler ve yeni API'ler (Server Components, Actions) işlevsel yaklaşım üzerine inşa edilmiştir. Sınıf bileşenleri kaldırılmamıştır, ancak React'in yeni özellikleri yalnızca hook'lar aracılığıyla kullanılabilir.

Fonksiyonel Bileşen Oluşturma

En basit fonksiyonel bileşen, JSX döndüren bir işlevdir. Props'u argüman olarak alır, kurucu, super çağrısı veya this bağlaması gerektirmez. Props, işlev argümanı aracılığıyla doğrudan erişilebilirdir — this.props gerekmez.

// Functional component without state
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Arrow function (common variant)
const Greeting = ({ name }) => (
  <h1>Hello, {name}!</h1>
);

Durumlu Bileşen

Durum eklemek için useState'i kullanın. Hook, iki değerden oluşan bir demet döndürür: geçerli durum ve bir ayarlayıcı işlev. Sınıf tabanlı this.setState'ten farklı olarak useState, değeri öncekiyle birleştirmek yerine tamamen değiştirir.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Fonksiyonel Bileşenlerde Hook'lar

Hook'lar modern React'in temelidir. Her hook belirli bir görevi çözer: useState — durum, useEffect — yan etkiler, useContext — bağlam erişimi, useRef — DOM öğesi referansları, useCallback ve useMemo — bellekte tutma.

Yan Etkiler için useEffect

useEffect, componentDidMount, componentDidUpdate ve componentWillUnmount'ı aynı anda değiştirir. İlk argüman, etkiye sahip geri çağırmadır, ikincisi bağımlılık dizisidir. Dizi boşsa, etki bağlamadan sonra bir kez çalışırır. Bağımlılıklar belirtilmişse, bunlardan herhangi biri değiştiğinde çalışırır.

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

function UserData({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let cancelled = false;

    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        if (!cancelled) setUser(data);
      });

    // Cleanup - analog of componentWillUnmount
    return () => { cancelled = true; };
  }, [userId]); // Dependency

  return <div>{user?.name}</div>;
}

Özel Hook'lar

Fonksiyonel bileşenlerin ana avantajı, özel hook'lar aracılığıyla mantık yeniden kullanımıdır. Sınıf bileşeninde mantık, componentDidMount ve componentDidUpdate arasında çoğaltılırken, fonksiyonel bileşende use ön eki olan ayrı bir işleve çıkarılır. Özel hook'lar, HOC ve render props'a birincil alternatiftir.

Kalıtım Yerine Bileşim

React, bileşenler arasında kod yeniden kullanımı için kalıtım yerine bileşimi önerir. Fonksiyonel bileşenler bileşim için idealdir: bir bileşen, onlara props ve children geçerek birden çok başka bileşen içerebilir.

Children deseni — bir bileşenin children prop'u aracılığıyla alt öğeler alması — doğal olarak uygulanır: function Layout({ children }). Vue slotlarının benzeri, adlandırılmış bileşen props'ları aracılığıyla uygulanır: function Page({ header, sidebar, content }).

Kalıtım React'te neredeyse hiç kullanılmaz. Teknik olarak extends'i destekleyen sınıf bileşenleri bile nadiren bir seviyeden daha derin hiyerarşiler oluşturur. Bileşim ile fonksiyonel bileşenler, kalıtım olmadan kod yeniden kullanım ihtiyaçlarını tamamen karşılar.

Performans Optimizasyonu

Fonksiyonel bileşenler, yerleşik optimizasyon mekanizmalarıyla gelir. React.memo — işlevler için PureComponent karşılığı: props değişmediyse yeniden oluşturmayı önler (yüzeysel karşılaştırma). useMemo, oluşturmalar arasında hesaplama sonuçlarını önbelleğe alır.

import React, { useMemo } from 'react';

// React.memo - memoize component
const ExpensiveList = React.memo(({ items }) => {
  return <ul>
    {items.map(item =>
      <li key={item.id}>{item.name}</li>
    )}
  </ul>;
});

// useMemo - caching result
function Dashboard({ transactions }) {
  const summary = useMemo(() => {
    return transactions.reduce((acc, t) => acc + t.amount, 0);
  }, [transactions]);

  return <p>Total: {summary}</p>;
}

useCallback, geri çağırma işlevlerini bellekte tutar, böylece her oluşturmada yeniden oluşturulmazlar. Bu, React.memo ile sarılmış alt bileşenlere işlev geçirirken kritiktir: useCallback olmadan, alt bileşen her seferinde yeniden oluşturulur çünkü işlev başvurusu değişir.

Fonksiyonel ve Sınıf Bileşenleri

Yaklaşımlar arasındaki fark sözdiziminin ötesine geçer. Fonksiyonel bileşenler kapanışlardır: durum ve etkiler belirli bir oluşturmaya bağlıdır. Sınıf bileşenleri this'i kullanır: durum her zaman this.state'den alınır ve bu, zaman uyumsuz bir geri çağırma yürütüldüğünde güncelliğini yitirmiş olabilir.

Fonksiyonel bileşenler doğrusal bir yürütme akışı sağlar. Bir sınıf bileşeninde, ilgili mantık genellikle birden çok yaşam döngüsü yöntemine dağılmıştır. Örneğin, bir WebSocket aboneliği componentDidMount'da kurulur ve componentWillUnmount'da kaldırılır. Fonksiyonel bir bileşende, her iki işlem de bir dönüş temizleme işleviyle tek bir useEffect içindedir.

TypeScript ve Fonksiyonel Bileşenler

TypeScript, sınıflardan daha doğal bir şekilde fonksiyonel bileşenlerle çalışırır. Props yazımı — işlev argümanı için bir arayüz. Dönüş türü JSX.Element veya ReactNode'dur. useState, başlangıç değerinden türü otomatik olarak çıkarır.

import React, { useState } from 'react';

interface ButtonProps {
  label: string;
  variant?: 'primary' | 'secondary';
  onClick: () => void;
}

const Button: React.FC<ButtonProps> =
  ({ label, variant = 'primary', onClick }) => (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {label}
    </button>
  );

Modern TypeScript, ayrılmış birleşim türleriyle useReducer yazmaya, özel hook'larda jeneriklere ve React.PropsWithChildren aracılığıyla sıkı alt öğe doğrulamasına izin verir. TypeScript ile fonksiyonel bileşenler, ek soyutlamalar olmadan tam tür güvenliği sağlar.