React Compiler nedir? useMemo ve useCallback'i tamamen gereksiz kılar mı?

React Compiler (v1.0, Ekim 2025'te stabil), build aşamasında bileşenleri analiz edip otomatik memoization ekleyen bir derleyicidir (Babel/SWC eklentisi). Değerleri, callback'leri ve JSX parçalarını bağımlılıklarına göre cache'ler; elle useMemo, useCallback, React.memo yazma ihtiyacını büyük ölçüde ortadan kaldırır.

// babel.config.js
module.exports = {
  plugins: [["babel-plugin-react-compiler", {}]],
};

Nasıl çalışır?

Compiler, kodun Rules of React'e (saf render, props/state'i mutasyona uğratmama, hook kuralları) uyduğunu varsayar. Uyan bileşenlerde ifadeleri parçalara ayırıp bağımlılıklar değişmediyse önceki sonucu yeniden kullanır; bu, elle yazılan memoization'dan daha ince taneli olabilir.

useMemo/useCallback tamamen gider mi?

• Yeni kodda çoğu zaman gerek kalmaz.
• Mevcut useMemo'ları silmek zorunlu değildir; compiler onlarla birlikte çalışır.
• Bir değerin referans kimliği bir efektin bağımlılığı olarak kritikse, açık memoization hâlâ niyeti belgelemek için kullanılabilir.
• Compiler, kuralları ihlal eden (render sırasında mutasyon, ref'i render'da okuma vb.) bileşenleri atlar (bail out); bunlar optimize edilmez.

Pratik geçiş

• Önce eslint-plugin-react-hooks'un compiler kurallarıyla ihlalleri düzeltin.
• Sorunlu bir bileşen için "use no memo" direktifiyle o bileşeni geçici olarak dışarıda bırakabilirsiniz.
• React DevTools'ta compiler'ın optimize ettiği bileşenler "Memo" rozetiyle görünür.
• Next.js, Vite ve Expo'da yapılandırma ile açılabilir. React 19'da doğrudan çalışır; React 17 ve 18'de react-compiler-runtime paketi ve target ayarı gerekir.