SolidJS 2.0 hadir dengan model async-data bawaan yang memungkinkan sebuah komponen memperlakukan promise seperti nilai reaktif lainnya, dan ia melakukannya tanpa rentetan re-render yang dialami pengembang React saat menggunakan Suspense dan hooks. Perubahan ini penting karena menjaga UI tetap di layar saat data diperbarui, mengurangi boilerplate, dan menawarkan jalur konkret bagi tim React untuk memindahkan kode pengambilan data mereka ke Solid.

Mengapa model async Solid terasa berbeda

Di React, sebuah komponen yang membutuhkan data biasanya memanggil sebuah hook (sering kali hook kustom) yang mengembalikan objek mirip promise, lalu membungkus UI dalam <Suspense> untuk menampilkan fallback saat promise diselesaikan. Setiap kali promise selesai, React menjadwalkan re-render; jika komponen yang sama melakukan refetch kemudian, fallback dapat muncul sekilas di atas konten yang sudah terlihat.

Solid membalikkan keadaan tersebut. Sebuah promise hanyalah sebuah nilai yang dipantau oleh graph reaktif. Saat sebuah komputasi membaca nilai tersebut, graph akan menunda pembacaan itu sampai promise selesai, namun sisa UI tetap ter-render. Saat pertama kali komponen dipasang (mount), sebuah boundary <Loading> dapat menampilkan fallback; setelah itu, refetch akan membiarkan DOM yang ada tetap utuh sampai data baru tiba. Tidak ada "await" eksplisit di dalam komponen, tidak ada createResource, tidak ada toggle state manual.

Primitif inti

  • Boundary <Loading> – Menggantikan <Suspense> milik React. Ia hanya menampilkan fallback pada pemuatan awal. Setelah paint pertama, pembacaan yang tertunda tidak akan mengganti UI; konten lama tetap ada sampai nilai baru selesai. Gunakan prop on untuk memaksa munculnya spinner pada refetch tertentu.
  • Komponen <Reveal> – Mengontrol bagaimana beberapa boundary <Loading> muncul bersamaan. Pilih:
    • Sequential: boundary muncul satu per satu sesuai urutan DOM.
    • Together: semua muncul sekaligus saat setiap bagian data sudah siap.
    • Natural: masing-masing muncul segera setelah datanya sendiri tiba.
  • Signal isPending – Mengembalikan true selama pembacaan tertentu sedang berlangsung. Gunakan ini untuk menampilkan overlay berupa loading bar tipis atau animasi halus sementara konten utama tetap terlihat, memberikan fitur “stale-while-revalidate” secara gratis.
  • Generator action – Menggantikan pembaruan state mutable di React. Sebuah action(function*…) dapat memperbarui UI secara optimis, melakukan yield untuk menunggu respons server, lalu merekonsiliasi hasilnya saat promise selesai. UI terasa instan, dan langkah rekonsiliasi sudah tertanam di dalam primitif tersebut.

Bagaimana bagian-bagian ini dipetakan ke konsep React

Fitur Pendekatan React Pendekatan Solid 2.0
Pengambilan data use() (eksperimental) atau hook pihak ketiga; hasil dibungkus dalam <Suspense> createMemo (atau sejenisnya) yang mengembalikan promise; dibaca langsung di JSX
UI Loading <Suspense> mungkin memicu kembali fallback pada setiap refetch <Loading> hanya pada pemuatan pertama; refetch mempertahankan UI lama
Penyegaran (Refreshing) useTransition untuk menunda pembaruan UI Signal isPending menandakan pembacaan yang tertunda tanpa menukar UI
Mutasi useState/useReducer + panggilan async, sering kali dibungkus dalam action kustom action(function*…) dengan penanganan optimis bawaan

Hasil praktisnya adalah Solid membangun apa yang dianggap React sebagai hook terpisah ke dalam mesin reaktivitas intinya.

Panduan migrasi langkah demi langkah

  1. Identifikasi sumber data – Di React, Anda mungkin memiliki const data = useMyFetch(url). Di Solid, ganti itu dengan memo yang mengembalikan promise: const data = createMemo(() => fetch(url).then(r => r.json())).
  2. Bungkus komponen tingkat atas – Jika komponen merender sebelum promise terselesaikan, bungkus dengan <Loading fallback={<Spinner/>}>…</Loading>. Fallback hanya muncul pada saat mount pertama.
  3. Ganti spinner per-refetch – Di mana sebelumnya Anda mengubah flag loading, sekarang baca isPending(data). Gunakan boolean tersebut untuk merender indikator halus sementara UI yang ada tetap berada di layar.
  4. Konversi optimistic updates – Jika Anda memiliki setState(prev => ({...prev, optimisticValue})) yang diikuti oleh panggilan async, tulis ulang sebagai const update = action(function* (newValue) { state = newValue; const server = yield fetch(...); state = reconcile(server); });. Generator menyerahkan kontrol hingga server merespons, lalu secara otomatis memperbarui grafik reaktif.
  5. Tangani beberapa bagian async – Sarang (nest) batas <Loading> sesuai kebutuhan, lalu tambahkan pembungkus <Reveal> untuk memutuskan apakah mereka muncul bersamaan atau satu per satu. Ini menggantikan pola di mana pengembang React menyusun beberapa komponen <Suspense> secara bertahap dengan pemeriksaan state yang kompleks.
  6. Uji alurnya – Karena Solid tidak melakukan re-render saat resolusi promise, verifikasi bahwa pembaruan UI tetap terjadi di tempat yang Anda harapkan. Grafik reaktif menyebarkan perubahan secara otomatis; tidak perlu panggilan useEffect tambahan.

Apa yang masih berubah-ubah

API async Solid 2.0 saat ini masih dalam tahap beta. Nama-nama seperti <Loading> dan action mungkin berubah sebelum rilis stabil, dan dokumentasinya masih terus berkembang. Ide intinya—memperlakukan promise sebagai nilai reaktif—tetap tidak berubah, tetapi pengguna awal harus mengantisipasi perubahan breaking minor saat library tersebut mulai stabil.

Siapa yang akan diuntungkan

  • Tim React dengan pengambilan data yang intensif – Berkurangnya kebutuhan akan library state eksternal dan pola built-in stale-while-revalidate dapat memperkecil ukuran bundle dan menyederhanakan codebase.
  • Aplikasi yang berfokus pada performa – Dengan menghindari re-render komponen secara penuh pada setiap fetch, Solid memberikan pembaruan visual yang lebih mulus, terutama pada perangkat kelas bawah.
  • Pengembang yang lelah dengan “flash of spinner” – Perilaku “first-load-only” dari batas <Loading> menghilangkan gangguan umum berupa spinner yang berkedip di atas konten yang sudah terlihat.

Kemungkinan kekurangan

  • Status beta – Hingga API stabil, proyek jangka panjang mungkin perlu mengalokasikan anggaran untuk upaya migrasi di kemudian hari.

Apa yang perlu diperhatikan selanjutnya

Pantau terus changelog resmi untuk setiap perubahan nama <Loading> atau action.

Intinya: SolidJS 2.0 memungkinkan Anda memperlakukan promise sebagai nilai reaktif kelas satu, menjaga UI tetap stabil saat data diperbarui, dan menghilangkan kebutuhan akan serangkaian hook bergaya React. Bagi tim yang siap beralih dari model yang berpusat pada re-render, jalur migrasinya jelas, keuntungan performanya nyata, dan satu-satunya risiko nyata hanyalah ketidakpastian tahap beta yang biasa terjadi.