Virtual DOM vs Real DOM: Kenapa React.js Bisa Sangat Cepat?

Bayangin Kamu Punya Tembok Raksasa dari Lego...

Bayangin kamu punya sebuah tembok yang tersusun dari 10.000 keping balok Lego. Kamu cuma ingin mengganti 1 keping Lego warna merah di tengah tembok menjadi warna hijau.

Kalau kamu pakai cara tradisional (JavaScript murni / Real DOM), tukang bangunannya itu bodoh banget. Untuk mengganti 1 keping merah itu, si tukang akan MENGHANCURKAN seluruh tembok 10.000 Lego tersebut, lalu membangunnya lagi dari nol cuma demi satu blok hijau! Ini sangat memakan waktu dan bikin layar HP-mu patah-patah (Lag).

Masalahnya: Memanipulasi Real DOM Itu Mahal

Di dunia browser, DOM (Document Object Model) adalah struktur pohon HTML-mu. Setiap kali kamu menyuruh JavaScript mengubah teks atau warna pakai perintah document.getElementById, *browser* harus menghitung ulang ukuran kotak, posisi *margin*, dan melukis ulang warna pikselnya dari ujung ke ujung. Proses ini sangat menyiksa Processor HP pengunjung.

Nah, Di Sinilah 'Virtual DOM' Milik React Masuk!

Pembuat React menyadari kebodohan ini. Mereka menciptakan sistem Virtual DOM (DOM Bohongan).

• Saat kamu mau mengubah kotak merah jadi hijau, React tidak langsung menyuruh Browser (Real DOM) bekerja.
• React punya Cetak Biru (Blueprint/Virtual DOM) di dalam memori RAM-nya. React mengubah balok merah itu jadi hijau di dalam Blueprint-nya sendiri. Proses ini instan karena cuma terjadi di atas kertas, bukan di layar nyata.
• Kemudian, React menjalankan algoritma pembanding (Diffing Algorithm). Ia membandingkan Blueprint Lama dengan Blueprint Baru. "Hmm.. dari 10.000 blok, ternyata cuma blok nomor 45 yang berubah!"
• Setelah tahu persis targetnya, barulah React memerintahkan Browser (Real DOM) untuk HANYA MENCABUT DAN MENGGANTI blok nomor 45 itu saja, tanpa menyentuh 9.999 blok lainnya (Proses Reconciliation).

Intinya: Virtual DOM bekerja seperti seorang Manajer Proyek yang cerdas. Daripada menyuruh kuli bangunan membongkar rumah setiap menit, sang manajer mencatat semua perubahannya di kertas dulu, lalu menyuruh kuli mengeksekusinya secara efisien dalam satu gerakan presisi!