React Compiler adalah alat build-time dari tim React yang menyisipkan memoization
secara otomatis ke komponen dan hook, sehingga `useMemo`, `useCallback`, dan
`React.memo` tidak lagi wajib ditulis manual. Compiler ini resmi stabil sejak
versi 1.0 dirilis 7 Oktober 2025, dan Next.js sudah mendukungnya langsung lewat
opsi `reactCompiler` di konfigurasi.

**Ringkasan cepat:**

1. React Compiler stabil (versi 1.0) sejak 7 Oktober 2025, sudah lepas status eksperimental dan jadi default di template baru Next.js, Vite, dan Expo.
2. Compiler menganalisis data-flow dan mutability komponen saat build, lalu menyisipkan memoization otomatis - `useMemo`/`useCallback` manual tidak lagi wajib.
3. Kalau compiler tidak yakin suatu nilai aman dimemoisasi tanpa melanggar Rules of React, ia membiarkannya tanpa optimasi daripada memaksakan perubahan berisiko bug.
4. Di Meta Quest Store, initial load dan navigasi jadi hingga 12% lebih cepat tanpa kenaikan memori - angka ini spesifik implementasi Meta, bukan jaminan hasil sama di proyek lain.
5. Aktifkan dengan instal `babel-plugin-react-compiler` sebagai dev dependency lalu tambahkan `reactCompiler: true` di `next.config.ts`.

## Apa Itu React Compiler dan Bagaimana Cara Kerjanya?

React Compiler berjalan sebagai plugin Babel saat proses build, menganalisis
alur data (data-flow) dan mutability tiap komponen untuk menentukan bagian mana
yang aman dimemoisasi. Alih-alih developer menghitung sendiri dependency array
`useMemo`/`useCallback`, compiler membaca kode React biasa lalu menyisipkan
logika cache yang setara secara otomatis, termasuk untuk kasus memoization
kondisional setelah early return yang sulit dilakukan manual.

Menurut [pengumuman resmi React Compiler 1.0](https://react.dev/blog/2025/10/07/react-compiler-1),
compiler juga memvalidasi Rules of React lewat integrasi ESLint. Kalau compiler
tidak bisa memastikan suatu nilai aman dimemoisasi tanpa melanggar aturan
tersebut, ia akan membiarkan nilai itu tanpa memoization daripada memaksakan
optimasi yang berisiko menimbulkan bug.

### Dampak Performa di Skala Produksi

> Di [Meta Quest Store](https://react.dev/blog/2025/10/07/react-compiler-1),
> initial load dan navigasi antar halaman jadi hingga 12% lebih cepat, dan
> sebagian interaksi lebih dari 2,5 kali lebih cepat setelah memakai React
> Compiler, dengan penggunaan memori yang tetap netral.

Angka ini spesifik untuk aplikasi Meta Quest Store dan tidak bisa dianggap
janji hasil yang sama di semua proyek. Besarnya dampak tetap bergantung pada
seberapa berat render tree aplikasi dan seberapa banyak komponen yang
sebelumnya tidak dimemoisasi sama sekali.

## Kapan Masih Perlu useMemo dan useCallback di 2026?

React Compiler tidak menghapus total kegunaan `useMemo` dan `useCallback`,
keduanya tetap tersedia sebagai escape hatch untuk kasus yang butuh kontrol
eksplisit, misalnya saat memoization manual dipakai sebagai kontrak API yang
sengaja dijaga stabil oleh library pihak ketiga. Untuk kode aplikasi baru,
rekomendasi tim React sendiri adalah mengandalkan compiler dan tidak lagi
menulis memoization manual secara default.

### Memoization Manual vs React Compiler: Perbandingan Singkat

<table>
  <thead>
    <tr>
      <th>Aspek</th>
      <th>useMemo/useCallback manual</th>
      <th>React Compiler otomatis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Siapa yang menulis</td>
      <td>Developer, eksplisit di tiap komponen</td>
      <td>Compiler, otomatis saat build</td>
    </tr>
    <tr>
      <td>Kapan diterapkan</td>
      <td>Ditulis di source code, berjalan saat runtime</td>
      <td>Dianalisis dan disisipkan saat build-time lewat plugin Babel</td>
    </tr>
    <tr>
      <td>Kalau dependency array salah</td>
      <td>Berisiko bug stale value karena kesalahan penulisan manual</td>
      <td>Kalau compiler tidak yakin aman, nilai dibiarkan tanpa optimasi daripada memaksakan perubahan berisiko</td>
    </tr>
    <tr>
      <td>Status rekomendasi 2026</td>
      <td>Masih relevan sebagai escape hatch untuk kontrak API pihak ketiga</td>
      <td>Rekomendasi default tim React untuk kode aplikasi baru</td>
    </tr>
  </tbody>
</table>

Satu hal yang perlu diperhatikan: membungkus value dengan `useCallback` secara
manual di komponen yang sudah dianalisis compiler kadang membuat hasil
optimasi kurang presisi dibanding kalau dibiarkan compiler yang menangani
sendiri. Praktik paling aman adalah menghapus memoization manual lama secara
bertahap sambil memverifikasi lewat React DevTools Profiler, bukan
menghapusnya sekaligus tanpa pengecekan.

## Bagaimana Cara Mengaktifkan React Compiler di Next.js?

Berdasarkan [dokumentasi resmi Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler),
langkah mengaktifkannya cukup dua tahap:

1. Instal compiler sebagai dev dependency:

   ```bash
   npm install -D babel-plugin-react-compiler
   ```

2. Tambahkan opsi `reactCompiler` di `next.config.ts`:

   ```ts
   import type { NextConfig } from "next";

   const nextConfig: NextConfig = {
     reactCompiler: true,
   };

   export default nextConfig;
   ```

Next.js memakai optimasi SWC khusus supaya compiler hanya diterapkan ke file
yang benar-benar memuat JSX atau React Hooks, bukan ke seluruh proyek, sehingga
dampaknya ke waktu build tetap kecil dan terlokalisasi.

> Next.js includes a custom performance optimization written in SWC that
> makes the React Compiler more efficient. Instead of running the compiler
> on every file, Next.js analyzes your project and only applies the React
> Compiler to relevant files. This avoids unnecessary work and leads to
> faster builds compared to using the Babel plugin on its own.
>
> — [Next.js Docs, reactCompiler](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler)

Bagi yang ingin
mengaktifkannya bertahap per komponen alih-alih langsung ke seluruh aplikasi,
tersedia `compilationMode: "annotation"` yang mewajibkan directive `"use memo"`
eksplisit di komponen yang ingin dioptimasi compiler.

## Ringkasan: Compiler Stabil 1.0, Memoization Otomatis, dan Dua Langkah Aktivasi

- React Compiler stabil sejak versi 1.0 (7 Oktober 2025) dan menambahkan
  memoization otomatis tanpa perlu `useMemo`/`useCallback` manual di sebagian
  besar kasus.
- `useMemo` dan `useCallback` masih boleh dipakai sebagai escape hatch untuk
  kasus khusus, tapi bukan lagi default yang wajib ditulis di setiap komponen.
- Mengaktifkannya di Next.js cukup dua langkah: instal
  `babel-plugin-react-compiler`, lalu set `reactCompiler: true` di
  `next.config.ts`.
- React Compiler mengoptimasi sisi render secara otomatis; untuk sisi mutasi
  data, App Router punya pendekatan komplementer lewat
  [Server Actions](/blog/server-actions-nextjs-untuk-pemula) yang memanggil
  fungsi server langsung dari form tanpa endpoint API terpisah.
- Keputusan arsitektur seperti ini berkaitan langsung dengan pilihan App
  Router vs Pages Router yang [sudah dibahas terpisah](/blog/app-router-vs-pages-router-nextjs-kapan-pakai).
  Kalau butuh bantuan audit atau migrasi performa Next.js untuk proyekmu,
  lihat [layanan web development](/layanan) yang ditawarkan.
- React Compiler jadi salah satu alasan upgrade dari Next.js 15 ke 16 layak
  dipertimbangkan; langkah migrasinya dibahas di
  [panduan upgrade Next.js 15 ke Next.js 16](/blog/cara-upgrade-nextjs-15-ke-16-langkah-demi-langkah).