React vs Angular: Perbedaan dan Kapan Memilih Mana

React adalah library JavaScript untuk membangun antarmuka pengguna, sedangkan Angular adalah framework lengkap untuk membangun aplikasi web. Dengan React, kamu menulis komponen sebagai fungsi yang mengembalikan JSX dan memilih tool terpisah untuk routing, form, dan data; dengan Angular, kamu menulis class TypeScript dengan template HTML dan langsung mendapat routing, form, HTTP client, dan dependency injection. Berikut counter yang sama di keduanya.

import { useState } from 'react';

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

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

Versi Angular dari komponen itu:

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-counter',
    template: `
        <button (click)="increment()">Clicked {{ count() }} times</button>
    `,
})
export class CounterComponent {
    count = signal(0);

    increment() {
        this.count.update((n) => n + 1);
    }
}

Konsepnya cocok satu per satu: useState(0) milik React adalah signal(0) milik Angular, onClick={...} adalah (click)="...", dan {count} adalah {{ count() }}. Perbedaannya ada pada tempat kodenya berada: satu fungsi yang mengembalikan markup di React, sebuah class plus string template di Angular.

Library vs framework

Inilah perbedaan yang mendorong sebagian besar perbedaan lainnya. React menangani rendering dan state komponen. Semua yang lain adalah pilihanmu:

• Routing: React Router, TanStack Router, atau route berbasis file milik framework.
• Fetch data: fetch di dalam effect, TanStack Query, atau loader dan server components milik framework.
• Form: input terkontrol biasa, form action React 19, atau React Hook Form.
• State global: context, Zustand, Redux Toolkit, Jotai.

Banyak tim melewatkan sebagian besar pilihan itu dengan memulai dari framework React seperti Next.js atau React Router dalam framework mode, yang sudah mencakup routing, pemuatan data, dan server rendering.

Angular membuat pilihan-pilihan itu untukmu: @angular/router, form reaktif dan berbasis template, HttpClient, dependency injection, setup testing, dan CLI ng yang membuat komponen dan service. Setiap proyek Angular secara garis besar terlihat sama, dan itulah alasan umum organisasi besar memilihnya. Biayanya, ada lebih banyak hal untuk dipelajari dan lebih sedikit kebebasan untuk mengganti satu bagian.

JSX vs template

Komponen React mengembalikan JSX, yang merupakan JavaScript. Kondisi ditulis dengan && atau ternary, list dengan .map(), dan apa pun yang bisa kamu lakukan di JavaScript bisa kamu lakukan di markup. Template Angular adalah HTML dengan sintaksnya sendiri: @if, @for dengan track, binding [property], binding (event), dan interpolasi {{ }}. Template menjaga markup dan logika terpisah dengan jelas; JSX menyatukannya di satu tempat dan memberimu seluruh kemampuan bahasanya. Berikut list yang difilter, fitur kedua yang dibandingkan.

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())
    );

    console.log('render, query =', JSON.stringify(query));

    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>
    );
}

Ketik an ke kotaknya dan perhatikan konsol: seluruh fungsi berjalan lagi di setiap ketukan tombol, dan visible cukup dihitung ulang. Komponen yang sama di Angular, dengan template di file-nya sendiri:

import { Component, computed, signal } from '@angular/core';

@Component({
    selector: 'app-fruit-filter',
    templateUrl: './fruit-filter.component.html',
})
export class FruitFilterComponent {
    fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];
    query = signal('');

    visible = computed(() =>
        this.fruits.filter((f) => f.toLowerCase().includes(this.query().toLowerCase()))
    );
}

<input #box [value]="query()" (input)="query.set(box.value)" placeholder="Filter fruit" />
<ul>
    @for (fruit of visible(); track fruit) {
        <li>{{ fruit }}</li>
    } @empty {
        <li>No match</li>
    }
</ul>

Di Angular, computed menyatakan bahwa visible bergantung pada query, jadi Angular tahu template mana yang membacanya dan hanya menghitung ulang visible saat query berubah. Di React tidak ada deklarasi seperti itu: komponennya berjalan ulang dan menghitung ulang. key={fruit} di React dan track fruit di Angular melakukan tugas yang sama, memberi tahu framework item list mana adalah item yang mana.

Mengutamakan JavaScript vs mengutamakan TypeScript

React adalah JavaScript biasa dengan JSX, dan TypeScript adalah opsi yang kamu tambahkan (npm create vite@latest my-app -- --template react-ts). Sebagian besar proyek React baru memang menambahkannya, tetapi kamu bisa belajar React tanpa memahami tipe. Angular dibuat untuk TypeScript: decorator, dependency injection, dan pemeriksa tipe template semuanya mengasumsikan TypeScript. Jika timmu sudah menulis kode bertipe, itu bukan masalah; jika kamu baru belajar pemrograman, itu satu hal lagi yang harus dipelajari bersamaan. Halaman React dengan TypeScript menunjukkan cara kerja tipe di sisi React.

Alur data dan change detection

Keduanya mengirim data ke bawah lewat input (props di React, input() atau @Input() di Angular) dan mengirim event ke atas lewat callback (fungsi yang dikirim sebagai props di React, output() atau @Output() di Angular). Perbedaannya ada pada cara masing-masing menyadari sebuah perubahan.

React memperlakukan state sebagai snapshot yang immutable. Kamu memanggil setter dengan nilai baru, React menjalankan ulang fungsi komponen, membandingkan JSX baru dengan yang lama, lalu memperbarui DOM. Tidak ada yang dilacak secara otomatis: fungsi render itulah grafik dependensinya. Ini mudah dipahami, dan biayanya, kadang kamu perlu menambahkan memo, useMemo, atau useCallback (atau membiarkan React Compiler menambahkannya) untuk melewatkan pekerjaan.

Angular dulu memakai Zone.js untuk mendeteksi setiap event async lalu memeriksa tree komponen untuk mencari binding yang berubah. Angular modern beralih ke signal: signal, computed, dan effect melacak nilai mana yang dibaca setiap template, jadi Angular hanya memeriksa komponen yang signal-nya berubah, dan versi terbaru bisa berjalan tanpa Zone.js sama sekali. Template Angular tidak menjalankan ulang seluruh fungsi di setiap perubahan seperti komponen React.

Dalam kode sehari-hari, keduanya terasa lebih mirip daripada yang tersirat dari mekanismenya: kamu menyimpan state, menurunkan nilai darinya, dan layar mengikuti.

Manajemen state

Di React, state lokal adalah useState atau useReducer, state bersama diangkat ke induk atau ditaruh di context, dan state tingkat aplikasi sering tinggal di library store kecil. Di Angular, state lokal adalah signal di komponen, dan state bersama biasanya tinggal di service yang dimasukkan lewat dependency injection ke mana pun ia dibutuhkan; dependency injection adalah jawaban bawaan Angular untuk "bagaimana dua komponen yang berjauhan berbagi data". NgRx tersedia untuk tim yang menginginkan store bergaya Redux. React tidak punya sistem dependency injection; context mengisi peran yang mirip.

Tabel perbandingan

Kurva belajar

React lebih cepat untuk memulai. Pemula yang sudah paham JavaScript bisa membuat sesuatu yang nyata setelah mempelajari komponen, props, state, dan effect, dan halaman apa itu React membahas seluruh idenya dalam beberapa menit. Proses belajarnya bergeser ke belakang: kamu harus memilih router, pendekatan fetch data, dan strategi form, dan codebase React yang berbeda membuat pilihan yang berbeda.

Angular punya awal yang lebih curam: TypeScript, decorator, template, signal, dependency injection, modul router dan form, serta RxJS untuk beberapa API. Namun setelah kamu menguasainya, setiap proyek Angular memakai bagian-bagian yang sama dengan cara yang sama, jadi berpindah antarproyek lebih mudah.

Kapan memilih yang mana

Pilih React saat:

• Kamu menginginkan inti yang kecil dan kebebasan memilih sisanya, atau kamu menginginkan framework seperti Next.js untuk server rendering dan route berbasis file.
• Kamu juga berencana membuat aplikasi mobile, di mana React Native memakai ulang model komponen yang sama.
• Timmu sebagian besar nyaman dengan JavaScript, atau kamu sedang belajar pengembangan front-end dan menginginkan jalan terpendek menuju aplikasi yang berjalan.

Pilih Angular saat:

• Tim besar butuh satu struktur standar di banyak proyek, dengan lebih sedikit keputusan arsitektur untuk diperdebatkan.
• Kamu menginginkan form, HTTP, routing, dan dependency injection dikelola bersama oleh satu tim, dan upgrade-nya dilakukan bersama oleh CLI.
• Timmu sudah menulis TypeScript dan menyukai service berbasis class serta pemisahan yang jelas antara template dan logika.

Keduanya matang, banyak dipakai di production, dan bagus untuk karier. Keterampilannya bisa dibawa: komponen, alur data satu arah, state turunan, dan update reaktif adalah ide yang sama di keduanya.