Digital Transformation
Signals (Reaktivitas Berbasis Sinyal)
TL;DR: Signals adalah pola reaktivitas yang menyimpan nilai dalam wadah yang melacak siapa saja yang memakainya. Saat nilai berubah, hanya bagian UI yang benar-benar bergantung pada nilai itu yang diperbarui, bukan seluruh komponen. Pola ini membuat pembaruan UI lebih hemat dan terprediksi, dan diadopsi framework seperti Solid, Preact, dan Angular.
Pada banyak framework lama, mengubah satu nilai bisa memicu render ulang seluruh komponen, lalu sistem membandingkan hasilnya untuk tahu apa yang berubah. Signals membalik urutannya: sistem sudah tahu persis bagian mana yang bergantung pada nilai itu, jadi langsung memperbarui bagian itu saja.
Apa itu Signals?
Signals adalah primitif reaktif berupa wadah nilai yang otomatis mencatat dependensinya. Ketika kamu membaca sebuah signal di dalam tampilan, sistem mencatat hubungan itu. Ketika signal diperbarui, hanya pembaca yang terdaftar yang ikut diperbarui. Pendekatan ini berbeda dari model hydration dan render ulang berbasis komponen yang lebih kasar granularitasnya.
Analoginya seperti langganan koran per rubrik. Kalau hanya rubrik olahraga yang berubah, hanya pelanggan rubrik olahraga yang dikabari. Pembaca rubrik lain tidak ikut terganggu.
Cara Kerja Singkat
| Konsep | Peran |
|---|---|
| Signal | Wadah nilai yang bisa dibaca dan ditulis |
| Computed | Nilai turunan yang otomatis ikut berubah |
| Effect | Aksi yang berjalan saat dependensinya berubah |
Karena pembaruan bersifat granular, beban kerja main thread cenderung lebih kecil, yang berdampak baik pada INP. Pola ini sering dipasangkan dengan code splitting agar logika reaktif tetap modular.
Kenapa Penting untuk Bisnis?
UI yang memperbarui hanya bagian yang perlu terasa lebih responsif, terutama pada halaman dengan banyak elemen interaktif seperti dashboard atau keranjang belanja. Dari pengalaman membangun antarmuka data-berat, render ulang berlebih adalah penyebab umum jank yang sulit dilacak. Signals menekan masalah ini di akar.
Manfaatnya paling terasa pada aplikasi interaktif kompleks. Untuk halaman konten statis, dampaknya kecil karena interaksinya minim. Konsep dan motivasinya dijelaskan pada dokumentasi reaktivitas Solid.
Pertanyaan Umum
Apakah Signals menggantikan state management?
Tidak selalu. Signals adalah primitif reaktivitas tingkat rendah. Library state management bisa dibangun di atasnya atau dipakai berdampingan.
Apa bedanya dengan render ulang biasa?
Render ulang biasa mengevaluasi ulang komponen lalu membandingkan hasil. Signals langsung tahu bagian mana yang bergantung pada nilai, jadi melewati perbandingan yang tidak perlu.
Istilah Terkait