Formula Rahasia React: Menyelami Algoritma Rekonsiliasi dan Diffing Virtual DOM

` sederhana mungkin direpresentasikan seperti ini:

{ type: 'div', props: { className: 'container', children: 'Hello World' } }

Karena ini hanyalah objek JavaScript, membuat dan memanipulasinya sangat cepat. Proses ini tidak melibatkan interaksi apa pun dengan API browser, sehingga tidak ada reflow atau repaint.

Bagaimana Cara Kerja Virtual DOM?

VDOM memungkinkan pendekatan deklaratif dalam pengembangan UI. Alih-alih memberitahu browser bagaimana cara mengubah DOM langkah demi langkah (imperatif), Anda cukup mendeklarasikan seperti apa tampilan UI untuk state tertentu (deklaratif). React yang akan menangani sisanya.

Prosesnya terlihat seperti ini:

1. Render Awal: Saat aplikasi Anda pertama kali dimuat, React membuat pohon Virtual DOM lengkap untuk UI Anda dan menggunakannya untuk menghasilkan DOM asli awal.
2. Pembaruan State: Ketika state aplikasi berubah (misalnya, pengguna mengklik tombol), React membuat pohon Virtual DOM yang baru yang mencerminkan state baru tersebut.
3. Diffing: React sekarang memiliki dua pohon Virtual DOM di memori: yang lama (sebelum perubahan state) dan yang baru. Kemudian, React menjalankan algoritma "diffing"-nya untuk membandingkan kedua pohon ini dan mengidentifikasi perbedaan yang persis.
4. Batching dan Pembaruan: React menghitung serangkaian operasi yang paling efisien dan minimal yang diperlukan untuk memperbarui DOM asli agar sesuai dengan Virtual DOM yang baru. Operasi-operasi ini dikelompokkan (batch) bersama dan diterapkan ke DOM asli dalam satu urutan yang dioptimalkan.

Dengan melakukan batching pembaruan, React meminimalkan interaksi langsung dengan DOM yang lambat, sehingga meningkatkan performa secara signifikan. Inti dari efisiensi ini terletak pada langkah "diffing", yang secara formal dikenal sebagai algoritma Rekonsiliasi.

Jantung React: Algoritma Rekonsiliasi

Rekonsiliasi adalah proses di mana React memperbarui DOM agar sesuai dengan pohon komponen terbaru. Algoritma yang melakukan perbandingan ini adalah yang kita sebut "algoritma diffing."

Secara teoretis, menemukan jumlah transformasi minimal untuk mengubah satu pohon menjadi pohon lain adalah masalah yang sangat kompleks, dengan kompleksitas algoritma dalam urutan O(n³), di mana n adalah jumlah node di pohon. Ini akan terlalu lambat untuk aplikasi dunia nyata. Untuk mengatasi ini, tim React membuat beberapa observasi brilian tentang bagaimana aplikasi web biasanya berperilaku dan mengimplementasikan algoritma heuristik yang jauh lebih cepat—beroperasi dalam waktu O(n).

Heuristik: Membuat Diffing Cepat dan Dapat Diprediksi

Algoritma diffing React dibangun di atas dua asumsi utama atau heuristik:

Heuristik 1: Tipe Elemen yang Berbeda Menghasilkan Pohon yang Berbeda

Ini adalah aturan pertama dan paling sederhana. Saat membandingkan dua node VDOM, React pertama-tama melihat tipenya. Jika tipe elemen root berbeda, React mengasumsikan pengembang tidak ingin mencoba mengubah satu menjadi yang lain. Sebaliknya, React mengambil pendekatan yang lebih drastis tetapi dapat diprediksi:

• React meruntuhkan seluruh pohon lama, melakukan unmount pada semua komponen lama dan menghancurkan state mereka.
• React membangun pohon yang benar-benar baru dari awal berdasarkan tipe elemen yang baru.

Sebagai contoh, perhatikan perubahan ini:

Sebelum: <div><Counter /></div>
Sesudah: <span><Counter /></span>

Meskipun komponen anak `Counter` sama, React melihat bahwa root telah berubah dari `div` menjadi `span`. React akan sepenuhnya melakukan unmount pada `div` lama dan instance `Counter` di dalamnya (kehilangan state-nya) dan kemudian me-mount `span` baru dan instance `Counter` yang baru.

Poin Penting: Hindari mengubah tipe elemen root dari sebuah sub-pohon komponen jika Anda ingin mempertahankan state-nya atau menghindari render ulang penuh dari sub-pohon tersebut.

Heuristik 2: Pengembang Dapat Memberi Petunjuk Elemen yang Stabil dengan Prop `key`

Ini bisa dibilang heuristik paling penting untuk dipahami dan diterapkan dengan benar oleh pengembang. Ketika React membandingkan daftar elemen anak, perilaku default-nya adalah mengulangi kedua daftar anak secara bersamaan dan menghasilkan mutasi di mana pun ada perbedaan.

Masalah dengan Diffing Berbasis Indeks

Mari kita bayangkan kita memiliki daftar item dan kita menambahkan item baru di awal daftar tanpa menggunakan key.

Daftar Awal:

• Item B
• Item C

Daftar yang Diperbarui (tambahkan 'Item A' di awal):

• Item A
• Item B
• Item C

Tanpa key, React melakukan perbandingan sederhana berbasis indeks:

1. React membandingkan item lama di indeks 0 ('Item B') dengan item baru di indeks 0 ('Item A'). Keduanya berbeda, jadi React memutasi item pertama.
2. React membandingkan item lama di indeks 1 ('Item C') dengan item baru di indeks 1 ('Item B'). Keduanya berbeda, jadi React memutasi item kedua.
3. React melihat ada item baru di indeks 2 ('Item C') dan menyisipkannya.

Ini sangat tidak efisien. React telah melakukan dua mutasi yang tidak perlu dan satu penyisipan, padahal yang dibutuhkan hanyalah satu penyisipan di awal. Jika item-item daftar ini adalah komponen kompleks dengan state-nya sendiri, ini bisa menyebabkan masalah performa dan bug yang serius, karena state bisa tercampur antar komponen.

Kekuatan Prop `key`

Prop `key` memberikan solusi. Ini adalah atribut string khusus yang perlu Anda sertakan saat membuat daftar elemen. Key memberi React identitas yang stabil untuk setiap elemen.

Mari kita lihat kembali contoh yang sama, tapi kali ini dengan key yang stabil dan unik:

Daftar Awal:

• Item B
• Item C

Daftar yang Diperbarui:

• Item A
• Item B
• Item C

Sekarang, proses diffing React jauh lebih pintar:

1. React melihat anak-anak dari daftar baru dan menemukan elemen dengan key 'b' dan 'c'.
2. React tahu bahwa elemen dengan key 'b' dan 'c' sudah ada di daftar lama, jadi React hanya memindahkannya.
3. React melihat bahwa ada elemen baru dengan key 'a' yang sebelumnya tidak ada, jadi React membuat dan menyisipkannya.

Ini jauh lebih efisien. React dengan benar mengidentifikasi bahwa ia hanya perlu melakukan satu penyisipan. Komponen yang terkait dengan key 'b' dan 'c' dipertahankan, menjaga state internal mereka.

Aturan Penting untuk Key: Key harus stabil, dapat diprediksi, dan unik di antara saudara-saudaranya. Menggunakan indeks array sebagai key (`items.map((item, index) =>

...

)`) adalah anti-pola jika daftar tersebut dapat diurutkan ulang, difilter, atau item ditambahkan/dihapus dari tengah, karena ini menyebabkan masalah yang sama seperti tidak memiliki key sama sekali. Key terbaik adalah pengidentifikasi unik dari data Anda, seperti ID database.

Evolusi: Dari Arsitektur Stack ke Fiber

Algoritma rekonsiliasi yang dijelaskan di atas adalah fondasi React selama bertahun-tahun. Namun, ia memiliki satu batasan utama: ia sinkron dan memblokir. Implementasi asli ini sekarang disebut sebagai Stack Reconciler.

Cara Lama: Stack Reconciler

Di Stack Reconciler, ketika pembaruan state memicu render ulang, React akan secara rekursif melintasi seluruh pohon komponen, menghitung perubahan, dan menerapkannya ke DOM—semuanya dalam satu urutan tunggal yang tidak terganggu. Untuk pembaruan kecil, ini baik-baik saja. Tetapi untuk pohon komponen yang besar, proses ini bisa memakan waktu yang signifikan (misalnya, lebih dari 16ms), memblokir thread utama browser. Ini akan menyebabkan UI menjadi tidak responsif, menyebabkan frame yang hilang, animasi yang tersendat-sendat, dan pengalaman pengguna yang buruk.

Memperkenalkan React Fiber (React 16+)

Untuk mengatasi masalah ini, tim React melakukan proyek multi-tahun untuk menulis ulang sepenuhnya algoritma rekonsiliasi inti. Hasilnya, yang dirilis di React 16, disebut React Fiber.

Arsitektur Fiber dirancang dari awal untuk memungkinkan konkurensi—kemampuan React untuk mengerjakan banyak tugas sekaligus dan beralih di antara mereka berdasarkan prioritas.

Sebuah "fiber" adalah objek JavaScript biasa yang mewakili satu unit kerja. Objek ini menyimpan informasi tentang sebuah komponen, inputnya (props), dan outputnya (children). Alih-alih traversal rekursif yang tidak dapat diinterupsi, React sekarang memproses linked list dari node fiber, satu per satu.

Arsitektur baru ini membuka beberapa kemampuan kunci:

• Render Inkremental: React dapat memecah pekerjaan rendering menjadi potongan-potongan kecil dan menyebarkannya ke beberapa frame.
• Prioritas: React dapat menetapkan tingkat prioritas yang berbeda untuk berbagai jenis pembaruan. Misalnya, pengguna yang mengetik di bidang input memiliki prioritas lebih tinggi daripada data yang diambil di latar belakang.
• Dapat Dijeda dan Dibatalkan: React dapat menjeda pekerjaan pada pembaruan prioritas rendah untuk menangani yang berprioritas tinggi, dan bahkan dapat membatalkan atau menggunakan kembali pekerjaan yang tidak lagi diperlukan.

Dua Fase Fiber

Di bawah Fiber, proses rendering dibagi menjadi dua fase yang berbeda:

1. Fase Render/Rekonsiliasi (Asinkron): Dalam fase ini, React memproses node fiber untuk membangun pohon "work-in-progress". React memanggil metode `render` komponen dan menjalankan algoritma diffing untuk menentukan perubahan apa yang perlu dibuat pada DOM. Yang terpenting, fase ini dapat diinterupsi. React dapat menjeda pekerjaan ini untuk menangani sesuatu yang lebih penting, dan melanjutkannya nanti. Karena dapat diinterupsi, React tidak menerapkan perubahan DOM aktual selama fase ini untuk menghindari status UI yang tidak konsisten.
2. Fase Commit (Sinkron): Setelah pohon work-in-progress selesai, React memasuki fase commit. React mengambil perubahan yang telah dihitung dan menerapkannya ke DOM asli. Fase ini sinkron dan tidak dapat diinterupsi. Ini memastikan bahwa pengguna selalu melihat UI yang konsisten. Metode lifecycle seperti `componentDidMount` dan `componentDidUpdate`, serta hook `useLayoutEffect` dan `useEffect`, dieksekusi selama fase ini.

Arsitektur Fiber adalah dasar bagi banyak fitur modern React, termasuk `Suspense`, rendering konkuren, `useTransition`, dan `useDeferredValue`, yang semuanya membantu pengembang membangun antarmuka pengguna yang lebih responsif dan lancar.

Strategi Optimisasi Praktis untuk Pengembang

Memahami proses rekonsiliasi React memberi Anda kekuatan untuk menulis kode yang lebih beperforma. Berikut adalah beberapa strategi praktis:

1. Selalu Gunakan Key yang Stabil dan Unik untuk Daftar

Hal ini tidak bisa cukup ditekankan. Ini adalah optimisasi tunggal yang paling penting untuk daftar. Gunakan ID unik dari data Anda (misalnya, `product.id`). Hindari menggunakan indeks array kecuali daftarnya benar-benar statis dan tidak akan pernah berubah.

2. Hindari Render Ulang yang Tidak Perlu

Sebuah komponen akan di-render ulang jika state-nya berubah atau induknya di-render ulang. Terkadang, sebuah komponen di-render ulang meskipun output-nya akan identik. Anda dapat mencegah ini menggunakan:

• `React.memo()`: Sebuah higher-order component untuk komponen fungsi. Ini melakukan perbandingan dangkal (shallow comparison) dari props komponen. Jika props tidak berubah, React akan melewatkan render ulang komponen dan menggunakan kembali hasil render terakhir.
• `useCallback()`: Fungsi yang didefinisikan di dalam komponen dibuat ulang pada setiap render. Jika Anda meneruskan fungsi-fungsi ini sebagai props ke komponen anak yang dibungkus dengan `React.memo`, anak tersebut akan di-render ulang karena prop fungsi tersebut secara teknis adalah fungsi baru setiap saat. `useCallback` melakukan memoization pada fungsi itu sendiri, memastikan ia hanya dibuat ulang jika dependensinya berubah.
• `useMemo()`: Mirip dengan `useCallback`, tetapi untuk nilai. Ini melakukan memoization pada hasil dari kalkulasi yang mahal. Kalkulasi hanya dijalankan ulang jika salah satu dependensinya telah berubah. Ini berguna untuk mencegah komputasi yang mahal pada setiap render dan untuk menjaga referensi objek/array yang stabil yang diteruskan sebagai props.

3. Komposisi Komponen yang Cerdas

Cara Anda menyusun komponen dapat memiliki dampak signifikan pada performa. Jika sebagian dari state komponen Anda sering diperbarui, coba isolasikan dari bagian yang tidak.

Misalnya, alih-alih memiliki satu komponen besar di mana bidang input yang sering berubah menyebabkan seluruh komponen di-render ulang, angkat state tersebut ke komponennya sendiri yang lebih kecil. Dengan cara ini, hanya komponen kecil yang di-render ulang saat pengguna mengetik.

4. Virtualisasi Daftar Panjang

Jika Anda perlu me-render daftar dengan ratusan atau ribuan item, bahkan dengan key yang benar, me-render semuanya sekaligus bisa lambat dan memakan banyak memori. Solusinya adalah virtualisasi atau windowing. Teknik ini melibatkan hanya me-render sebagian kecil item yang saat ini terlihat di viewport. Saat pengguna menggulir, item lama di-unmount, dan item baru di-mount. Library seperti `react-window` dan `react-virtualized` menyediakan komponen yang kuat dan mudah digunakan untuk mengimplementasikan pola ini.

Kesimpulan

Performa React bukanlah kebetulan; ini adalah hasil dari arsitektur yang disengaja dan canggih yang berpusat pada Virtual DOM dan algoritma Rekonsiliasi yang efisien. Dengan mengabstraksi manipulasi DOM langsung, React dapat mengelompokkan dan mengoptimalkan pembaruan dengan cara yang akan sangat rumit untuk dikelola secara manual.

Sebagai pengembang, kita adalah bagian penting dari proses ini. Dengan memahami heuristik dari algoritma diffing—menggunakan key dengan benar, melakukan memoization pada komponen dan nilai, dan menyusun aplikasi kita dengan bijaksana—kita dapat bekerja selaras dengan rekonsiliasi React, bukan melawannya. Evolusi ke arsitektur Fiber telah lebih jauh mendorong batas-batas dari apa yang mungkin, memungkinkan generasi baru UI yang lancar dan responsif.

Lain kali Anda melihat UI Anda diperbarui secara instan setelah perubahan state, luangkan waktu sejenak untuk mengapresiasi tarian elegan dari Virtual DOM, algoritma diffing, dan fase commit yang terjadi di balik layar. Pemahaman ini adalah kunci Anda untuk membangun aplikasi React yang lebih cepat, lebih efisien, dan lebih kuat untuk audiens global.