React vs Vue: Perbandingan Teknis.

Catatan ini membandingkan React dan Vue dari sisi teknis: bagaimana masing-masing melacak perubahan (reactivity), cara merender ke DOM, model komponen, sampai trade-off performa. Tujuannya bukan menentukan “yang terbaik”, tapi memahami mekanisme di balik keduanya supaya pemilihan tool jadi keputusan sadar, bukan ikut tren.

1. Model Reactivity

Ini perbedaan paling mendasar dan sumber dari banyak perbedaan lain.

React — re-render eksplisit

React tidak “melacak” data secara otomatis. Ketika setState/useState dipanggil, React menjadwalkan render ulang komponen tersebut beserta anak-anaknya, lalu membandingkan hasil Virtual DOM lama dan baru (reconciliation).

const [count, setCount] = useState(0);
// setCount memicu re-render fungsi komponen dari atas
<button onClick={() => setCount(count + 1)}>{count}</button>

Konsekuensi:

• Seluruh fungsi komponen dieksekusi ulang setiap render.
• Butuh optimasi manual: useMemo, useCallback, React.memo untuk mencegah render berlebih.
• Model mental: “UI adalah fungsi dari state” — deterministik, tapi biaya kehati-hatian ada di developer.

Vue — reactivity granular

Vue membungkus data dalam reactive proxy (Vue 3 memakai Proxy). Vue tahu persis komponen mana yang membaca sebuah nilai, sehingga hanya bagian itu yang di-update saat nilai berubah.

const count = ref(0)
// mengubah count.value hanya menyentuh DOM yang bergantung padanya
<button @click="count++">{{ count }}</button>

Konsekuensi:

• Tidak perlu deklarasi dependency manual — tracking otomatis.
• Optimasi umumnya “gratis”: komponen tidak render ulang tanpa perlu.
• Trade-off: ada sedikit “keajaiban” di balik layar yang harus dipahami saat debugging (kapan sesuatu reactive, kapan kehilangan reactivity, misalnya destrukturisasi props).

2. Rendering & Virtual DOM

Keduanya memakai Virtual DOM, tapi strateginya berbeda.

• React melakukan diff pada subtree yang render ulang. Sejak React 18, ada concurrent rendering (startTransition, Suspense) untuk memecah pekerjaan render agar tidak memblokir UI.
• Vue mengompilasi template menjadi render function dan menerapkan optimasi saat compile: static hoisting (elemen statis diangkat keluar render), patch flags (menandai node mana yang dinamis), sehingga runtime melewati bagian yang tidak mungkin berubah.

Artinya Vue memindahkan sebagian kerja ke tahap kompilasi, sementara React lebih banyak menyelesaikannya di runtime.

3. Model Komponen & Sintaks

React — JSX, semuanya JavaScript

Logika, markup, dan (sering) style hidup dalam JavaScript. Fleksibel dan tanpa batas ekspresi.

function List({ items }) {
  return (
    <ul>
      {items.filter(Boolean).map((x) => <li key={x.id}>{x.name}</li>)}
    </ul>
  );
}

Vue — SFC (Single File Component)

Vue memisahkan <template>, <script setup>, dan <style scoped> dalam satu file. Template memakai direktif (v-if, v-for, v-model).

<script setup>
defineProps(['items'])
</script>
<template>
  <ul>
    <li v-for="x in items" :key="x.id">{{ x.name }}</li>
  </ul>
</template>
<style scoped>
li { padding: 4px; }
</style>

Perbedaan kunci:

• v-model memberi two-way binding bawaan; di React two-way binding harus dirakit manual (value + onChange).
• <style scoped> memberi CSS terisolasi tanpa library; di React butuh CSS Modules / CSS-in-JS.
• JSX unggul untuk logika render yang kompleks; template Vue lebih ringkas untuk kasus umum.

4. State Management

Ekosistem React lebih terfragmentasi (banyak pilihan library state). Vue cenderung “satu jalan resmi” (Pinia), yang mengurangi decision fatigue tapi mengurangi variasi.

5. Performa

Untuk mayoritas aplikasi, keduanya cukup cepat dan bottleneck biasanya bukan di framework, melainkan di bundle size, network, atau render pattern yang buruk.

• Vue cenderung punya update default yang efisien tanpa tuning berkat reactivity granular + optimasi compile-time.
• React memberi kontrol lebih rendah-level (kapan render, cara memecah pekerjaan lewat concurrent features), tapi menuntut disiplin optimasi.
• Ukuran runtime keduanya sebanding dan jarang jadi faktor penentu.

6. Ekosistem & Meta-framework

7. Kapan Memilih yang Mana

Pilih React jika:

• Butuh ekosistem terbesar & pool developer terluas.
• Menargetkan mobile via React Native (berbagi model mental).
• Tim nyaman dengan “semua JavaScript” dan optimasi eksplisit.

Pilih Vue jika:

• Ingin onboarding cepat & boilerplate minim.
• Menyukai reactivity otomatis dan “satu jalan resmi” (Pinia, Vue Router, Nuxt).
• SFC dengan style scoped bawaan menarik untuk tim.

Kesimpulan

Perbedaan inti bukan soal “lebih baik”, tapi soal di mana kompleksitas ditempatkan: React menaruh kontrol (dan beban optimasi) di tangan developer; Vue memindahkan sebagian ke framework lewat reactivity otomatis dan optimasi compile-time. Keduanya matang dan produksi-siap — pilih berdasarkan kebutuhan tim, ekosistem, dan model mental yang paling nyaman.