2026'da React Compiler: Otomatik Memoizasyon ve Teknik Mülakat Soruları

React Compiler, 2026 yılında v1.0 kararlı sürümüne ulaşarak React ekosisteminde performans optimizasyonlarının yönetilme biçimini temelden değiştirmiştir. Daha önceki sürümlerde geliştiriciler, gereksiz yeniden render işlemlerini önlemek için useMemo, useCallback ve React.memo API'lerine manuel olarak başvurmak zorundaydı. React Compiler, bu süreci derleme aşamasında otomatik olarak gerçekleştirerek hem kod kalitesini hem de uygulama performansını iyileştirmektedir. React 19 ile birlikte gelen bu derleyici, bileşenlerin ve hook'ların reaktivite grafiklerini statik olarak analiz ederek yalnızca değişen değerlerin yeniden hesaplanmasını sağlamaktadır. Bu makale, React Compiler'ın çalışma prensiplerini, derleme hattını, React kurallarını, ESLint entegrasyonunu, manuel optimizasyonun hala gerekli olduğu durumları ve teknik mülakat sorularını kapsamlı şekilde ele almaktadır.

React Compiler Nedir ve Kodu Nasıl Optimize Eder

React Compiler, derleme zamanında çalışan bir Babel eklentisidir. Kaynak kodunu alır, her bileşenin ve hook'un bağımlılık grafiklerini çıkarır ve otomatik olarak memoizasyon kodu ekler. Bu işlem, geliştiricinin herhangi bir ek kod yazması gerekmeksizin gerçekleşir.

Derleyici, her ifadenin hangi değişkenlere bağımlı olduğunu analiz eder. Bir değişken değişmediyse, o değişkene bağlı hesaplamalar, JSX parçaları ve callback fonksiyonları yeniden oluşturulmaz. Bu yaklaşım, useMemo ve useCallback hook'larının manuel kullanımının yerini almaktadır.

Aşağıdaki örnekte, derleyicinin bir bileşeni nasıl dönüştürdüğünün basitleştirilmiş gösterimi yer almaktadır:

// Before compilation
function UserProfile({ user, theme }) {
  const fullName = user.firstName + ' ' + user.lastName;
  const style = { color: theme.primary, fontSize: 16 };
  return <div style={style}>{fullName}</div>;
}

// After compilation (simplified representation)
function UserProfile({ user, theme }) {
  const $ = useMemoCache(4);
  let fullName;
  if ($[0] !== user.firstName || $[1] !== user.lastName) {
    fullName = user.firstName + ' ' + user.lastName;
    $[0] = user.firstName;
    $[1] = user.lastName;
    $[2] = fullName;
  } else {
    fullName = $[2];
  }
  // style and JSX similarly memoized...
}

Derleme sonrasında useMemoCache adlı dahili bir hook, önceki render'da kullanılan değerleri saklayan bir önbellek dizisi oluşturmaktadır. Her render'da derleyicinin eklediği koşul blokları, bağımlılıkların değişip değişmediğini kontrol etmekte ve yalnızca değişiklik tespit edildiğinde yeni hesaplama yapmaktadır. Bu mekanizma, React'in kendi çalışma zamanı altyapısından yararlanmakta ve harici bir kütüphane gerektirmemektedir.

Derleme Hattı: 7 Aşamalı Sürecin Ayrıntıları

React Compiler, kaynak koddan optimize edilmiş çıktıya ulaşana kadar yedi aşamalı bir süreçten geçmektedir. Her aşamanın belirli bir sorumluluğu vardır ve bu aşamaların anlaşılması, derleyicinin hangi durumlarda başarısız olabileceğini kavramak açısından önemlidir.

1. Ayrıştırma (Parsing): Babel AST'sinden başlayarak bileşenin yapısal ağacı oluşturulur. JSX ifadeleri, değişken tanımları ve fonksiyon çağrıları bu aşamada tanımlanır.

2. Kaynak Öğe Çıkartma (Source Item Extraction): Her ifade için kaynak öğeler çıkarılır. Hangi değişkenlerin okunup hangilerinin yazıldığı belirlenir.

3. Bağımlılık Analizi (Dependency Analysis): Her ifadenin hangi değişkenlere bağımlı olduğu hesaplanır. Bu aşamada reaktivite grafikleri oluşturulur.

4. Reaktif Kapsam Belirleme (Reactive Scope Inference): Birbirine bağlı ifadeler reaktif kapsamlar altında gruplanır. Aynı bağımlılıkları paylaşan ifadeler tek bir kapsam altında birleştirilir.

5. Kapsam Doğrulama (Scope Validation): Reaktif kapsamların geçerliliği doğrulanır. Koşullu dallar, döngüler ve istisna yönetimi gibi karmaşık kontrol akışları bu aşamada ele alınır.

6. Kod Üretimi (Code Generation): Doğrulanmış kapsamlar için memoizasyon kodu üretilir. useMemoCache çağrıları ve koşul blokları bu adımda eklenir.

7. Çıktı Birleştirme (Output Assembly): Üretilen kod, orijinal bileşenin yerine yerleştirilerek son Babel çıktısı oluşturulur.

Derleyici herhangi bir aşamada güvenli optimizasyon yapamayacağına karar verirse, o bileşeni sessizce atlar ve orijinal kodu değiştirmeden bırakır. Bu tasarım kararı, derleyicinin hiçbir zaman mevcut uygulamanın davranışını bozmamasını garantilemektedir.

React Kuralları: Derleyicinin Temel Varsayımları

React Compiler, kodun belirli kurallara uyduğu varsayımıyla çalışır. Bu kurallar, React'in resmi belgelerinde "Rules of React" olarak tanımlanmıştır ve derleyicinin güvenli optimizasyon yapabilmesi için zorunludur.

Saf Render Fonksiyonları: Bileşen fonksiyonları saf olmalıdır. Aynı prop'lar ve state ile çağrıldıklarında her zaman aynı JSX çıktısını üretmelidirler. Render sırasında harici değişkenleri değiştirmek, konsola yazmak veya DOM'u doğrudan manipüle etmek bu kuralı ihlal eder.

Prop ve State Değişmezliği: Prop'lar ve state nesneleri doğrudan değiştirilmemelidir (mutasyon). React, sığ karşılaştırma (shallow comparison) ile değişiklikleri tespit eder. Bir nesne doğrudan değiştirildiğinde, referans aynı kalacağından React değişikliği algılayamaz.

Hook Çağrı Kuralları: Hook'lar yalnızca bileşen fonksiyonlarının en üst seviyesinde çağrılmalıdır. Koşullu blokların, döngülerin veya iç içe geçmiş fonksiyonların içerisinde çağrılmamalıdır.

Aşağıdaki örnekte bir kural ihlali ve doğru kullanım gösterilmektedir:

// Rule violation: mutating during render
function BadCounter({ items }) {
  // The compiler will skip this component
  items.sort(); // Mutates the prop array!
  return <ul>{items.map(i => <li key={i}>{i}</li>)}</ul>;
}

// Correct: create a new sorted array
function GoodCounter({ items }) {
  const sorted = [...items].sort();
  return <ul>{sorted.map(i => <li key={i}>{i}</li>)}</ul>;
}

BadCounter bileşeninde items.sort() çağırısı, prop olarak gelen diziyi doğrudan değiştirmektedir. Bu durum, derleyicinin o bileşeni atlamasına neden olur. GoodCounter ise spread operatörü ile yeni bir dizi oluşturarak sıralama yapmakta ve böylece kurallara uymaktadır. Derleyici bu bileşeni sorunsuz şekilde optimize edebilir.

ESLint Entegrasyonu ile Kural İhlallerinin Tespiti

React Compiler'ın sessiz atlama davranışı, kural ihlallerinin geliştirme sürecinde erken tespit edilmesini zorunlu kılmaktadır. eslint-plugin-react-hooks eklentisi, React kurallarını zorunlu kılan lint kuralları sağlamaktadır. Özellikle react-hooks/rules-of-hooks ve react-hooks/exhaustive-deps kuralları, derleyicinin varsayımlarını doğrulamak için kritiktir.

import reactHooks from 'eslint-plugin-react-hooks';
import { defineConfig } from 'eslint/config';

export default defineConfig([
  reactHooks.configs.flat.recommended,
]);

Bu yapılandırma, hook çağrısı kurallarını ve bağımlılık dizisi kontrollerini otomatik olarak etkinleştirir. Büyük kod tabanlarında CI/CD pipeline'ına entegre edilerek her PR'de kural ihlallerinin denetlenmesi önerilmektedir.

React Compiler ayrıca kendi özel ESLint eklentisi olan eslint-plugin-react-compilerı da sunmaktadır. Bu eklenti, standart hook kurallarının ötesinde, render sırasında yapılan mutasyonlar, saf olmayan hesaplamalar ve derleyicinin atlayacağı diğer kalıpları da tespit edebilmektedir. Kapsamlı koruma için her iki eklentinin birlikte kullanılması tavsiye edilmektedir.

Manuel Optimizasyonun Hala Gerekli Olduğu Durumlar

React Compiler, bileşenlerin büyük çoğunluğunda manuel memoizasyonu gereksiz kılmaktadır. Ancak belirli senaryolarda geliştiricinin bilinçli müdahalesi hala gereklidir.

Ağır Hesaplamalar: Derleyici, bir hesaplamanın ne kadar pahalıya mal olacağını bilemez. Büyük veri setleri üzerinde yapılan dönüşümler, karmaşık algoritmalar veya yoğun matematik işlemleri, useMemo ile açıkça sarmalanmalıdır.

Harici Kütüphane Entegrasyonları: Üçüncü parti kütüphaneler, React kurallarını takip etmeyen dahili mekanizmalara sahip olabilir. Bu durumlarda derleyici bileşeni atlayabilir ve manuel optimizasyon gerekebilir.

Ref Tabanlı Yan Etkiler: useRef ile yönetilen değerlerde yapılan değişiklikler, derleyicinin bağımlılık analizinin dışında kalır. Ref tabanlı optimizasyonlar manuel olarak yönetilmelidir.

// The compiler handles this automatically
function ProductCard({ product, currency }) {
  const formattedPrice = formatCurrency(product.price, currency);
  const discount = product.originalPrice - product.price;
  return (
    <div>
      <span>{formattedPrice}</span>
      {discount > 0 && <Badge>Save {discount}</Badge>}
    </div>
  );
}

// Manual optimization still needed: expensive external computation
function DataGrid({ rows }) {
  const processedRows = useMemo(
    () => rows.map(row => heavyTransform(row)), // O(n) with large n
    [rows]
  );
  return <VirtualList items={processedRows} />;
}

ProductCard bileşeni, derleyicinin tamamen otomatik olarak optimize edebileceği tipik bir örnektir. Hesaplamalar hafiftir ve bağımlılıkları açıkça bellidir. DataGrid bileşeni ise büyük veri setleri üzerinde ağır bir dönüşüm işlemi gerçekleştirmektedir. Derleyici bu hesaplamanın maliyetini ölçemeyeceğinden, useMemo ile açıkça sarmalanması performans açısından kritiktir.

React Compiler'ı Farklı Framework'lerde Etkinleştirme

React Compiler'ın projeye entegrasyonu, kullanılan build aracına göre değişmektedir. Aşağıda en yaygın iki yapılandırma örneği yer almaktadır.

Next.js ile Kullanım

Next.js, React Compiler'ı deneysel bir yapılandırma seçeneği olarak sunmaktadır. Tek bir satırlık ayar ile tüm proje genelinde etkinleştirilebilir:

const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
export default nextConfig;

Next.js, Babel eklentisini dahili olarak yüklemekte ve derleme sürecine otomatik olarak eklemektedir. Ek bir bağımlılığın kurulmasına gerek yoktur.

Vite ile Kullanım

Vite tabanlı projelerde React Compiler, Babel eklentisi aracılığıyla entegre edilmektedir. Rolldown tabanlı Babel eklentisi ile birlikte babel-plugin-react-compiler ön ayar seti kullanılmaktadır:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import babel from '@rolldown/plugin-babel';
import { reactCompilerPreset } from 'babel-plugin-react-compiler';

export default defineConfig({
  plugins: [
    react(),
    babel({ presets: [reactCompilerPreset] }),
  ],
});

Her iki yapılandırmada da React Compiler, yalnızca derleme aşamasında çalışır ve üretim paketine ek bir çalışma zamanı maliyeti eklemez. Derleyicinin ürettiği useMemoCache hook'u, React 19'un çalışma zamanında zaten mevcut olan dahili bir API'dir.

Karşılaştırma: React Compiler ve Manuel Memoizasyon

Aşağıdaki tablo, React Compiler'ın otomatik memoizasyonu ile geleneksel useMemo/useCallback kullanımı arasındaki farkları özetlemektedir:

| Özellik | React Compiler | Manuel (useMemo/useCallback) | |---------|---------------|----------------------------------| | Kurulum | Derleme yapılandırmasında tek satırlık ayar | Her bileşende manuel kod ekleme | | Kapsam | Değerler, JSX, callback'ler ve hook sonuçları | Yalnızca sarmalanan ifadeler | | Bağımlılık Yönetimi | Otomatik çıkarım | Manuel bağımlılık dizisi | | Hata Riski | Düşük (derleyici analizi) | Yüksek (eksik veya yanlış bağımlılıklar) | | Ağır Hesaplamalar | Maliyet farkındalığı yok | Geliştirici kontrolü | | Kod Temizliği | Sıfır ek satır | Sarmalama kodu gerekliliği | | Eski Bileşenlerin Desteği | Kural uyumlu ise otomatik | Retrofit gerektirir | | Hata Ayıklama | Derleme çıktısını okuma gerektirir | Doğrudan kaynak kodu | | Framework Desteği | Next.js, Vite, Webpack, Rollup | Tüm React projeleri |

Bu karşılaştırmadan görüleceği üzere, React Compiler çoğu senaryoda daha az kod, daha düşük hata riski ve daha geniş kapsam sunmaktadır. Ancak ağır hesaplamalar ve harici kütüphane entegrasyonları gibi özel durumlarda manuel yaklaşım hala geçerliliğini korumaktadır.

Teknik Mülakat Soru ve Cevapları

React Compiler konusu, 2026 yılında React teknik mülakatlarında sıklıkla karşılaşılan bir alan haline gelmiştir. Aşağıda en yaygın soru ve cevaplar yer almaktadır.

S: React Compiler ne yapar ve neden gereklidir? C: React Compiler, derleme zamanında bileşenlerin bağımlılık grafiklerini analiz ederek otomatik memoizasyon kodu ekler. Geliştiricilerin useMemo, useCallback ve React.memo ile manuel olarak yapması gereken optimizasyonları otomatize eder. Gereklidir çünkü manuel memoizasyon hata yapmaya açıktır, kod karmaşıklığını artırır ve büyük projelerde tutarsız uygulanır.

S: Derleyici hangi durumlarda bir bileşeni atlar? C: Derleyici, React kurallarını ihlal eden bileşenleri atlar. Bunlar arasında render sırasında prop veya state mutasyonu, koşullu hook çağrıları, saf olmayan hesaplamalar ve desteklenmeyen dinamik kalıplar yer alır. Atlama işlemi sessizce gerçekleşir ve uygulama çalışmaya devam eder.

S: React Compiler, useMemo ve useCallback hook'larını tamamen gereksiz kılar mı? C: Çoğu durumda evet. Derleyici, bileşenlerdeki tüm değerleri, JSX parçalarını ve callback fonksiyonlarını otomatik olarak memoize eder. Ancak derleyici hesaplamanın maliyetini ölçemez. Bu nedenle O(n) veya daha yüksek karmaşıklığa sahip ağır dönüşümler için useMemo hala önerilmektedir.

S: React Compiler çalışma zamanında performans yükü getirir mi? C: Derleyici yalnızca derleme aşamasında çalışır. Üretim paketine ek bir JavaScript kodu eklenmez. Üretilen useMemoCache çağrıları, React 19'un dahili API'sini kullanan hafif koşul kontrolleridir ve ihmal edilebilir düzeyde ek yük taşır.

S: Mevcut bir projede React Compiler nasıl etkinleştirilir? C: Next.js'de next.config.js dosyasında experimental.reactCompiler: true ayarlanır. Vite'da babel-plugin-react-compiler ön ayar seti eklenir. Etkinleştirme öncesinde eslint-plugin-react-hooks ile kod tabanındaki kural ihlallerinin tespit edilmesi ve düzeltilmesi önerilir.

S: React Compiler, class bileşenlerini destekler mi? C: Hayır. React Compiler yalnızca fonksiyon bileşenlerini ve özel hook'ları optimize eder. Class bileşenler derleyici tarafından atlanır ve değiştirilmeden bırakılır. Bu durum, mevcut class bileşenlerinin çalışmaya devam etmesini sağlar ancak optimize edilmeleri için fonksiyon bileşenlerine dönüştürülmeleri gerekir.

S: Derleyicinin ürettiği kodu nasıl doğrulayabiliriz? C: React DevTools'un güncellenmiş sürümü, derleyici tarafından optimize edilen bileşenleri "Memo" rozeti ile işaretler. Ayrıca Babel CLI ile derleme çıktısı incelenerek üretilen memoizasyon kodunun doğruluğu manuel olarak doğrulanabilir.

Sonuç

React Compiler, React ekosisteminde performans optimizasyonunun yaklaşımını köklü biçimde değiştirmiştir. Aşağıda bu makalenin temel çıkarımları özetlenmektedir:

• React Compiler, derleme zamanında otomatik memoizasyon ekleyerek useMemo, useCallback ve React.memo ihtiyacını büyük ölçüde ortadan kaldırmaktadır
• Yedi aşamalı derleme hattı, kaynak koddan reaktivite grafigi çıkarımı, kapsam belirleme ve kod üretimi aşamalarını içermekte; güvenli optimizasyon yapılamayan bileşenler sessizce atlanmaktadır
• React Kuralları, derleyicinin temel varsayımlarını oluşturmaktadır: saf render fonksiyonları, prop/state değişmezliği ve hook çağrısı kuralları ihlal edildiğinde derleyici o bileşeni atlar
• ESLint entegrasyonu, derleyicinin atlayacağı kural ihlallerini geliştirme sürecinde erken tespit etmek için kritik öneme sahiptir
• Manuel optimizasyon, ağır hesaplamalar, harici kütüphane entegrasyonları ve ref tabanlı yan etkiler için hala gereklidir
• Next.js ve Vite gibi modern build araçları, tek satırlık yapılandırma ile derleyiciyi desteklemektedir
• Teknik mülakatlarda, derleyicinin ne yaptığının yanında hangi durumlarda başarısız olacağını bilmek, aday değerlendirmesinde belirleyici bir unsurdur