React 19 ve Ötesi: Signals vs Hooks Çatışması

State Yönetiminin Tarihi

Frontend geliştirmede state yönetimi her zaman en tartışmalı konulardan biri olmuştur. jQuery'nin DOM manipülasyonundan React'in useState hook'una, oradan Redux'ın global state yönetimine kadar uzun bir evrim geçirdik.

2026'da ise yeni bir oyuncu sahneye çıktı: Signals. Ve bu, React ekosisteminde ciddi bir tartışma başlattı.

Hooks: React'in Temel Taşı

React 16.8 ile gelen Hooks, class component'lerin karmaşıklığını ortadan kaldırdı:

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Hooks'un Sorunları

1. Stale Closures: Eski değerlere referans problemi
2. useEffect Karmaşıklığı: Dependency array hataları
3. Gereksiz Re-render: State değiştiğinde tüm component ağacı yeniden render olur
4. Rules of Hooks: Koşullu kullanım yasağı

Signals: Yeni Paradigma

Signals, fine-grained reactivity (ince taneli reaktivite) prensibi üzerine kurulu. Bir signal değiştiğinde, sadece o signal'i kullanan DOM node'u güncellenir — tüm component yeniden render olmaz.

// Preact Signals
import { signal, computed, effect } from "@preact/signals";

const count = signal(0);
const doubled = computed(() => count.value * 2);

effect(() => {
  console.log(`Count: ${count.value}, Doubled: ${doubled.value}`);
});

count.value++; // Sadece bağımlı kısımlar güncellenir

Signals'ın Avantajları

Framework'ler ve Signals

SolidJS

Signals konseptini en agresif şekilde benimseyen framework:

function Counter() {
  const [count, setCount] = createSignal(0);
  return <button onClick={() => setCount(c => c + 1)}>{count()}</button>;
}
// Component fonksiyonu sadece BİR KERE çalışır!

Vue 3 (Composition API)

Vue, ref() ve reactive() ile signals benzeri bir sistem kullanır:

const count = ref(0);
const doubled = computed(() => count.value * 2);
// Otomatik dependency tracking

Angular (v17+ Signals)

Angular da kendi Signals implementasyonunu ekledi:

const count = signal(0);
const doubled = computed(() => count() * 2);

React'in Cevabı: React Compiler

React ekibi, Signals'a doğrudan geçmek yerine React Compiler (eski adıyla React Forget) ile farklı bir çözüm sundu: Otomatik memoization.

// React Compiler öncesi (manuel optimizasyon)
const MemoChild = React.memo(({ data }) => <div>{data}</div>);

// React Compiler sonrası (otomatik)
function Child({ data }) {
  return <div>{data}</div>;
}
// Compiler otomatik olarak memoize eder

Hangi Yaklaşımı Seçmeli?

• Yeni proje, maksimum performans: SolidJS veya Svelte 5 (Signals)
• Büyük ekosistem, geniş topluluk: React + React Compiler
• Dengeli yaklaşım, kolay öğrenme: Vue 3 Composition API
• Kurumsal proje, TypeScript-first: Angular Signals

Sonuç

Signals vs Hooks tartışması, aslında reactive programming paradigmasının evriminin bir yansıması. Her iki yaklaşımın da güçlü yanları var. Önemli olan, projenizin ihtiyaçlarına en uygun aracı seçmek ve hangi paradigmayı kullanırsanız kullanın, temiz, okunabilir ve sürdürülebilir kod yazmaya devam etmektir.