Pendahuluan tentang DOM dapat dilihat disini.

Setiap element HTML adalah sebuah node pada DOM, jadi setiap kita memanipulasi element HTML sama saja kita memanipulasi DOM.

Proses manipulasi DOM dipengaruhi oleh besarnya DOM itu sendiri. Semakin besar DOM maka proses manipulasi DOM menjadi semakin lambat.

Terlebih lagi pada Single Page Application (SPA) proses manipulasi DOM bisa dilakukan berkali - kali.

Hal ini membuat manipulasi DOM adalah operasi yang slow dan expensive.

Virtual DOM

React menggunakan konsep Virtual DOM untuk mendapatkan performa yang lebih baik.

Virtual DOM pada dasarnya adalah abstraksi dari DOM, jika kita ibaratkan DOM adalah sebuah rumah maka Virtual DOM adalah blueprint dari rumah tersebut.

Mengubah bagian blueprint jauh lebih mudah ketimbang mengubah bagian dari rumah secara langsung.

Bagaimana React menggunakan Virtual DOM

React App tersusun dari banyak component, dan setiap component memiliki sebuah state.

Ketika sebuah component dibuat maka React akan membuat sebuah virtual DOM tree yang mewakili component tersebut, jika state dari component tersebut berubah React akan mengupdate virtual DOM terkait.

Lalu setelah Virtual DOM diupdate, React akan membandingkan antara Virtual DOM yang sudah diupdate dengan Virtual DOM sebelum diupdate, proses ini disebut diffing.

Proses diffing membuat React mengetahui bagian mana dari virtual DOM yang berubah yang kemudian React akan mengupdate real DOM namun hanya pada bagian yang berubah.

Dengan teknik ini React memiliki performa yang lebih baik dalam konteks memanipulasi DOM.

Semua proses di atas terjadi di balik layar, sehingga seorang developer hanya perlu melakukan update state dari component, dan React akan mengurus selebihnya.