React Compiler

React Compiler, topluluktan erken geri bildirim almak için açık kaynaklı hale getirdiğimiz yeni bir derleyicidir. React uygulamanızı otomatik olarak optimize eden yalnızca derleme zamanlı bir araçtır. Düz JavaScript ile çalışır ve React Kuralları’nı anlar, bu nedenle kullanmak için herhangi bir kodu yeniden yazmanıza gerek yoktur.

Derleyici ayrıca, derleyiciden gelen analizi doğrudan düzenleyicinizde ortaya çıkaran bir ESLint eklentisi içerir. Bugün herkesin linter kullanmasını şiddetle tavsiye ediyoruz. Linter, derleyicinin yüklü olmasını gerektirmez, bu nedenle derleyiciyi denemeye hazır olmasanız bile kullanabilirsiniz.

Derleyici şu anda beta olarak yayınlanmaktadır ve React 17+ uygulamaları ve kütüphaneleri üzerinde denenebilir. Beta sürümünü yüklemek için:

Ya da Yarn kullanıyorsanız:

Henüz React 19 kullanmıyorsanız, daha fazla talimat için lütfen aşağıdaki bölüme bakın.

Derleyici ne yapar?

Uygulamaları optimize etmek için React Compiler kodunuzu otomatik olarak memoize eder. Bugün useMemo, useCallback ve React gibi API’ler aracılığıyla memoizasyona aşina olabilirsiniz.memo`. Bu API’ler ile React’e, girdileri değişmediyse uygulamanızın belirli bölümlerinin yeniden hesaplanmasına gerek olmadığını söyleyebilir, güncellemeler üzerindeki çalışmayı azaltabilirsiniz. Güçlü olmalarına rağmen, memoizasyon uygulamayı unutmak veya yanlış uygulamak kolaydır. React, kullanıcı arayüzünüzün herhangi bir anlamlı değişikliğe sahip olmayan kısımlarını kontrol etmek zorunda olduğundan, bu durum verimsiz güncellemelere yol açabilir.

Derleyici, JavaScript ve React’in kuralları hakkındaki bilgisini kullanarak bileşenleriniz ve kancalarınızdaki değerleri veya değer gruplarını otomatik olarak hafızaya alır. Kuralların ihlal edildiğini tespit ederse, otomatik olarak sadece bu bileşenlerin veya kancaların üzerinden atlayacak ve diğer kodu güvenli bir şekilde derlemeye devam edecektir.

Kod tabanınız zaten çok iyi ezberlenmişse, derleyici ile büyük performans iyileştirmeleri görmeyi beklemeyebilirsiniz. Ancak, pratikte performans sorunlarına neden olan doğru bağımlılıkları elle not etmek zordur.

function FriendList({ friends }) {
  const onlineCount = useFriendOnlineCount();
  if (friends.length === 0) {
    return <NoFriends />;
  }
  return (
    <div>
      <span>{onlineCount} çevrimiçi</span>
      {friends.map((friend) => (
        <FriendListCard key={friend.id} friend={friend} />
      ))}
      <MessageButton />
    </div>
  );
}

// **Not** Bu bir bileşen veya hook olmadığı için React Compiler tarafından memoized
function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ }

// Bu bir bileşen olduğu için React Compiler tarafından not edilir
function TableContainer({ items }) {
  // Bu fonksiyon çağrısı hafızaya alınacaktır:
  const data = expensivelyProcessAReallyLargeArrayOfObjects(items);
  // ...
}

Derleyiciyi denemeli miyim?

Lütfen derleyicinin hala Beta aşamasında olduğunu ve birçok pürüze sahip olduğunu unutmayın. Meta gibi şirketlerde üretimde kullanılmış olsa da, derleyiciyi uygulamanız için üretime almak kod tabanınızın sağlığına ve React Kuralları’nı ne kadar iyi takip ettiğinize bağlı olacaktır.

Derleyiciyi şimdi kullanmak için acele etmenize gerek yok. Benimsemeden önce kararlı bir sürüme ulaşmasını beklemenizde bir sakınca yoktur. Bununla birlikte, derleyiciyi daha iyi hale getirmemize yardımcı olmak için bize geri bildirim sağlayabilmeniz için uygulamalarınızda küçük deneylerle denemekten memnuniyet duyarız.

Başlarken

Bu dokümanlara ek olarak, derleyici hakkında daha fazla bilgi ve tartışma için React Compiler Working Group adresini kontrol etmenizi öneririz.

eslint-plugin-react-compiler’ı yükleme

React Compiler ayrıca bir ESLint eklentisine de güç verir. ESLint eklentisi derleyiciden bağımsız olarak kullanılabilir, yani derleyiciyi kullanmasanız bile ESLint eklentisini kullanabilirsiniz.

Ardından, ESLint yapılandırmanıza ekleyin:

import reactCompiler from 'eslint-plugin-react-compiler'

export default [
  {
    plugins: {
      'react-compiler': reactCompiler,
    },
    rules: {
      'react-compiler/react-compiler': 'error',
    },
  },
]

Ya da kullanımdan kaldırılmış eslintrc yapılandırma biçiminde:

module.exports = {
  plugins: [
    'eslint-plugin-react-compiler',
  ],
  rules: {
    'react-compiler/react-compiler': 'error',
  },
}

ESLint eklentisi, editörünüzde React kurallarının herhangi bir ihlalini gösterecektir. Bunu yaptığında, derleyicinin o bileşeni veya hook’u optimize etmeyi atladığı anlamına gelir. Bu tamamen normaldir ve derleyici kod tabanınızdaki diğer bileşenleri kurtarabilir ve optimize etmeye devam edebilir.

Derleyiciyi kod tabanınızda kullanıma sunma

Mevcut projeler

Derleyici, React Kuralları’na uyan işlevsel bileşenleri ve kancaları derlemek için tasarlanmıştır. Ayrıca, bu bileşenleri veya hook’ları atlayarak (üzerinden atlayarak) bu kuralları ihlal eden kodlarla da başa çıkabilir. Ancak JavaScript’in esnek yapısı nedeniyle derleyici olası her ihlali yakalayamaz ve yanlış negatiflerle derleme yapabilir: Yani, derleyici yanlışlıkla React kurallarını ihlal eden bir bileşeni/hook’u derleyebilir ve bu da tanımlanmamış davranışlara yol açabilir.

Bu nedenle, derleyiciyi mevcut projelere başarıyla uyarlamak için önce ürün kodunuzdaki küçük bir dizinde çalıştırmanızı öneririz. Bunu, derleyiciyi yalnızca belirli bir dizin kümesinde çalışacak şekilde yapılandırarak yapabilirsiniz:

const ReactCompilerConfig = {
  sources: (filename) => {
    return filename.indexOf('src/path/to/dir') !== -1;
  },
};

Derleyiciyi yayma konusunda kendinize daha fazla güvendiğinizde, kapsamı diğer dizinlere de genişletebilir ve yavaş yavaş tüm uygulamanıza yayabilirsiniz.

Yeni projeler

Yeni bir proje başlatıyorsanız, varsayılan davranış olan kod tabanınızın tamamında derleyiciyi etkinleştirebilirsiniz.

React Compiler’ı React 17 veya 18 ile Kullanma

React Compiler en iyi React 19 RC ile çalışır. Yükseltme yapamıyorsanız, derlenen kodun 19’dan önceki sürümlerde çalışmasına izin verecek ekstra react-compiler-runtime paketini yükleyebilirsiniz. Ancak, desteklenen minimum sürümün 17 olduğunu unutmayın.

Ayrıca derleyici yapılandırmanıza doğru targetı eklemelisiniz, burada target hedeflediğiniz React’in ana sürümüdür:

// babel.config.js
const ReactCompilerConfig = {
  target: '18' // '17' | '18' | '19'
};

module.exports = function () {
  return {
    plugins: [
      ['babel-plugin-react-compiler', ReactCompilerConfig],
    ],
  };
};

Derleyiciyi kütüphaneler üzerinde kullanma

React Compiler, kütüphaneleri derlemek için de kullanılabilir. React Compiler’ın herhangi bir kod dönüşümünden önce orijinal kaynak kod üzerinde çalışması gerektiğinden, bir uygulamanın derleme hattının kullandıkları kütüphaneleri derlemesi mümkün değildir. Bu nedenle, önerimiz kütüphane sorumlularının kütüphanelerini derleyici ile bağımsız olarak derleyip test etmeleri ve derlenmiş kodu npm’ye göndermeleridir.

Kodunuz önceden derlendiğinden, kütüphanenizin kullanıcılarının kütüphanenize uygulanan otomatik bellekleştirmeden yararlanmak için derleyiciyi etkinleştirmeleri gerekmeyecektir.Kütüphaneniz henüz React 19’da olmayan uygulamaları hedefliyorsa, minimum target belirtin ve doğrudan bağımlılık olarak react-compiler-runtime ekleyin. Çalışma zamanı paketi, uygulamanın sürümüne bağlı olarak API’lerin doğru uygulamasını kullanacak ve gerekirse eksik API’leri çoklu dolduracaktır.

Kütüphane kodu genellikle daha karmaşık kalıplar ve kaçış kapaklarının kullanılmasını gerektirebilir. Bu nedenle, kütüphanenizde derleyiciyi kullanırken ortaya çıkabilecek sorunları tespit etmek için yeterli test yapmanızı öneririz. Herhangi bir sorun tespit ederseniz, 'use no memo' yönergesi ile belirli bileşenleri veya hook’ları her zaman devre dışı bırakabilirsiniz.

Uygulamalara benzer şekilde, kütüphanenizin faydalarını görmek için bileşenlerinizin veya hook’larınızın %100’ünü tamamen derlemeniz gerekmez. İyi bir başlangıç noktası, kütüphanenizin performansa en duyarlı kısımlarını belirlemek ve tanımlamak için eslint-plugin-react-compiler kullanabileceğiniz React Kuralları’nı ihlal etmediklerinden emin olmak olabilir.

Kullanım

Babel

Derleyici, derleyiciyi çalıştırmak için derleme hattınızda kullanabileceğiniz bir Babel eklentisi içerir.

Yükledikten sonra Babel yapılandırmanıza ekleyin. Lütfen derleyicinin pipeline’da ilk olarak çalışmasının kritik olduğunu unutmayın:

// babel.config.js
const ReactCompilerConfig = { /* ... */ };

module.exports = function () {
  return {
    plugins: [
      ['babel-plugin-react-compiler', ReactCompilerConfig], // önce koşmalı!
      // ...
    ],
  };
};

Derleyici ses analizi için girdi kaynak bilgisine ihtiyaç duyduğundan babel-plugin-react-compiler diğer Babel eklentilerinden önce çalıştırılmalıdır.

Vite

Vite kullanıyorsanız, eklentiyi vite-plugin-react’e ekleyebilirsiniz:

// vite.config.js
const ReactCompilerConfig = { /* ... */ };

export default defineConfig(() => {
  return {
    plugins: [
      react({
        babel: {
          plugins: [
            ["babel-plugin-react-compiler", ReactCompilerConfig],
          ],
        },
      }),
    ],
    // ...
  };
});

Next.js

Daha fazla bilgi için lütfen Next.js docs adresine bakın.

Remix

vite-plugin-babel yükleyin ve derleyicinin Babel eklentisini buna ekleyin:

// vite.config.js
import babel from "vite-plugin-babel";

const ReactCompilerConfig = { /* ... */ };

export default defineConfig({
  plugins: [
    remix({ /* ... */}),
    babel({
      filter: /\.[jt]sx?$/,
      babelConfig: {
        presets: ["@babel/preset-typescript"], // TypeScript kullanıyorsanız
        plugins: [
          ["babel-plugin-react-compiler", ReactCompilerConfig],
        ],
      },
    }),
  ],
});

Webpack

Bir topluluk Webpack yükleyicisi artık burada mevcut.

Expo

Expo uygulamalarında React Derleyicisini etkinleştirmek ve kullanmak için lütfen Expo’nun dokümanlarına bakın.

Metro (React Native)

React Native, Babel’i Metro aracılığıyla kullanır, bu nedenle kurulum talimatları için Babel ile kullanım bölümüne bakın.

Rspack

Rspack uygulamalarında React Derleyicisini etkinleştirmek ve kullanmak için lütfen Rspack’s docs adresine bakın.

Rsbuild

Rsbuild uygulamalarında React Derleyicisini etkinleştirmek ve kullanmak için lütfen Rsbuild’in dokümanlarına bakın.

Troubleshooting

Sorunları bildirmek için lütfen önce React Compiler Playground üzerinde minimal bir repro oluşturun ve bunu hata raporunuza ekleyin. Sorunları facebook/react reposunda açabilirsiniz.

Ayrıca üye olmak için başvurarak React Derleyici Çalışma Grubu’nda geri bildirim sağlayabilirsiniz. Üyelik hakkında daha fazla bilgi için lütfen README’ye bakın.

Derleyici ne varsayıyor?

React Compiler kodunuzun olduğunu varsayar:

1. Geçerli, semantik JavaScript’tir.
2. Nullable/opsiyonel değerlerin ve özelliklerin bunlara erişmeden önce tanımlandığını test eder (örneğin, TypeScript kullanılıyorsa strictNullChecks etkinleştirilerek), yani if (object.nullableProperty) { object.nullableProperty.foo } veya opsiyonel zincirleme object.nullableProperty?.foo ile.
3. React Kuralları’nı takip eder.

React Derleyici, React’in birçok kuralını statik olarak doğrulayabilir ve bir hata tespit ettiğinde derlemeyi güvenli bir şekilde atlayacaktır. Hataları görmek için ayrıca eslint-plugin-react-compiler yüklemenizi öneririz.

Bileşenlerimin optimize edildiğini nasıl bilebilirim?

React DevTools (v5.0+) ve React Native DevTools React Compiler için yerleşik desteğe sahiptir ve derleyici tarafından optimize edilen bileşenlerin yanında bir “Memo ✨” rozeti görüntüler.

Derlemeden sonra bir şey çalışmıyor

Eğer eslint-plugin-react-compiler yüklüyse, derleyici React kurallarının herhangi bir ihlalini editörünüzde gösterecektir. Bunu yaptığında, derleyicinin o bileşeni veya hook’u optimize etmeyi atladığı anlamına gelir. Bu tamamen normaldir ve derleyici kod tabanınızdaki diğer bileşenleri kurtarabilir ve optimize etmeye devam edebilir. Tüm ESLint ihlallerini hemen düzeltmek zorunda değilsiniz. Optimize edilen bileşen ve hook miktarını artırmak için bunları kendi hızınızda ele alabilirsiniz.

Ancak JavaScript’in esnek ve dinamik yapısı nedeniyle, tüm vakaları kapsamlı bir şekilde tespit etmek mümkün değildir. Bu durumlarda hatalar ve sonsuz döngüler gibi tanımlanmamış davranışlar meydana gelebilir.

Uygulamanız derlendikten sonra düzgün çalışmıyorsa ve herhangi bir ESLint hatası görmüyorsanız, derleyici kodunuzu yanlış derliyor olabilir. Bunu doğrulamak için, “use no memo” yönergesi aracılığıyla ilgili olabileceğini düşündüğünüz herhangi bir bileşeni veya hook’u agresif bir şekilde devre dışı bırakarak sorunun ortadan kalkmasını sağlamaya çalışın.

function SuspiciousComponent() {
  "use no memo"; // bu bileşenin React Compiler tarafından derlenmesini engeller
  // ...
}

Hatanın ortadan kalkmasını sağladığınızda, devre dışı bırakma yönergesini kaldırmanın sorunu geri getirdiğini doğrulayın. Ardından React Compiler Playground kullanarak bir hata raporunu bizimle paylaşın (küçük bir reproya indirgemeyi deneyebilirsiniz veya açık kaynak koduysa tüm kaynağı da yapıştırabilirsiniz), böylece sorunu belirleyebilir ve düzeltmeye yardımcı olabiliriz.

Diğer konular

Lütfen https://github.com/reactwg/react-compiler/discussions/7 adresine bakınız.