React vs Vanilla JS: Kapan Menggunakan Masing-masing?

"Harus pakai React atau vanilla JS aja ya?" Pertanyaan klasik yang sering muncul di awal setiap proyek web. Jawabannya? It depends.

React adalah library yang powerful dengan ekosistem yang luar biasa. Tapi bukan berarti selalu menjadi pilihan terbaik. Sama seperti menggunakan palu untuk semua pekerjaan—kadang kita butuh obeng, kadang butuh bor.

Dalam artikel ini, kita akan membandingkan kedua pendekatan secara praktis dan melihat kapan sebaiknya menggunakan masing-masing.

Perbandingan Cepat

Kapan Menggunakan Vanilla JavaScript?

1. Landing Page atau Website Statis

Jika website-mu sebagian besar konten statis dengan sedikit interaktivitas (navbar, modal, slider), vanilla JS lebih dari cukup. Tidak perlu membebani user dengan bundle React hanya untuk toggle menu.

// Vanilla: Simple toggle
const menuBtn = document.querySelector('.menu-toggle');
const nav = document.querySelector('.nav');

menuBtn.addEventListener('click', () => {
    nav.classList.toggle('active');
});

// vs React: Overkill untuk ini saja
import { useState } from 'react';

function Nav() {
    const [isOpen, setIsOpen] = useState(false);
    // ... component overhead
}

2. Proyek Kecil dengan Deadline Ketat

Untuk prototype, hackathon, atau project weekend—setup React (build tools, dependencies) bisa memakan waktu. Dengan vanilla, buka editor dan langsung coding.

3. Game atau Aplikasi Canvas-Intensive

React's virtual DOM tidak bermitra baik dengan game loop yang update 60fps. Game Canvas sebaiknya tetap vanilla atau gunakan library khusus game (Three.js, Phaser) tanpa React wrapper.

// Game loop di React = anti-pattern
function Game() {
    const canvasRef = useRef();
    
    useEffect(() => {
        // React tidak "aware" apa yang terjadi di canvas
        // Tapi tetap ada overhead React yang tidak perlu
        const ctx = canvasRef.current.getContext('2d');
        
        function loop() {
            ctx.clearRect(0, 0, w, h);
            // ... render
            requestAnimationFrame(loop);
        }
        loop();
    }, []);
    
    return <canvas ref={canvasRef} />;
}

4. Performance-Critical Applications

Jika setiap milidetik dan setiap kilobyte penting (embedded web, IoT dashboards), vanilla memberikan kontrol maksimal tanpa overhead framework.

Kapan Menggunakan React?

1. Single Page Applications (SPA)

Jika aplikasimu memiliki banyak "halaman" dan navigasi tanpa reload, React dengan React Router adalah pilihan natural. State management yang terpusat membuat data flow lebih predictable.

2. Aplikasi dengan State Kompleks

Saat aplikasi tumbuh, mengelola state dengan vanilla JS bisa berantakan cepat. React's declarative approach dengan hooks membuat kode lebih maintainable.

// React: Declarative & predictable
function TodoApp() {
    const [todos, setTodos] = useState([]);
    
    const addTodo = (text) => {
        setTodos([...todos, { text, done: false }]);
    };
    
    const toggleTodo = (index) => {
        const newTodos = [...todos];
        newTodos[index].done = !newTodos[index].done;
        setTodos(newTodos);
    };
    
    return (
        <div>
            {todos.map((todo, i) => (
                <TodoItem 
                    key={i} 
                    todo={todo} 
                    onToggle={() => toggleTodo(i)} 
                />
            ))}
        </div>
    );
}

3. Tim Development yang Besar

React punya konvensi yang jelas. Komponen yang terisolasi membuat parallel development lebih mudah. Developer baru bisa lebih cepat onboard dengan pola yang konsisten.

4. Ekosistem dan Third-Party Integrations

Butuh date picker yang accessible? Ada react-datepicker. Butuh charting? Recharts. Butuh form handling? React Hook Form. Ekosistem React menghemat waktu development berkali-kali lipat.

5. Mobile Apps (React Native)

Jika roadmap-mu termasuk mobile app, skill React bisa langsung ditransfer ke React Native. Code sharing antara web dan mobile bisa mencapai 70-90%.

Hybrid Approach: The Best of Both Worlds?

Kenapa harus memilih? Banyak proyek modern menggunakan pendekatan hybrid:

• React untuk UI shell: Navigation, routing, state global
• Vanilla untuk canvas/WebGL: Game, charts, visualizations
• Web Components: Reusable components tanpa framework lock-in

Pertimbangan Lain

Bundle Size Budget

Pada koneksi 3G lambat, setiap KB matters. React + ReactDOM sudah ~40KB gzipped. Belum lagi router, state management, dan dependencies lain. Jika target audience-mu di daerah dengan koneksi terbatas, vanilla bisa jadi pilihan yang lebih inclusive.

SEO Requirements

Meskipun Google bisa crawl JavaScript, SSR (Server-Side Rendering) tetap lebih reliable untuk SEO. React punya Next.js untuk SSR, tapi itu menambah complexity. Untuk konten-heavy sites, vanilla atau static site generator mungkin lebih sederhana.

Developer Experience vs User Experience

React membuat developer happy dengan DX yang luar biasa. Tapi jangan lupa: user tidak peduli tech stack-mu. Mereka peduli apakah aplikasinya cepat, reliable, dan solve their problem.

Kesimpulan

Tidak ada jawaban universal "React lebih baik" atau "Vanilla lebih baik". Pilihlah berdasarkan:

1. Scope proyek: Kecil dan simple? Vanilla. Besar dan kompleks? React.
2. Team size: Solo dev bisa pilih apa saja. Tim besar butuh konvensi React.
3. Performance requirements: Zero overhead? Vanilla. Bisa tolerate trade-offs? React.
4. Long-term maintenance: React lebih scalable, vanilla lebih fragile saat tumbuh.

Yang terpenting: Jangan over-engineering. Pilih tool yang tepat untuk job, bukan yang paling hype. Dan ingat, setiap proyek adalah kesempatan belajar—tidak ada pilihan yang "salah" selama kamu belajar dari decision tersebut.

Punya pendapat tentang React vs Vanilla? Atau pengalaman switching di tengah proyek? Share di studio.rhadzor.id