Apa itu SolidJS? — SolidJS

Pernah debug React app yang re-render terus padahal cuma 1 nilai berubah? Atau lihat ekor list panjang yang lag pas data update? Itu masalah klasik virtual…

SolidJS adalah library JavaScript untuk membangun tampilan web. Kamu menulis komponen dengan JSX, mirip React (library UI paling populer saat ini), tapi cara Solid memperbarui halaman beda: fungsi komponennya cuma jalan sekali, dan saat data berubah, Solid langsung mengganti potongan halaman yang memakai data itu saja. Bayangin papan stok di Toko Buku Kak Nadia. Cara pertama: tiap ada buku terjual, Kak Nadia menulis ulang seluruh papan di kertas baru, membandingkannya dengan papan lama baris demi baris, lalu menyalin angka yang beda. Cara kedua: tiap angka ditulis di kartu kecil yang digantung di papan, dan tiap kartu tahu dia mengikuti stok buku yang mana. Buku terjual, kartu itu saja yang diganti, papannya gak disentuh. React mirip cara pertama. Solid cara kedua.

🧪 Tebakan cepat: komponen keranjang Solid punya console.log("App jalan") di dalam fungsinya. Kamu klik tombol +1 Buku tiga kali. Berapa kali App jalan tercetak di console: 1, 3, atau 4? Jawabannya ada di bagian "Komponen jalan sekali".

Komponen pertamamu

Komponen Solid adalah fungsi biasa yang mengembalikan JSX. JSX adalah cara menulis tag mirip HTML langsung di dalam JavaScript.

function App() {
  return <h1>Halo Solid!</h1>
}

Di proyek sungguhan, komponen App dipasang ke halaman sekali oleh render:

import { render } from "solid-js/web"

render(() => <App />, document.getElementById("root"))

Di editor latihan, langkah ini dikerjakan untukmu: editor mencari komponen App dan memasangnya.

Di jalur ini kita bikin halaman kecil untuk Toko Buku Kak Nadia: daftar buku (Laskar Pelangi, Bumi Manusia, Cantik Itu Luka), stoknya, dan keranjang belanja. Tiap pelajaran menambah satu bagian.

Komponen jalan sekali

Ini tombol keranjang Toko Buku Kak Nadia. Datanya disimpan di signal, yaitu wadah nilai milik Solid yang memberi tahu halaman saat nilainya berubah (dibahas penuh di pelajaran Signals):

import { createSignal } from "solid-js"

function App() {
  const [jumlah, setJumlah] = createSignal(0)
  console.log("App jalan")

  return (
    <div>
      <button onClick={() => setJumlah(j => j + 1)}>+1 Buku</button>
      <p>Keranjang: {jumlah()} buku</p>
    </div>
  )
}
Kejadian Fungsi App dipanggil? Console Yang berubah di halaman
Halaman dibuka ya, sekali App jalan div, button, p dibuat
Klik ke-1 tidak teks 0 jadi 1
Klik ke-2 tidak teks 1 jadi 2
Klik ke-3 tidak teks 2 jadi 3

App jalan tercetak 1 kali. Itu jawaban tebakannya. Fungsi App cuma bertugas menyiapkan: membuat signal, membuat elemen, dan memasang hubungan "teks ini mengikuti jumlah". Sesudah itu dia selesai dan gak dipanggil lagi. Tiap klik, Solid langsung mengganti satu potongan teks, yaitu angkanya.

Di React, komponen yang sama mencetak App jalan 4 kali: sekali saat dibuka, lalu sekali tiap klik, karena React memanggil fungsi komponennya lagi tiap state berubah (namanya re-render).

Tanpa virtual DOM

DOM adalah susunan elemen halaman yang dipegang browser. React gak mengubah DOM langsung dari kodemu. Tiap re-render, React membuat gambaran tampilan baru berupa objek JavaScript (virtual DOM), membandingkannya dengan gambaran lama, lalu mengubah bagian DOM yang beda.

Solid gak punya virtual DOM. Compiler Solid menerjemahkan JSX-mu jadi kode yang membuat elemen DOM asli. Ini potongan hasil compile tombol keranjang tadi oleh compiler Solid 1.9 (babel-preset-solid):

var _tmpl$ = _$template(`<div><button>+1 Buku</button><p>Keranjang: <!> buku`)

function App() {
  const [jumlah, setJumlah] = createSignal(0)
  console.log("App jalan")
  return (() => {
    var _el$ = _tmpl$()
    // ... _el$2 adalah <button>, _el$3 adalah <p>, _el$6 penanda tempat angkanya
    _el$2.$click = () => setJumlah(j => j + 1)
    _$insert(_el$3, jumlah, _el$6)
    return _el$
  })()
}

Cara kerja ini namanya fine-grained reactivity. Reactivity artinya halaman mengikuti data secara otomatis. Fine-grained artinya yang diikuti itu potongan terkecil, satu teks atau satu atribut, bukan satu komponen utuh.

Solid dan React berdampingan

Solid 1.9 React 19
Menyimpan data createSignal(0) useState(0)
Membaca nilainya jumlah(), dipanggil seperti fungsi jumlah
Fungsi komponen dipanggil sekali tiap re-render
Saat data berubah ganti teks yang terhubung re-render, bandingkan virtual DOM, ubah yang beda
Ukuran tombol keranjang tadi (minify + gzip) 5,0 KB 60,5 KB

Hasil akhir di halaman sama: dua-duanya cuma mengganti satu teks. Bedanya kerja sebelum itu. Ukurannya diukur dari tombol keranjang yang sama, di-bundle dengan esbuild lalu dikompres gzip. Kalau kamu pernah belajar React, konsepnya (komponen, props, state) terbawa ke Solid, cuma cara pakainya sedikit beda.

Mulai proyek sendiri

Di komputermu, proyek Solid dibuat dari template resminya:

npx degit solidjs/templates/js toko-buku
cd toko-buku
npm install
npm run dev

Editor latihan di sini gak memakai compiler asli Solid. Dia menjalankan JSX-mu dengan model kecil Solid yang punya signal dan hubungan yang sama. Untuk materi dasar hasilnya sama, dan di bagian yang beda, pelajarannya bilang.

⚠️ Jebakan yang sering ketemu

TL;DR: SolidJS adalah library UI yang memakai JSX seperti React, tapi tanpa virtual DOM. Fungsi komponennya cuma jalan sekali untuk menyiapkan elemen dan hubungan ke signal, jadi console.log di dalamnya tercetak sekali walau tombolnya diklik tiga kali (React: empat kali). Saat data berubah, Solid langsung mengganti teks yang terhubung saja: itu fine-grained reactivity. Signal dibaca dengan kurung, jumlah(). Komponen paling sederhana: function App() { return <h1>Halo Solid!</h1> }. Proyek baru dibuat dengan npx degit solidjs/templates/js my-app atau npm create solid@latest.

Yang akan kamu pelajari