Virtual DOM, apakah membuat React lebih cepat?

React merupakan salah satu UI library yang populer. Terdapat beberapa faktor penyebab React menjadi salah satu UI library populer. Selain faktor dukungan pengembang dari Facebook, React juga diklaim sebagai UI library yang memiliki performa luar biasa. React dapat digunakan untuk melakukan perubahan atau meng-update sebuah halaman web dinamis dengan cepat. Hal ini dibuktikan dengan banyaknya benchmarking test yang dilakukan oleh beberapa developer yang bisa dilihat pada video di youtube dan blog.

Setelah melihat benchmarking test dan membaca artikel yang membahas tentang performa React, muncul beberapa pertanyaan, diantaranya adalah:

1. Kenapa React bisa cepat untuk memperbarui tampilan pada halaman web?
2. Apakah benar, virtual DOM lah yang meningkatkan performa React dalam memperbarui tampilan pada halaman web?
3. Kalo memang benar, kenapa virtual DOM bisa meningkatkan performa React?

Semoga dengan menulis artikel ini, satu per satu pertanyaan di atas bisa terjawab semua. Oke, mari kita bahas satu per satu.

1. Kenapa React bisa cepat untuk memperbarui tampilan pada halaman web? Sayangnya, pertanyaan ini baru bisa dijawab setelah pertanyaan selanjutnya terjawab.
2. Apakah benar, virtual DOM lah yang meningkatkan performa React dalam memperbarui tampilan pada halaman web? Tidak, jawabannya adalah tidak. Menurut saya banyak faktor yang mempengaruhi performa React (termasuk kode dari programmernya :P). Akan tetapi, pada artikel ini saya akan lebih fokus pada pertanyaan apakah virtual DOM dapat meningkatkan performa React? Jawabannya adalah iya.
3. Kenapa virtual DOM dapat meningkatkan performa React? Pertanyaan ini akan dijawab dengan penjelasan tentang virtual DOM di bawah ini.

Virtual DOM

Sebelum kita membahas pertanyaan nomor 3, mari kita pahami dulu tentang virtual DOM. Virtual DOM adalah representasi dari representasi dokumen HTML yang disimpan pada memori oleh javascript (dalam hal ini dilakukan oleh React). Untuk lebih jelas tentang virtual DOM bisa dilihat pada gambar berikut:

HTML, DOM dan Virtual DOM

Dokumen HTML mempunyai representasi yang disebut HTML DOM. HTML DOM juga memiliki representasi yang disebut virtual DOM. DOM dan virtual DOM tersusun dari pohon node. Menurut Bartosz Krajka pada artikelnya menyebutkan bahwa “There’s no big difference between the “regular” DOM and the virtual DOM”.

Lalu kenapa React menggunakan virtual DOM kalau pada kenyataannya DOM dan virtual DOM tidak memiliki perbedaan yang signifikan? Apakah karena memanipulasi DOM lambat? Jawabannya adalah tidak. Manipulasi DOM tidak lebih lama dari seting value pada javascript object. Manipulasi DOM adalah proses sederhana.

Lalu, proses apa yang membuat lambat?

Yang membuat lambat adalah setiap kali DOM berubah, browser perlu memperhitungkan ulang CSS, membentuk layout kemudian mengubah seluruh tampilan halaman web.

Kemudian, kelebihan apa yang ditawarkan oleh React untuk mengatasi masalah ini?

Dengan adanya permasalahan tersebut, React mengoptimalkan penggunaan virtual DOM. React menyimpan sebuah virtual DOM atau bisa disebut sebagai duplikat dari DOM pada memori. Dengan virtual DOM ini, React dapat melakukan manipulasi pada virtual DOM dengan cepat. Setelah mengubah virtual DOM, selanjutnya React membandingkan virtual DOM dengan DOM. Jika terdapat perbedaan maka React akan mengubah bagian yang berbeda tersebut.

Pekerjaan tersebut dapat dilakukan lebih cepat oleh React daripada langsung bekerja dengan DOM.

Terimakasih sudah membaca

Sumber Konten :

What is Virtual Dom

The Real Benefits of the Virtual DOM in React.js

ReactJS | Learning Virtual DOM and React Diff Algorithm