Contoh Penggunaan virtual DOM di React

Pada contoh di atas, kita memiliki komponen utama App yang memiliki sebuah state bernama counter yang awalnya diatur ke 0. Ketika tombol "Tambah" diklik, metode handleClick akan dipanggil, dan state counter akan diperbarui dengan menambahkan 1 ke nilai sebelumnya.

Selanjutnya, dalam metode render komponen App, kita menggunakan JSX untuk menampilkan judul, nilai counter dari state, dan sebuah tombol. Setiap kali state berubah, React akan menggunakan Virtual DOM untuk memperbarui hanya bagian yang terpengaruh, yaitu elemen yang menampilkan nilai counter.

Dengan menggunakan Virtual DOM, React secara cerdas melakukan perbandingan antara Virtual DOM sebelumnya dengan yang baru. Hanya elemen yang memiliki perubahan nilainya yang akan diperbarui pada DOM aktual. Dalam contoh ini, hanya nilai counter yang akan berubah pada tampilan ketika tombol diklik, sedangkan elemen lain tetap tidak berubah.

Melalui penggunaan Virtual DOM, React mengoptimalkan kinerja dengan meminimalkan manipulasi langsung pada DOM aktual, sehingga mempercepat proses pembaruan tampilan.

Ini hanya contoh sederhana dari penggunaan Virtual DOM dalam React. Dalam aplikasi yang lebih kompleks, Virtual DOM akan bekerja dengan lebih kompleks dan efisien untuk menangani perubahan yang lebih kompleks pada tampilan aplikasi web.