Setelah hampir satu tahun tidak membuat catatan di situs kecil ini, akhirnya ada waktu menulis tentang per-React an walaupun hanya sedikit di penghujung waktu resign ini 😄.

Seperti yang sudah tertera pada judul di atas, saya mau sedikit mencoba membagikan pemahaman yang baru saja pelajari beberapa waktu yang lalu tentang reconciliation pada Virtual DOM React JS.

Disclaimer: Tulisan ini hanya menjadi catatan saya dalam proses memahami tentang konsep reconcilitaion ini dan saya harap bisa menjadi referensi untuk pembaca tulisan ini. Sehingga, apabila nantinya ditemukan kesalahan pada penjelasan atau tulisan saya, saya sangat menghargai masukan dari teman-teman di sini baik secara langsung atau melalui kontribusi di Github website ini.

Reconciliation

Setelah menjelajah Gulu Gulu (Google) tentang definisi dari reconciliation saya menemukan beberapa definisi yang berbeda, namun tetap mengarah pada proses membedakan sesuatu.

Terkadang istilah reconciliation juga digunakan oleh warga akuntan untuk membedakan catatan keuangan.

Virtual DOM

Seperti yang diketahui, React JS menggunakan Virtual DOM sebagai konsep untuk mengelola UI secara efisien dan cepat.

Virtual DOM sendiri adalah representasi “virtual” dari Real DOM yang ada pada browser, sehingga ketika kita berurusan dengan DOM di React JS, kita hanya berurusan dengan Virtual DOM punya React tanpa berurusan langsung dengan Real DOM yang ada.

Sebenarnya Virtual DOM ini bukan sebuah teknologi eksklusif yang ada di React JS. Virtual DOM juga ditemui di Vue JS sebagai framework JavaScript selain React JS (iya iya library) yang menggunakan Virtual DOM. Sehingga membuat Virtual DOM ini menjadi lebih terlihat sebagai pattern daripada teknologi khusus.

Virtual DOM Reconciliation

Seperti yang sudah saya katakan, bahwasanya apabila kita berurusan dengan DOM di React JS maka kita tidak akan berurusan langsung dengan Real DOM yang ada. Alhasil kita hanya akan berurusan dengan Virtual DOM di React saja.

Hal tersebut membuat Virtual DOM menjanjikan keunggulan berupa performa yang lebih baik dikarenakan kita tidak mengubah Real DOM secara langsung.

Mengapa lebih baik? Karena, setiap kita melakukan perubahan pada element yang biasanya melalui state/props, kita tidak serta merta mengubah element yang ada pada Real DOM, namun React JS akan membandingkan antara perubahan di Virtual DOM dengan snapshot dari Virtual DOM sebelum perubahan terjadi, sehingga apabila ditemukan perbedaan, React JS akan mengubah Real DOM yang ada berdasarkan Virtual DOM terbaru. Proses inilah yang dinamai dengan reconciliation.

Kesimpulan

Dengan penjelasan di atas, kita bisa menarik kesimpulan bahwasanya reconciliation pada React Virtual DOM merupakan proses dimana React membandingkan antara Virtual DOM yang memiliki perubahan dengan snapshot Virtual DOM sebelum perubahan tersebut terjadi, yang kemudian hasil dari perbandingan tersebut akan digunakan sebagai acuan apakah ada perubahan yang mengharuskan Real DOM diperbarui atau tidak.

Atas kurang lebih nya saya mohon maaf, wabilahitaufik walhidayah wassalamu’alaikum wr.wb.