React Compiler nedir?

Yeni React Compiler'ın otomatik memoizasyon sunduğunu öğrenirsin.

React Compiler nedir?

React Compiler, kaynak kodu derleme sırasında otomatik memoizasyon ekleyen bir araçtır. useMemo ve useCallback yazmak zorunda kalmazsın; derleyici gereksiz yeniden hesaplamaları kendisi engeller.

Babel eklentisi olarak çalışır ve her bileşeni analiz eder. Bir değerin bağımlılıkları değişmediyse eski sonucu yeniden kullanır. Böylece kod sade kalır, performans iyileşir.

Henüz tüm projelerde varsayılan değildir; isteyen açabilir.

Babel eklentisi ve yapılandırma

Derleyiciyi açmak için babel-plugin-react-compiler paketini Babel yapılandırmasına eklersin. Next.js'te reactCompiler: true seçeneği yeterlidir.

Derleyici yalnızca güvenli kodu memouze eder; yan etkili (impure) render çıkışlarını atlar. Bu yüzden bileşenlerin saf (pure) olması gerekir.

Eski projelerde kademeli geçiş yapılır; her dosya ayrı açılabilir.

Uygulama PriceList bileşenini yaz

PriceList bileşeni yaz. items özelliği alsın. items.reduce ile total hesapla. <div> içinde <h1>{total}</h1> ve <ul> içinde items.map ile <li key={item.id}>{item.name}</li> göster. Dışa aktar.

Örnek çözümü göster

function PriceList({ items }) {
  const total = items.reduce((sum, item) => sum + item.price, 0);
  return (
    <div>
      <h1>{total}</h1>
      <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>
    </div>
  );
}
export default PriceList;

Kendini test et

React Compiler ne yapar?
- Kodu küçültür ve sıkıştırır
- Derleme sırasında otomatik memoizasyon ekler
- TypeScript tipleri üretir
- Bileşenleri sunucuda çizilir
Cevabı göster

Derleme sırasında otomatik memoizasyon ekler — Derleyici gereksiz hesaplamaları önler.

Boşluğu doldur: derleyiciyi aç

module.exports = {
  babel: {
    plugins: [['babel-plugin-react-compiler', { ____: true }]],
  },
};

Cevabı göster

module.exports = {
  babel: {
    plugins: [['babel-plugin-react-compiler', { compilation: true }]],
  },
};

Derleyici kavramlarını eşleştir

otomatik memoizasyon

Gereksiz hesabı önler
Babel eklentisi

Derlemeye dahil eder
saf render

Memouze edilebilir
bağımlılıklar

Değişmeyince eski sonuç

Sıradaki ders: Otomatik memoizasyon

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler