Kaynak (İngilizce orijinal): React Compiler v1.0 · Lauren Tan, Joe Savona, Mofei Zhang · 7 Ekim 2025
Bu yazıda ne anlatılıyor? React ekibi, bileşenlerinizi build sırasında otomatik optimize eden Compiler 1.0’ı duyurdu. Manuel useMemo ve useCallback yükünü azaltmayı hedefliyor. Bu yazı, aracın ne yaptığını, nasıl kurulacağını ve “mevcut projeme dokunmalı mıyım?” sorusuna pratik cevapları toparlıyor.
Sorun ne: gereksiz yeniden render
React’te bir state değişince bileşen yeniden çalışır (render). Çoğu zaman sorun değildir; ama ağır hesaplamalar veya büyük alt ağaçlar varsa performans düşer. Geliştiriciler bunu memoization ile çözer: “bu değer değişmediyse eski sonucu kullan” — useMemo, useCallback, React.memo.
Sorun şu: doğru yere koymak zor. Yanlış yere koyarsanız fayda yok; eksik bırakırsanız yavaş kalır. Conditional return’den sonraki dallarda manuel memoization neredeyse imkansız.
Compiler ne yapıyor?
React Compiler, build aşamasında devreye giren bir eklentidir. Kodunuzu okur, hangi değerlerin gerçekten değişebileceğini analiz eder ve gerekli yerlerde otomatik memoization ekler. Siz aynı JSX’i yazarsınız; derleyici arka planda “bu hesap tekrarlanmasın” kararlarını verir.
Meta’daki büyük uygulamalarda production’da kullanılıyor — yani deneysel oyuncak değil. Quest Store örneğinde ilk yükleme ve sayfa geçişlerinde yaklaşık %12 hızlanma, bazı etkileşimlerde 2.5 kat iyileşme raporlanmış; bellek tarafı nötr kalmış.
Compiler aynı zamanda Rules of React kurallarını kontrol eder (render sırasında state set etme, effect’leri yanlış kullanma gibi). Uyarıların çoğu eslint-plugin-react-hooks üzerinden gelir — yani IDE’nizde görmeye alışkın olduğunuz lint mesajları.
Kurulum ve uyumluluk
npm install --save-dev --save-exact babel-plugin-react-compiler@latest
React 17 ve üzeri destekleniyor. React 19 kullanmıyorsanız ek olarak react-compiler-runtime paketi ve minimum hedef sürüm ayarı gerekir — dokümantasyondaki tabloya bakın.
ESLint tarafında eslint-plugin-react-hooks paketini güncelleyip recommended preset’i açın. Eski ayrı eslint-plugin-react-compiler paketini kaldırabilirsiniz; kurallar artık hooks eklentisinde birleşti.
Yeni projelerde Expo SDK 54+ compiler’ı varsayılan açıyor; Vite ve Next.js şablonlarında da seçenek var. Mevcut büyük uygulamalarda kademeli geçiş rehberi var: önce bir modül, sonra genişletme.
useMemo’ları silmeli miyim?
Kısa cevap: hemen toplu silmeyin. Compiler çoğu durumda sizin yazdığınız memoization kadar iyi veya daha iyisini yapar. Ama effect bağımlılıkları gibi ince ayar gerektiren yerlerde manuel hook’lar hâlâ “kaçış kapısı” olarak kalabilir.
Test coverage zayıfsa compiler sürümünü --save-exact ile sabitleyin; memoization stratejisi sürümler arası değişebilir.
Build süresi notu
Next.js 15.3.1+ ile deneysel swc entegrasyonu build süresini iyileştirmiş. Vite kullananlar Babel eklentisi yoluyla bağlıyor; oxc desteği yolda.
Özet — senin için ne demek? React Compiler 1.0, “her yere useMemo koy” döngüsünü kırmak için en net adım. Yeni proje başlıyorsanız açık başlayın; mevcut projede lint’i güncelleyip küçük bir modülde deneyin. Junior iseniz Rules of React’i öğrenmenin en iyi yolu compiler uyarılarını ciddiye almak; mid-level iseniz performans optimizasyonunu elle değil, test + profiler ile doğrulayın.