Konsep Virtual DOM

Apa itu Virtual DOM?

Virtual DOM adalah konsep penting dalam React yang bertujuan untuk meningkatkan kinerja aplikasi web. Virtual DOM adalah representasi virtual dari DOM yang ada dalam memori. Ketika state atau data dalam aplikasi berubah, Virtual DOM akan diperbarui terlebih dahulu. React kemudian membandingkan Virtual DOM yang baru dengan versi sebelumnya menggunakan algoritme yang dikenal sebagai "reconciliation" atau "diffing". Hanya perubahan yang ditemukan akan diterapkan ke DOM asli, sehingga mengurangi jumlah manipulasi DOM yang mahal secara kinerja.

Bagaimana Virtual DOM Bekerja?

1. Render: Ketika state atau props berubah, React akan membuat representasi baru dari UI dalam Virtual DOM.

2. Diffing: React membandingkan versi baru dari Virtual DOM dengan versi sebelumnya untuk menentukan apa yang telah berubah.

3. Patching: React akan melakukan pembaruan langsung ke DOM asli hanya untuk elemen yang berubah. Ini dikenal sebagai "reconciliation".

Mengapa Menggunakan Virtual DOM?

Manipulasi langsung DOM adalah proses yang lambat karena setiap perubahan pada DOM mengharuskan browser untuk menghitung ulang gaya, tata letak, dan memperbarui tampilan. Dengan menggunakan Virtual DOM, React mengurangi jumlah operasi DOM yang perlu dilakukan, sehingga meningkatkan kinerja aplikasi.

Contoh Sederhana

Misalkan kita memiliki komponen yang merender daftar item. Setiap kali daftar diperbarui, React akan memperbarui Virtual DOM terlebih dahulu dan hanya mengubah elemen yang benar-benar diperlukan di DOM asli.

class ItemList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: ['Item 1', 'Item 2', 'Item 3'] };
  }

  addItem = () => {
    this.setState(state => ({
      items: [...state.items, `Item ${state.items.length + 1}`]
    }));
  };

  render() {
    return (
      <div>
        <ul>
          {this.state.items.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <button onClick={this.addItem}>Add Item</button>
      </div>
    );
  }
}

ReactDOM.render(<ItemList />, document.getElementById('root'));

Dalam contoh di atas, setiap kali tombol "Add Item" ditekan, state diperbarui dan React merender ulang komponen. Namun, dengan Virtual DOM, hanya perubahan baru yang ditambahkan ke daftar yang akan diperbarui di DOM asli, bukan seluruh daftar.

Sumber

• React Documentation - Reconciliation

• MDN Web Docs - Virtual DOM

• How the Virtual DOM Works in React

Virtual DOM adalah salah satu inovasi utama yang membuat React sangat efisien dalam memperbarui antarmuka pengguna, memungkinkan aplikasi untuk merespons perubahan dengan cepat tanpa mengorbankan kinerja.