Persiapan React 19: Siap Koding Tanpa useMemo & useCallback

React terus berkembang untuk membuat proses pengembangan aplikasi web menjadi lebih sederhana dan efisien. Salah satu perubahan yang menarik perhatian developer adalah hadirnya React Compiler, teknologi yang memungkinkan optimasi performa dilakukan secara otomatis. Dengan pendekatan ini, developer tidak selalu perlu menambahkan useMemo, useCallback, atau React.memo hanya untuk menghindari perhitungan dan render yang tidak diperlukan.

React 19 sendiri tidak menghapus useMemo dan useCallback. Namun, kehadiran React Compiler mengubah cara developer sebaiknya menulis kode React, terutama pada project baru. Alih-alih melakukan optimasi secara manual sejak awal, developer dapat menulis komponen dengan lebih sederhana dan membiarkan compiler menangani berbagai optimasi yang sebelumnya sering dilakukan menggunakan memoization.

Apa Itu React Compiler?

React Compiler adalah compiler khusus React yang melakukan optimasi terhadap kode aplikasi pada tahap build. Teknologi ini menganalisis kode React dan secara otomatis menerapkan optimasi memoization ketika diperlukan.

Sebelum adanya React Compiler, developer sering menggunakan beberapa teknik untuk mengurangi proses render atau perhitungan yang tidak diperlukan, seperti:

• useMemo
• useCallback
• React.memo

Pendekatan tersebut tetap tersedia, tetapi React Compiler dapat menangani banyak kebutuhan optimasi tersebut secara otomatis.

Dengan demikian, developer dapat lebih fokus pada logika aplikasi daripada memikirkan kapan sebuah fungsi atau hasil perhitungan harus dimemoisasi.

Apakah React 19 Menghapus useMemo dan useCallback?

Tidak. useMemo dan useCallback masih merupakan bagian dari React dan dapat digunakan ketika memang dibutuhkan.

Perubahan utamanya adalah cara developer melakukan optimasi. Pada kode React modern yang menggunakan React Compiler, developer tidak harus menambahkan memoization secara manual di setiap tempat yang dianggap berpotensi menyebabkan re-render.

Contoh kode lama yang cukup sering ditemukan:

import { useCallback, useMemo } from "react";

function ProductList({ products, search }) {
  const filteredProducts = useMemo(() => {
    return products.filter(product =>
      product.name.toLowerCase().includes(search.toLowerCase())
    );
  }, [products, search]);

  const handleSelect = useCallback((product) => {
    console.log(product);
  }, []);

  return (
    <div>
      {filteredProducts.map(product => (
        <button key={product.id} onClick={() => handleSelect(product)}>
          {product.name}
        </button>
      ))}
    </div>
  );
}

Dengan React Compiler, banyak pola seperti ini dapat ditulis lebih sederhana tanpa harus langsung menggunakan kedua Hook tersebut.

function ProductList({ products, search }) {
  const filteredProducts = products.filter(product =>
    product.name.toLowerCase().includes(search.toLowerCase())
  );

  const handleSelect = (product) => {
    console.log(product);
  };

  return (
    <div>
      {filteredProducts.map(product => (
        <button key={product.id} onClick={() => handleSelect(product)}>
          {product.name}
        </button>
      ))}
    </div>
  );
}

Bukan berarti versi kedua selalu lebih cepat dalam semua kondisi. Optimasi tetap bergantung pada kode, konfigurasi compiler, dan bagaimana aplikasi digunakan.

Mengapa useMemo dan useCallback Sering Digunakan?

useMemo digunakan untuk mempertahankan hasil sebuah perhitungan di antara render, sedangkan useCallback digunakan untuk mempertahankan referensi sebuah fungsi.

Keduanya sering digunakan ketika developer menemukan masalah performa tertentu.

Contohnya, sebuah komponen memiliki proses perhitungan yang cukup berat:

const result = useMemo(() => calculateSomething(data), [data]);

Sementara useCallback sering digunakan ketika sebuah fungsi diberikan sebagai prop kepada komponen lain:

const handleClick = useCallback(() => {
  setCount(count + 1);
}, [count]);

Masalahnya, penggunaan memoization secara berlebihan juga dapat membuat kode menjadi lebih kompleks. Developer harus memikirkan dependency array dan memahami apakah memoization tersebut benar-benar memberikan manfaat.

Inilah salah satu area yang ingin disederhanakan oleh React Compiler.

Bagaimana React Compiler Mengubah Cara Menulis Kode?

React Compiler mencoba memahami bagaimana komponen menggunakan props, state, nilai, dan fungsi selama proses kompilasi.

Compiler kemudian dapat melakukan optimasi secara otomatis sehingga developer tidak harus menambahkan memoization secara manual di setiap komponen.

Pendekatan ini membuat prinsip pengembangan React menjadi lebih sederhana:

Tulis kode yang jelas terlebih dahulu, kemudian biarkan compiler melakukan optimasi yang sesuai.

Hal tersebut berbeda dengan kebiasaan lama ketika developer terkadang langsung menambahkan useMemo atau useCallback karena khawatir sebuah komponen akan melakukan render terlalu sering.

Persiapan Project React untuk React Compiler

Jika ingin mulai menggunakan pendekatan React modern, langkah pertama adalah memastikan project menggunakan versi React dan tooling yang kompatibel dengan React Compiler.

React Compiler bekerja melalui proses build sehingga konfigurasi project perlu diperhatikan. Dukungan terhadap compiler juga bergantung pada framework atau build tool yang digunakan.

Sebelum melakukan migrasi, periksa terlebih dahulu:

1. Versi React yang digunakan.
2. Framework atau build tool yang digunakan.
3. Dukungan React Compiler pada stack tersebut.
4. Apakah terdapat kode lama yang bergantung pada pola tertentu.
5. Apakah project memiliki pengujian yang cukup.

Untuk project besar, penerapan sebaiknya dilakukan secara bertahap daripada langsung mengubah seluruh kode.

Jangan Langsung Menghapus Semua useMemo dan useCallback

Salah satu kesalahan yang perlu dihindari adalah menganggap React Compiler berarti semua useMemo dan useCallback harus dihapus.

React masih menyediakan kedua Hook tersebut. Bahkan pada kondisi tertentu, penggunaan manual masih dapat berguna.

Misalnya, developer ingin memberikan kontrol eksplisit terhadap memoization tertentu atau terdapat dependency yang memang membutuhkan referensi fungsi yang stabil.

Karena itu, proses migrasi sebaiknya bukan:

“Hapus semua useMemo dan useCallback.”

Melainkan:

“Kurangi kebutuhan memoization manual dan biarkan React Compiler menangani optimasi yang dapat dilakukan secara otomatis.”

Kapan useMemo Masih Dibutuhkan?

useMemo tetap dapat digunakan ketika developer memiliki alasan yang jelas untuk melakukan memoization terhadap sebuah nilai.

Misalnya terdapat perhitungan yang relatif mahal dan developer telah melakukan profiling sehingga perhitungan tersebut memang menjadi bagian dari masalah performa.

Contohnya:

const processedData = useMemo(() => {
  return processLargeDataset(data);
}, [data]);

Namun, penggunaan useMemo sebaiknya tidak dilakukan hanya karena sebuah ekspresi terlihat cukup kompleks.

Untuk mengetahui apakah memoization diperlukan, developer dapat menggunakan profiling dan pengujian performa dibandingkan hanya mengandalkan asumsi.

Kapan useCallback Masih Dibutuhkan?

useCallback juga tidak menjadi Hook yang usang hanya karena React Compiler tersedia.

Hook ini masih dapat digunakan ketika stabilitas referensi sebuah fungsi memang memiliki tujuan tertentu.

Contohnya ketika sebuah fungsi digunakan sebagai dependency:

const fetchData = useCallback(() => {
  // mengambil data
}, [userId]);

Kemudian fungsi tersebut digunakan oleh Hook lain:

useEffect(() => {
  fetchData();
}, [fetchData]);

Dalam kasus seperti ini, dependency dan lifecycle tetap perlu dipahami oleh developer.

React Compiler membantu mengurangi kebutuhan optimasi manual, tetapi tidak menggantikan pemahaman terhadap React Hooks.

React Compiler Bukan Pengganti Penulisan Kode yang Baik

Compiler dapat membantu optimasi, tetapi bukan berarti developer dapat mengabaikan prinsip dasar React.

Kode tetap perlu dibuat dengan struktur komponen yang jelas, state management yang tepat, dependency Hook yang benar, serta pengelolaan data yang efisien.

Jika aplikasi melakukan pekerjaan yang tidak diperlukan, React Compiler tidak otomatis menyelesaikan semua masalah tersebut.

Contohnya, jika sebuah komponen mengambil data berulang kali karena kesalahan logika, masalah utamanya tetap berada pada implementasi aplikasi, bukan sekadar pada memoization.

Karena itu, React Compiler lebih tepat dipandang sebagai alat untuk mengurangi pekerjaan optimasi manual, bukan sebagai pengganti debugging dan profiling.

Persiapan Developer Sebelum Menggunakan React Compiler

Developer React yang ingin mengikuti perkembangan ini sebaiknya mulai mengubah cara berpikir ketika melakukan optimasi.

Daripada langsung menulis:

useMemo(...)

atau:

useCallback(...)

karena menganggap komponen harus dioptimalkan, lebih baik mulai dengan kode yang sederhana.

Setelah itu, lakukan profiling jika memang terdapat masalah performa.

Pendekatan tersebut membuat kode lebih mudah dibaca dan mengurangi penggunaan Hook yang sebenarnya tidak diperlukan.

Perhatikan Dependency dan Side Effect

Meskipun React Compiler dapat membantu optimasi, aturan dasar React Hooks tetap penting.

Developer tetap harus memahami perbedaan antara:

• nilai yang dihitung;
• state;
• props;
• event handler;
• side effect;
• dependency Hook.

Sebagai contoh, useEffect tetap memiliki fungsi berbeda dari useMemo maupun useCallback.

useEffect digunakan untuk menyinkronkan komponen dengan sistem eksternal, sedangkan useMemo dan useCallback berkaitan dengan memoization.

Memahami perbedaan tersebut menjadi semakin penting ketika developer mulai mengurangi penggunaan memoization manual.

Bagaimana Strategi Migrasi Project React Lama?

Untuk project React yang sudah berjalan, migrasi sebaiknya dilakukan secara bertahap.

Langkah yang dapat dilakukan antara lain:

1. Audit Kode

Cari penggunaan useMemo, useCallback, dan React.memo di dalam project.

Tidak semua penggunaannya harus dihapus. Tujuannya adalah mengetahui bagian mana yang menggunakan optimasi manual.

2. Aktifkan Compiler Secara Bertahap

Jika stack yang digunakan mendukung React Compiler, lakukan integrasi secara bertahap sesuai dokumentasi dan konfigurasi project.

3. Jalankan Testing

Pastikan perubahan tidak menyebabkan masalah pada:

• rendering;
• state;
• event handler;
• data fetching;
• interaksi pengguna;
• performa.

4. Gunakan Profiling

Jika tujuan migrasi adalah meningkatkan performa, gunakan React DevTools Profiler atau alat profiling lain untuk membandingkan kondisi aplikasi sebelum dan sesudah perubahan.

5. Pertahankan Optimasi yang Memang Dibutuhkan

Jika setelah pengujian ternyata sebuah useMemo atau useCallback masih memiliki tujuan yang jelas, tidak ada keharusan untuk menghapusnya.

Apa yang Perlu Dipelajari Developer React?

Perubahan menuju React Compiler membuat beberapa kemampuan menjadi semakin penting bagi developer.

Developer sebaiknya memahami:

• cara kerja rendering React;
• state dan props;
• React Hooks;
• dependency array;
• side effect;
• component composition;
• profiling performa;
• aturan React Compiler;
• proses build aplikasi.

Dengan pemahaman tersebut, developer tidak hanya bergantung pada compiler, tetapi juga dapat mengetahui kapan sebuah optimasi memang diperlukan.

React 19 dan Arah Pengembangan React Modern

React 19 membawa sejumlah perubahan penting pada ekosistem React, sementara React Compiler memperkenalkan pendekatan baru terhadap optimasi.

Perubahan tersebut menunjukkan bahwa pengembangan React semakin mengarah pada pengurangan pekerjaan optimasi yang harus dilakukan secara manual oleh developer.

Bagi project baru, pendekatan yang lebih sederhana dapat menjadi pilihan yang menarik: tulis komponen dengan jelas, hindari optimasi prematur, kemudian manfaatkan kemampuan compiler untuk melakukan optimasi yang sesuai.

Sementara untuk project lama, migrasi tetap perlu dilakukan dengan hati-hati. useMemo, useCallback, dan React.memo tidak perlu dianggap sebagai API yang sudah tidak berlaku. Penggunaannya dapat dievaluasi berdasarkan kebutuhan dan hasil profiling aplikasi.