React Compiler di Tahun 2026: Memoization Otomatis dan Pertanyaan Interview

React Compiler telah mengubah cara pengembang menulis aplikasi React secara fundamental. Sejak diperkenalkan dalam React 19 dan terus disempurnakan hingga tahun 2026, compiler ini menghilangkan kebutuhan untuk menulis useMemo, useCallback, dan React.memo secara manual. Artikel ini membahas cara kerja React Compiler, aturan yang harus dipatuhi, integrasi dengan berbagai framework, serta pertanyaan-pertanyaan interview yang sering muncul terkait topik ini.

Apa Itu React Compiler

React Compiler merupakan compiler waktu-build yang menganalisis kode JavaScript atau TypeScript dan secara otomatis mengoptimalkan komponen React. Berbeda dengan pendekatan runtime seperti useMemo dan useCallback, compiler ini bekerja pada tahap kompilasi untuk menghasilkan kode yang sudah dioptimalkan.

Compiler ini menggunakan High-level Intermediate Representation (HIR) untuk memahami aliran data dalam komponen. HIR memungkinkan compiler melacak bagaimana nilai-nilai bergerak melalui kode dan menentukan kapan memoization diperlukan.

Menurut data dari Meta, implementasi React Compiler pada aplikasi production menunjukkan hasil yang signifikan. Quest Store mengalami peningkatan kecepatan muat hingga 12% dan interaksi menjadi 2,5 kali lebih cepat. Sanity Studio melaporkan pengurangan waktu render sebesar 20-30% pada 1.231 komponen yang dikompilasi.

Struktur jawaban interview: Definisikan compiler, jelaskan bahwa ia bekerja pada waktu build (bukan runtime), sebutkan pipeline HIR, dan kutip metrik dari implementasi nyata.

Pipeline Kompilasi: Dari Kode Sumber ke Output yang Dioptimalkan

React Compiler memproses kode melalui tujuh fase yang berbeda:

1. Source ke AST — Babel mem-parsing JavaScript/TypeScript menjadi Abstract Syntax Tree
2. AST ke HIR — Compiler mengubah AST menjadi High-Level Intermediate Representation yang dirancang khusus untuk model komponen React
3. Transformasi SSA — Single Static Assignment memastikan setiap variabel di-assign tepat satu kali, memungkinkan pelacakan aliran data yang presisi
4. Type Inference dan Effect Analysis — Compiler mengklasifikasikan operasi berdasarkan efeknya: read, store, capture, mutate, freeze
5. Reactive Analysis — Setiap ekspresi diklasifikasikan sebagai statis (konstanta, import) atau reaktif (turunan dari props, state, context)
6. Scope Discovery — Compiler mengidentifikasi scope memoization independen yang dapat di-cache dan diinvalidasi secara terpisah
7. Code Generation — JavaScript yang telah dioptimalkan dengan memoization otomatis dihasilkan

Berikut contoh bagaimana compiler mentransformasi sebuah komponen:

// 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...
}

Poin penting untuk interview: compiler melakukan memoization pada level nilai, bukan level komponen. Setiap nilai yang dihitung mendapatkan slot cache-nya sendiri, yang hanya diinvalidasi ketika dependensi spesifiknya berubah. Granularitas ini melampaui apa yang dicapai useMemo dalam praktik.

Aturan React yang Harus Dipatuhi

React Compiler melakukan analisis statis dengan asumsi bahwa komponen mengikuti Rules of React. Ketika kode melanggar aturan-aturan ini, compiler akan melewati optimisasi untuk komponen tersebut — secara diam-diam.

Tiga aturan inti yang harus dipatuhi:

• Komponen dan hook harus pure — Dengan input yang sama, render harus menghasilkan output yang sama. Tidak boleh membaca atau menulis state mutable eksternal selama render.
• Hook harus mengikuti konvensi pemanggilan — Hook tidak boleh dipanggil secara kondisional, di dalam loop, atau di fungsi bersarang.
• Props dan state bersifat immutable dalam satu render — Jangan pernah memutasi props atau state secara langsung; selalu gunakan fungsi setter.

// 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>;
}

Integrasi ESLint: Mendeteksi Pelanggaran Sebelum Build

Paket standalone eslint-plugin-react-compiler sudah deprecated sejak akhir 2025. Semua aturan lint terkait compiler kini berada di eslint-plugin-react-hooks@latest.

Konfigurasi dengan ESLint flat config:

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

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

Aturan-aturan yang didukung compiler mendeteksi tiga pola kritis:

• set-state-in-render — Memanggil setState selama render, menyebabkan loop tak terbatas
• set-state-in-effect — Komputasi berat di dalam effect yang memicu cascading re-render
• refs — Mengakses .current pada ref selama render (ref adalah escape hatch yang mutable, bukan render-safe)

Untuk interview, strategi adopsi yang direkomendasikan: aktifkan aturan ESLint terlebih dahulu, perbaiki semua pelanggaran, lalu aktifkan compiler. Pendekatan bertahap ini meminimalkan kejutan.

Kapan Optimisasi Manual Tetap Diperlukan

Compiler tidak menghilangkan semua pekerjaan optimisasi performa. Beberapa skenario tetap memerlukan intervensi manual:

1. Subscription ke external store

Compiler hanya melacak state React, props, dan context. External store (Redux, Zustand, MobX) memerlukan useSyncExternalStore atau mekanisme selector store itu sendiri untuk optimisasi render.

2. Komputasi berat dengan dataset besar

Meskipun compiler memoize nilai return, ia tidak memprofil biaya eksekusi. Fungsi yang memfilter 100.000 item tetap berjalan ketika dependensinya berubah. Untuk operasi yang benar-benar berat, useMemo dengan dependensi eksplisit tetap valid.

3. Logika imperatif berbasis ref

Ref secara sengaja dikecualikan dari model reaktif compiler. Animasi, canvas drawing, dan integrasi library DOM pihak ketiga tetap memerlukan kontrol manual.

4. Memoization lintas komponen

Compiler memoize dalam satu komponen atau hook. Berbagi nilai yang dihitung antar komponen tetap memerlukan lifting state, context, atau layer cache eksternal.

// 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} />;
}

Cara Mengaktifkan React Compiler di Berbagai Framework

Pewawancara sering menguji pengetahuan praktis tentang setup toolchain:

Next.js (15.3.1+): Dukungan native SWC. Aktifkan di next.config.js:

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

Vite 8 dengan @vitejs/plugin-react v6: Karena v6 menghapus Babel internal dan beralih ke oxc, compiler memerlukan @rolldown/plugin-babel:

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] }),
  ],
});

Expo SDK 54+: Diaktifkan secara default. Tidak perlu konfigurasi tambahan.

React Compiler vs Memoization Manual: Perbandingan untuk Interview

| Aspek | React Compiler | Manual (useMemo/useCallback) | |-------|---------------|----------------------------------| | Granularitas | Level nilai, per ekspresi | Level blok, ditentukan pengembang | | Memoization kondisional | Didukung | Tidak memungkinkan | | Biaya pemeliharaan | Nol — otomatis | Tinggi — dependency array, wrapper komponen | | Lintas komponen | Lingkup komponen tunggal | Lingkup komponen tunggal | | External stores | Tidak dilacak | Tidak dilacak (gunakan useSyncExternalStore) | | Class components | Tidak didukung | N/A (gunakan React.memo) | | Kebutuhan build | Plugin Babel atau SWC | Tidak ada | | Batas performa | 20-60% lebih sedikit re-render (tipikal) | Tergantung kemampuan pengembang |

Ringkasan untuk interview: compiler mengotomatisasi 80-90% memoization yang sebelumnya ditangani secara manual, dengan granularitas yang lebih baik dan tanpa overhead pemeliharaan. Sisa 10-20% melibatkan integrasi eksternal, komputasi yang benar-benar berat, dan pekerjaan DOM imperatif.

Pertanyaan Interview Umum dengan Jawaban Ringkas

T: Apakah React Compiler bekerja pada waktu build atau runtime? Waktu build. Compiler adalah plugin Babel yang mentransformasi kode sumber selama kompilasi. Output yang dioptimalkan menggunakan helper runtime (useMemoCache) untuk menyimpan nilai yang di-cache, tetapi semua analisis terjadi sebelum deployment.

T: Apakah useMemo dan useCallback yang sudah ada harus dihapus? Tim React merekomendasikan untuk mempertahankan memoization manual yang sudah ada. Menghapusnya dapat mengubah output kompilasi secara halus. Untuk kode baru, andalkan compiler dan tambahkan memoization manual hanya setelah profiling mengidentifikasi kebutuhan spesifik.

T: Apa yang terjadi ketika compiler menemukan kode yang tidak dapat dioptimalkan? Compiler melewati komponen atau hook tersebut secara diam-diam. Aplikasi tetap berfungsi dengan benar — bagian spesifik tersebut hanya berjalan tanpa memoization otomatis. Aturan ESLint memunculkan kasus-kasus ini selama development.

T: Bagaimana compiler berinteraksi dengan Server Components? Server Components berjalan di server dan menghasilkan output terserialisasi — komponen ini tidak di-render ulang di client. Compiler menargetkan komponen client di mana re-render adalah masalah performa utama. Kedua optimisasi ini saling melengkapi: Server Components mengurangi ukuran bundle, compiler mengurangi biaya re-render client.

T: Dapatkah compiler mengoptimalkan custom hook? Ya. Compiler menganalisis komponen dan hook. Custom hook yang menghitung derived state akan memiliki nilai return-nya yang di-memoize secara otomatis, menguntungkan setiap komponen yang memanggilnya.

Kesimpulan

• React Compiler v1.0 adalah alat waktu-build yang menyisipkan memoization granular pada level nilai melalui pipeline kompilasi tujuh fase (AST, HIR, SSA, type inference, effect analysis, reactive analysis, code generation)
• Compiler mengasumsikan komponen mengikuti Rules of React; pelanggaran menyebabkan silent opt-out, yang ditangkap oleh eslint-plugin-react-hooks dengan preset recommended
• Optimisasi manual tetap diperlukan untuk subscription external store, komputasi berat dengan dataset besar, logika imperatif berbasis ref, dan caching lintas komponen
• Setup praktis bervariasi menurut framework: SWC-native di Next.js, @rolldown/plugin-babel di Vite 8, default-on di Expo SDK 54+
• Untuk interview, artikulasikan apa yang diautomasi oleh compiler (80-90% memoization) dan apa yang tidak (external state, komputasi berat lintas komponen, class components)
• Jalur adopsi yang direkomendasikan adalah aturan ESLint terlebih dahulu, lalu enablement compiler — pewawancara diharapkan menanyakan tentang strategi bertahap ini