Membongkar Signals: Revolusi Reaktivitas di Aplikasi Web Modern Tanpa Overhead Framework

1. Pendahuluan

Sebagai developer web, kita sering dihadapkan pada tantangan performa dan reaktivitas. Aplikasi web modern dituntut untuk cepat, responsif, dan memberikan pengalaman pengguna yang mulus. Inti dari semua itu adalah bagaimana kita mengelola state (data) dan bagaimana UI kita bereaksi terhadap perubahan state tersebut.

Dulu, kita mengandalkan pendekatan yang mungkin terasa sedikit ‘brute force’. Ketika state berubah, seluruh komponen atau bagian besar dari UI akan di-render ulang. Bayangkan sebuah spreadsheet: setiap kali Anda mengubah satu sel, Anda harus menghitung ulang semua sel lainnya, bahkan yang tidak terkait langsung. Tentu ini tidak efisien, apalagi di aplikasi skala besar dengan banyak data dan interaksi.

Di sinilah Signals datang sebagai pahlawan baru. Signals menawarkan paradigma reaktivitas yang lebih efisien, prediktif, dan ‘fine-grained’. Ia memungkinkan kita untuk hanya memperbarui bagian UI yang benar-benar terpengaruh oleh perubahan state, bukan seluruh pohon komponen. Konsep ini bukan barang baru—ia sudah lama ada di beberapa framework seperti SolidJS dan library seperti MobX—tapi kini mulai mendapatkan daya tarik yang lebih luas dan bahkan dipertimbangkan untuk menjadi standar web di masa depan.

Dalam artikel ini, kita akan membongkar Signals: apa itu, bagaimana cara kerjanya, mengapa ia begitu powerful, dan bagaimana Anda bisa mulai menggunakannya untuk membangun aplikasi web yang lebih cepat dan responsif. Siap untuk revolusi reaktivitas? Mari kita selami! 🚀

2. Apa Itu Signals? Konsep Inti

Secara sederhana, Signals adalah sebuah ‘cell’ atau unit state reaktif yang dapat diamati (observable). Bayangkan sebuah kotak kecil yang menyimpan nilai. Ketika nilai di dalam kotak itu berubah, ia akan ‘memberitahu’ semua pihak yang ‘mendengarkan’ perubahan tersebut.

📌 Analogi Spreadsheet: Pikirkan kembali analogi spreadsheet. Setiap sel di spreadsheet bisa menjadi sebuah Signal.

Sel A1 berisi angka 5.
Sel B1 berisi angka 10.
Sel C1 berisi formula =A1+B1.

Di sini, A1 dan B1 adalah Signals (sumber data). C1 adalah nilai yang dihitung (computed) dari A1 dan B1. Jika Anda mengubah A1 menjadi 7, hanya C1 yang perlu dihitung ulang (menjadi 7+10=17). Sel lain yang tidak bergantung pada A1 atau B1 tidak terpengaruh. Ini adalah fine-grained reactivity dalam tindakan!

Bagaimana Signals Berbeda dari State Tradisional?

State Framework (misalnya React useState): Ketika Anda mengubah state di React, komponen yang memiliki state tersebut (dan anak-anaknya) akan di-render ulang. React kemudian melakukan ‘diffing’ Virtual DOM untuk menemukan perubahan dan memperbarui DOM nyata. Ini adalah pendekatan ‘component-level reactivity’.
Observables (misalnya RxJS): Observables adalah aliran data yang bisa memancarkan banyak nilai seiring waktu. Anda ‘subscribe’ ke aliran ini untuk bereaksi terhadap nilai-nilai baru. Signals mirip dalam hal bisa diamati, tetapi Signals biasanya merepresentasikan sebuah nilai tunggal yang berubah dan lebih fokus pada mekanisme dependency tracking otomatis.

Keunggulan utama Signals adalah ia bekerja pada tingkat nilai individu, bukan pada tingkat komponen atau objek. Ini berarti pembaruan UI bisa sangat presisi, hanya memperbarui bagian DOM yang benar-benar perlu diubah, tanpa perlu re-render komponen secara keseluruhan atau mekanisme diffing yang berat.

3. Bagaimana Signals Bekerja di Balik Layar?

Mekanisme inti Signals melibatkan tiga konsep utama:

signal(): Fungsi untuk mendeklarasikan sebuah state reaktif. Ia mengembalikan sebuah objek yang memiliki properti .value untuk mengakses atau mengubah nilainya.
effect(): Fungsi untuk menjalankan efek samping (seperti memperbarui DOM, melakukan console.log, atau memanggil API) setiap kali Signals yang diakses di dalamnya berubah.
computed(): Fungsi untuk mendeklarasikan sebuah nilai yang dihitung dari satu atau lebih Signals lain. Nilai ini akan di-cache (memoized) dan hanya akan dihitung ulang jika Signals yang menjadi dependensinya berubah.

Mari kita lihat contoh sederhana implementasi Signals (ini adalah pseudo-code yang mirip dengan banyak library Signals):

// Sebuah implementasi Signals yang sangat disederhanakan (untuk ilustrasi)
function signal(initialValue) {
  let value = initialValue;
  const subscribers = new Set(); // Siapa saja yang 'mendengarkan' perubahan ini

  return {
    get value() {
      // Saat nilai dibaca, tambahkan 'current effect' sebagai subscriber
      if (currentEffect) {
        subscribers.add(currentEffect);
      }
      return value;
    },
    set value(newValue) {
      if (newValue !== value) {
        value = newValue;
        // Beri tahu semua subscriber bahwa nilai telah berubah
        subscribers.forEach(effect => effect());
      }
    }
  };
}

let currentEffect = null; // Menjaga efek yang sedang berjalan

function effect(fn) {
  const execute = () => {
    currentEffect = execute; // Set efek ini sebagai efek yang sedang berjalan
    try {
      fn(); // Jalankan fungsi, yang akan 'membaca' signals dan otomatis mendaftar
    } finally {
      currentEffect = null; // Reset setelah efek selesai
    }
  };
  execute(); // Jalankan pertama kali
}

function computed(fn) {
  const result = signal(); // Computed value juga sebuah signal
  effect(() => {
    result.value = fn(); // Update nilai computed ketika dependensi berubah
  });
  return result;
}

// --- Contoh Penggunaan ---
const count = signal(0);
const multiplier = signal(2);
const doubledCount = computed(() => count.value * multiplier.value);

effect(() => {
  console.log(`Nilai count: ${count.value}`);
});

effect(() => {
  console.log(`Nilai doubledCount: ${doubledCount.value}`);
});

console.log("--- Mengubah count ---");
count.value = 5; // Hanya effect yang bergantung pada count dan doubledCount yang jalan

console.log("--- Mengubah multiplier ---");
multiplier.value = 3; // Hanya effect yang bergantung pada doubledCount yang jalan

console.log("--- Mengubah count lagi ---");
count.value = 10; // Hanya effect yang bergantung pada count dan doubledCount yang jalan

Penjelasan:

Ketika count.value atau multiplier.value dibaca di dalam computed atau effect, fungsi get value() mereka akan menambahkan effect atau computed tersebut sebagai ‘subscriber’. Ini membangun sebuah graf dependensi secara otomatis.
Ketika count.value atau multiplier.value diubah, fungsi set value() mereka akan memberi tahu semua ‘subscriber’ (efek atau computed) yang terdaftar untuk dijalankan ulang.
computed juga merupakan Signal. Jadi, ketika doubledCount.value dibaca di dalam effect lain, effect tersebut akan menjadi subscriber dari doubledCount.

Ini adalah inti dari dependency tracking otomatis dan memoization yang membuat Signals begitu efisien.

4. Keunggulan Signals

Keunggulan Signals tidak hanya terletak pada performa, tetapi juga pada aspek lain yang meningkatkan kualitas aplikasi dan pengalaman developer.

✅ Performa Superior (Fine-Grained Reactivity): Ini adalah daya tarik utama. Daripada me-render ulang seluruh komponen, Signals hanya memperbarui bagian DOM yang tepat yang terikat pada Signal yang berubah. Ini sangat mengurangi pekerjaan CPU, terutama pada aplikasi yang kompleks dengan banyak interaksi dan pembaruan data yang sering. Hasilnya adalah UI yang lebih responsif dan cepat.

✅ Prediktabilitas dan Kemudahan Debugging: Karena data flow sangat eksplisit (Anda selalu tahu Signal mana yang bergantung pada Signal lain), perilaku aplikasi menjadi lebih mudah diprediksi. Debugging juga lebih mudah karena Anda bisa melacak perubahan state dari sumber aslinya.

✅ Kesederhanaan API: API untuk Signals biasanya sangat minimalis: signal(), effect(), computed(). Ini membuatnya mudah dipelajari dan diintegrasikan ke dalam proyek yang sudah ada.

✅ Framework-Agnostic: Konsep Signals bersifat agnostik terhadap framework. Anda bisa menggunakannya di Vanilla JavaScript, atau mengintegrasikannya dengan React, Vue, Angular, atau Web Components. Ini memberikan fleksibilitas luar biasa, memungkinkan Anda membawa reaktivitas efisien ke mana pun Anda membutuhkannya.

✅ Mengurangi Re-render yang Tidak Perlu: Di framework seperti React, salah satu tantangan besar adalah mengoptimalkan re-render dengan useMemo, useCallback, dan React.memo. Dengan Signals, banyak dari optimasi ini menjadi tidak perlu karena reaktivitas sudah sangat presisi di tingkat nilai.

5. Studi Kasus: Menggunakan Signals di Vanilla JavaScript dan React

Mari kita lihat bagaimana Signals bisa digunakan dalam praktik.

Contoh di Vanilla JavaScript (Menggunakan library seperti `@preact/signals` atau `solid-js/web`):

Misalkan kita ingin membuat counter sederhana yang menampilkan nilai dan nilai yang dikalikan dua.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Signals Counter</title>
</head>
<body>
    <div id="app">
        <p>Count: <span id="count-display">0</span></p>
        <p>Doubled Count: <span id="doubled-count-display">0</span></p>
        <button id="increment-btn">Increment</button>
    </div>

    <script type="module">
        // Mengasumsikan Anda mengimpor library signals yang kompatibel
        // Misalnya: import { signal, computed, effect } from '@preact/signals';
        // Untuk contoh ini, kita akan menggunakan versi pseudo-code yang mirip
        // atau Anda bisa install '@preact/signals' dan gunakan di sini.

        // --- Simulasi Signals dari bagian sebelumnya ---
        // Anda akan mengganti ini dengan import { signal, computed, effect } from '@preact/signals';
        let currentEffect = null;
        function signal(initialValue) {
            let value = initialValue;
            const subscribers = new Set();
            return {
                get value() {
                    if (currentEffect) subscribers.add(currentEffect);
                    return value;
                },
                set value(newValue) {
                    if (newValue !== value) {
                        value = newValue;
                        subscribers.forEach(effect => effect());
                    }
                }
            };
        }
        function effect(fn) {
            const execute = () => {
                currentEffect = execute;
                try { fn(); } finally { currentEffect = null; }
            };
            execute();
        }
        function computed(fn) {
            const result = signal();
            effect(() => { result.value = fn(); });
            return result;
        }
        // --- Akhir Simulasi ---

        const count = signal(0);
        const doubledCount = computed(() => count.value * 2);

        const countDisplay = document.getElementById('count-display');
        const doubledCountDisplay = document.getElementById('doubled-count-display');
        const incrementBtn = document.getElementById('increment-btn');

        // Effect untuk memperbarui tampilan count
        effect(() => {
            countDisplay.textContent = count.value;
            console.log('DOM updated: count-display'); // Hanya ini yang jalan saat count berubah
        });

        // Effect untuk memperbarui tampilan doubledCount
        effect(() => {
            doubledCountDisplay.textContent = doubledCount.value;
            console.log('DOM updated: doubled-count-display'); // Hanya ini yang jalan saat doubledCount berubah
        });

        // Event listener untuk tombol increment
        incrementBtn.addEventListener('click', () => {
            count.value++;
        });
    </script>
</body>
</html>

Dalam contoh ini, ketika count.value diubah, hanya effect yang mengikat countDisplay dan doubledCount (karena doubledCount bergantung pada count) yang akan berjalan. DOM diperbarui secara minimal, tanpa re-render komponen div#app secara keseluruhan.

Integrasi dengan React (Menggunakan `@preact/signals-react`)

Meskipun React sudah memiliki mekanisme reaktivitasnya sendiri (useState, useReducer), Signals bisa diintegrasikan untuk mengoptimalkan re-render yang tidak perlu, terutama untuk state yang sering berubah atau state global.

import React from 'react';
import { signal, computed } from '@preact/signals-react'; // Menggunakan integrasi Signals untuk React

// Deklarasikan signals di luar komponen agar bisa diakses secara global
const count = signal(0);
const doubledCount = computed(() => count.value * 2);

function CounterDisplay() {
  // Komponen ini akan re-render hanya jika count.value berubah
  // @preact/signals-react menangani ini secara otomatis
  return (
    <>
      <p>Count: {count.value}</p>
      <p>Doubled Count: {doubledCount.value}</p>
    </>
  );
}

function IncrementButton() {
  console.log('IncrementButton rendered'); // Komponen ini hanya render sekali
  return (
    <button onClick={() => count.value++}>Increment</button>
  );
}

function App() {
  return (
    <div>
      <h1>Signals di React</h1>
      <CounterDisplay />
      <IncrementButton />
    </div>
  );
}

export default App;

Di sini, IncrementButton tidak akan re-render setiap kali count berubah karena ia tidak secara langsung ‘membaca’ count.value. Hanya CounterDisplay yang akan re-render (atau lebih tepatnya, DOM di dalamnya akan diperbarui secara fine-grained) ketika count.value berubah. Ini adalah cara yang sangat efisien untuk mengelola state di React tanpa perlu memo atau useCallback yang berlebihan.

6. Kapan Menggunakan Signals? Pertimbangan Praktis

Signals adalah alat yang powerful, tetapi seperti semua alat, ada waktu dan tempat terbaik untuk menggunakannya.

🎯 Gunakan Signals Ketika:

Aplikasi Membutuhkan Performa Tinggi: Jika Anda memiliki aplikasi dengan banyak pembaruan UI yang sering (misalnya, game, editor real-time, dashboard data), Signals dapat memberikan peningkatan performa yang signifikan.
Mengelola State yang Sering Berubah: Untuk state seperti posisi scroll, input form yang terus-menerus, atau data streaming, Signals bisa menjadi solusi yang lebih efisien daripada state management tradisional.
Membangun Micro-Frontends atau Komponen Mandiri: Karena sifatnya yang framework-agnostic, Signals ideal untuk membangun komponen atau micro-frontends yang dapat diintegrasikan dengan mudah ke berbagai lingkungan tanpa membawa overhead framework penuh.
Mengurangi Overhead Framework: Jika Anda ingin membangun aplikasi dengan Vanilla JavaScript atau framework yang sangat ringan, Signals menyediakan mekanisme reaktivitas yang kuat tanpa perlu mengadopsi framework yang lebih berat.
Optimalisasi Re-render di Framework yang Ada: Seperti yang kita lihat di contoh React, Signals dapat menjadi pelengkap yang sangat baik untuk mengatasi masalah re-render yang tidak perlu.

⚠️ Potensi Pitfalls:

Over-optimization: Tidak semua aplikasi membutuhkan tingkat reaktivitas fine-grained ini. Untuk aplikasi CRUD sederhana, overhead untuk memahami dan mengimplementasikan Signals mungkin tidak sebanding dengan manfaatnya.
Debugging Graf Dependensi: Meskipun prediktabil, graf dependensi yang sangat kompleks bisa menjadi tantangan untuk di-debug jika tidak diatur dengan baik.
Ekosistem yang Masih Berkembang: Meskipun popularitasnya meningkat, ekosistem tooling dan integrasi Signals masih belum sematang framework besar lainnya.

Kesimpulan

Signals merepresentasikan evolusi menarik dalam cara kita berpikir tentang reaktivitas di aplikasi web. Dengan fokus pada pembaruan fine-grained dan dependency tracking otomatis, Signals menawarkan jalan menuju aplikasi web yang lebih cepat, responsif, dan efisien.

Baik Anda membangun aplikasi Vanilla JavaScript, mengoptimalkan proyek React yang ada, atau merancang arsitektur micro-frontend yang fleksibel, memahami dan memanfaatkan Signals dapat menjadi jurus rahasia Anda untuk mencapai performa UI yang luar biasa. Konsepnya sederhana namun dampaknya revolusioner. Jadi, jangan ragu untuk bereksperimen dan melihat bagaimana Signals dapat mengubah cara Anda membangun web!