Virtual DOM dan Kenapa React Ngebut - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Apa Itu Virtual DOM?

Sebelum kita bahas kenapa React itu ngebut, kita harus kenalan dulu sama Virtual DOM. Virtual DOM itu kayak "bayangan" dari DOM asli yang ada di memori, dan React menggunakannya buat ngelola perubahan UI dengan lebih efisien.

Jadi, alih-alih langsung ubah DOM asli setiap kali ada perubahan, React nge-update Virtual DOM dulu, baru setelah itu dia ngelakuin "perbandingan" dan hanya update bagian yang berubah di DOM asli. Ini yang bikin React jadi lebih cepat dibanding cara manipulasi DOM biasa.

2. Cara Kerja Virtual DOM

Ketika state atau props berubah, berikut proses yang terjadi di React:

1. Render ke Virtual DOM: React bikin versi baru Virtual DOM yang sudah diperbarui.
2. Diffing (Perbandingan): React membandingkan Virtual DOM lama dengan yang baru untuk melihat bagian mana yang berubah.
3. Reconciliation (Penyelarasan): React hanya memperbarui bagian yang berubah di DOM asli.

3. Contoh Perbedaan Virtual DOM vs Manipulasi DOM Biasa

Misalnya kita punya elemen seperti ini:

<ul>
  <li>Ayam</li>
  <li>Bebek</li>
  <li>Angsa</li>
</ul>

Kalau kita pakai manipulasi DOM biasa dan mau nambahin "Burung", kita mungkin bakal nulis kode seperti ini:

document.querySelector("ul").innerHTML += "<li>Burung</li>";

Masalahnya, ini bakal ngerender ulang seluruh list, meskipun kita cuma nambah satu item. Ini nggak efisien!

Sedangkan kalau pakai React dengan Virtual DOM:

const [list, setList] = useState(["Ayam", "Bebek", "Angsa"]);

return (
  <ul>
    {list.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
    <button onClick={() => setList([...list, "Burung"])}>Tambah</button>
  </ul>
);

React hanya akan menambahkan elemen baru di DOM tanpa harus me-replace seluruh list. Lebih efisien, kan?

4. Kenapa React Lebih Ngebut?

• Update Terfokus: Hanya bagian yang berubah yang diperbarui di DOM.
• Diffing Algorithm: React pakai algoritma pintar buat membandingkan perubahan.
• Batching Update: React ngelompokkan beberapa update sekaligus supaya nggak terlalu sering ngubah DOM.

5. Kesimpulan

Virtual DOM adalah salah satu alasan utama kenapa React lebih cepat dibanding manipulasi DOM langsung. Dengan teknik diffing dan reconciliation, React bisa mengoptimalkan perubahan di UI tanpa harus me-replace seluruh elemen. Jadi, kalau kamu mau bikin aplikasi yang responsif dan efisien, React adalah pilihan yang tepat!