React vs Vue: Perbedaan dengan Kode Berdampingan

React dan Vue sama-sama alat JavaScript untuk membangun antarmuka pengguna dari komponen (React menyebut dirinya library, Vue menyebut dirinya progressive framework), dan keduanya berbagi sebagian besar ide: props mengalir ke bawah, event naik ke atas, state reaktif, virtual DOM. Perbedaan praktisnya: React menulis markup dengan JSX dan mengharapkan state diganti lewat setter, sedangkan Vue menulis markup dengan template HTML di dalam single-file component dan membiarkanmu mengubah nilai reaktif secara langsung. Berikut sebuah counter di React:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Clicked {count} times
        </button>
    );
}

Dan counter yang sama sebagai single-file component Vue (Counter.vue):

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
    <button @click="count++">Clicked {{ count }} times</button>
</template>

useState(0) menjadi ref(0), onClick menjadi @click, dan {count} menjadi {{ count }}. Perbedaan yang terlihat adalah count++: Vue membiarkanmu mengubah nilai di tempat, dan sistem reaktivitasnya akan menyadarinya. React butuh setCount karena React hanya merender ulang saat kamu memberinya nilai baru.

JSX vs single-file component

Komponen React adalah fungsi JavaScript yang mengembalikan JSX. Kondisi ditulis dengan && atau ternary, daftar dengan .map(), dan style berasal dari apa pun yang kamu pilih (file CSS, CSS module, framework utility).

Komponen Vue biasanya berupa file .vue dengan tiga blok: <script setup> untuk logika, <template> untuk markup, dan <style scoped> opsional yang CSS-nya hanya berlaku untuk komponen itu. Template memakai directive: v-if, v-for, v-model untuk binding input dua arah, :prop untuk mengikat nilai, dan @event untuk mendengarkan event. Template membuat markup tetap mudah dibaca oleh siapa pun yang paham HTML; JSX memberimu seluruh kemampuan JavaScript di dalam markup. Vue juga bisa memakai JSX dan React tidak bisa memakai template, tapi sebagian besar kode di masing-masing mengikuti cara bawaannya.

Berikut daftar yang difilter, fitur kedua yang kita bandingkan.

import { useState } from 'react';

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];

export default function App() {
    const [query, setQuery] = useState('');

    const visible = fruits.filter((f) =>
        f.toLowerCase().includes(query.toLowerCase())
    );

    return (
        <div>
            <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <ul>
                {visible.map((fruit) => (
                    <li key={fruit}>{fruit}</li>
                ))}
                {visible.length === 0 && <li>No match</li>}
            </ul>
        </div>
    );
}

Coba ketik xyz untuk melihat pesan kosong, lalu hapus lagi. Versi Vue-nya:

<script setup>
import { ref, computed } from 'vue';

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];
const query = ref('');

const visible = computed(() =>
    fruits.filter((f) => f.toLowerCase().includes(query.value.toLowerCase()))
);
</script>

<template>
    <input v-model="query" placeholder="Filter fruit" />
    <ul>
        <li v-for="fruit in visible" :key="fruit">{{ fruit }}</li>
        <li v-if="visible.length === 0">No match</li>
    </ul>
</template>

v-model menggantikan pasangan value dan onChange, dan computed menggantikan variabel biasa. Di React, visible dihitung ulang di setiap render karena fungsi komponen berjalan lagi; di Vue, computed menyimpannya di cache dan hanya menghitung ulang saat query berubah. Keduanya memakai key untuk membedakan item daftar.

Model reaktivitas

Inilah perbedaan paling mendasar di antara keduanya.

React: state immutable dan render ulang. State adalah snapshot. Kamu memanggil setter dengan nilai baru, React menjalankan fungsi komponen lagi, membandingkan JSX baru dengan yang lama, lalu memperbarui DOM. React membandingkan nilai dengan Object.is, jadi mengubah object atau array di tempat lalu mengirim object yang sama terlihat seperti tidak ada perubahan sama sekali.

import { useState } from 'react';

export default function App() {
    const [items, setItems] = useState(['one']);

    function mutate() {
        items.push('pushed');
        setItems(items);
    }

    function replace() {
        setItems([...items, 'added']);
    }

    return (
        <div>
            <button onClick={mutate}>push() in place</button>
            <button onClick={replace}>New array</button>
            <p>{items.join(', ')}</p>
        </div>
    );
}

Klik "push() in place" dan tidak ada yang berubah di layar, karena array-nya adalah object yang sama. Lalu klik "New array": render menampilkan pushed juga, karena mutasi sebelumnya benar-benar terjadi, React hanya tidak punya alasan untuk melihatnya. Halaman useState membahas pola ini secara mendalam.

Vue: nilai reaktif yang bisa diubah. Sebuah ref atau object reactive mencatat siapa yang membacanya (ref lewat getter .value, object reactive lewat proxy). Saat kamu menulis ke sana, Vue tahu persis computed value, watcher, dan bagian template mana yang bergantung padanya dan hanya memperbarui itu. Di Vue, items.value.push('pushed') memperbarui layar. Kamu menulis lebih sedikit kode seremonial, dan kamu kehilangan jaminan bahwa sebuah nilai tidak akan berubah diam-diam.

Tidak ada model yang lebih cepat dalam arti yang penting untuk aplikasi pada umumnya. React mungkin menjalankan lebih banyak kode komponen per perubahan dan mengandalkan memoisasi (secara manual, atau lewat React Compiler) untuk melewati pekerjaan; Vue melacak dependensi saat runtime sehingga melewati pekerjaan itu secara default.

Composition API vs hook

Composition API di Vue 3 dan hook di React menyelesaikan masalah yang sama: menyatukan state dan logika yang saling terkait lalu memakainya ulang di berbagai komponen. Vue menyebut fungsi yang bisa dipakai ulang itu composable (useMouse()), React menyebutnya custom hook (useMouse()). Aturannya berbeda karena waktu kode itu berjalan.

• Kapan berjalan. setup di Vue berjalan sekali saat komponen dibuat. Fungsi komponen React berjalan di setiap render, dan hook di dalamnya ikut berjalan.
• Aturan urutan. React mencocokkan hook berdasarkan urutan pemanggilan, jadi kamu tidak bisa memanggilnya di dalam kondisi atau perulangan. Vue tidak punya aturan seperti itu untuk ref dan computed, karena setup hanya berjalan sekali.
• Dependensi. Effect dan memo di React mendaftar dependensinya di sebuah array yang kamu kelola. watchEffect dan computed di Vue melacak apa yang dibacanya secara otomatis.
• Nilai basi. Callback React bisa menangkap nilai state lama dari render sebelumnya (bug klasik setInterval). Callback Vue membaca count.value saat dipanggil dan selalu melihat nilai terbaru.

Model React membuat setiap render menjadi fungsi murni dari props dan state, yang mudah diuji dan dipahami. Model Vue menghilangkan satu golongan bug seputar array dependensi. Developer yang menguasai salah satunya biasanya cepat menguasai yang lain.

Ekosistem

Pola di tabel itu: tim inti Vue mengelola router, store, dan devtools bersama-sama, jadi proyek Vue punya pilihan default yang jelas untuk masing-masing. React menyerahkan semua itu ke komunitas, yang memberimu lebih banyak pilihan dan lebih banyak keputusan. Vite, build tool yang biasa dipakai untuk proyek baru di keduanya, dimulai oleh pencipta Vue.

Kurva belajar

Vue sering menjadi awal yang lebih ramah. Template terbaca seperti HTML yang sudah kamu kenal, v-model menghilangkan boilerplate controlled input, dan nilai reaktif memperbarui layar saat kamu mengubahnya. React meminta JSX dan kebiasaan pembaruan immutable sejak awal, dan halaman JSX adalah hal pertama yang dibutuhkan kebanyakan orang.

Setelah dasar-dasarnya, jaraknya menyempit. Vue menambahkan konsepnya sendiri (ref vs object reactive, .value di script tapi tidak di template, watcher), dan React menambahkan effect, memoisasi, dan aturan hook. Lowongan kerja di daerahmu adalah penentu yang lebih berguna daripada sintaks.

Kapan memilih yang mana

Pilih React saat:

• Kamu ingin banyak pilihan library dan komponen dari komunitas, atau kamu berencana membangun aplikasi mobile native dengan React Native.
• Kamu suka menyimpan logika dan markup dalam satu fungsi JavaScript dan ingin framework seperti Next.js.
• Timmu menghargai pembaruan immutable yang eksplisit sehingga setiap render mudah dilacak.

Pilih Vue saat:

• Kamu ingin alat resmi yang serasi untuk routing dan state serta lebih sedikit keputusan yang harus dibuat.
• Timmu mencakup desainer atau developer back-end yang nyaman dengan template HTML.
• Kamu menambahkan interaktivitas ke halaman yang sudah dirender di server: Vue bisa dipasang ke halaman lewat tag script dan berkembang dari sana.

Keduanya matang dan dipakai di production oleh perusahaan dari berbagai ukuran, dan konsep yang kamu pelajari di salah satunya (komponen, props, state turunan, daftar dengan key) langsung terbawa ke yang lain.