SolidJS

SolidJS adalah pustaka JavaScript deklaratif untuk membangun antarmuka pengguna. Alih-alih memakai virtual DOM, Solid mengompilasi templat JSX menjadi operasi pada DOM nyata, lalu memperbarui hanya bagian yang bergantung pada data yang berubah. Pendekatan ini disebut reaktivitas berbutir halus (fine-grained reactivity).

Cara kerja reaktivitas

Reaktivitas Solid berpusat pada signal. Fungsi createSignal menghasilkan dua fungsi: getter untuk membaca nilai dan setter untuk memperbaruinya. Ketika getter dipanggil di dalam lingkup pelacakan, Solid mencatat hubungan antara signal dan pelanggan yang menggunakannya. Perubahan melalui setter kemudian hanya menjalankan kembali pelanggan tersebut.

import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);

  return (
    <button onClick={() => setCount(value => value + 1)}>
      Jumlah: {count()}
    </button>
  );
}

Dalam contoh ini, perubahan count memperbarui teks angka tanpa menjalankan ulang seluruh komponen. Komponen Solid umumnya dijalankan sekali untuk menyiapkan tampilan dan hubungan reaktifnya. Pembaruan berikutnya terjadi pada ekspresi yang bergantung pada signal, bukan melalui siklus render ulang komponen.

JSX yang familier, model eksekusi yang berbeda

Solid mendukung JSX dan TypeScript, sehingga bentuk komponennya tampak familier bagi pengembang React. Kemiripan tersebut terutama berada pada sintaks, bukan pada model eksekusinya. Di Solid, akses data reaktif dilakukan melalui fungsi seperti count(), sedangkan komponen tidak dijalankan ulang untuk setiap perubahan.

Perbedaan ini memengaruhi cara menulis kode. Membaca nilai reaktif di luar lingkup pelacakan membuat pembacaan tersebut tidak mengikuti perubahan berikutnya. Solid menyediakan primitif seperti createEffect dan createMemo untuk membuat lingkup pelacakan secara eksplisit.

Pengelolaan state dan karakteristik

Solid menyediakan primitif reaktif untuk menyimpan, menurunkan, dan merespons perubahan data. createSignal menyimpan nilai, createMemo membentuk komputasi turunan, dan createEffect menjalankan efek saat dependensinya berubah. JSX juga bertindak sebagai lingkup pelacakan agar tampilan tetap sinkron dengan state.

Pustaka ini dirancang agar kecil, dapat di-tree-shake, dan efisien saat merender di klien maupun server. Klaim kinerja tetap perlu dinilai dalam konteks aplikasi dan metode pengujian, bukan dari arsitektur pustaka saja.

SolidJS cocok bagi pengembang yang menginginkan JSX dan TypeScript dengan pembaruan DOM yang langsung serta terarah. Sintaks awalnya familier, tetapi pola reaktivitasnya berbeda dari React. Karena itu, memahami signal, lingkup pelacakan, dan model komponen yang dijalankan sekali lebih penting daripada sekadar mengenali JSX.

Lihat juga

• JavaScript
• TypeScript
• React
• Svelte
• Vue.js
• Angular
• Astro
• Pick a Framework

Sumber

• Repositori resmi SolidJS: arsitektur, JSX, pembaruan DOM, TypeScript, dan karakteristik pustaka.
• Intro to reactivity: model komponen, signal, pelanggan, dan pembaruan tampilan.
• Signals: createSignal, getter, setter, pelacakan dependensi, createEffect, dan createMemo.
• State management: primitif reaktif dan sinkronisasi JSX dengan state.