129. How Diffing Works Flashcards
Apa yang dimaksud dengan diffing dalam React?
Diffing adalah proses membandingkan dua versi pohon elemen (tree) untuk mengidentifikasi perubahan yang terjadi, seperti perubahan pada elemen, atribut, atau properti, yang kemudian digunakan untuk menentukan bagian dari DOM yang perlu diubah.
Mengapa algoritme diffing penting dalam React?
Algoritme diffing membantu React menghindari operasi DOM yang tidak perlu, meningkatkan kinerja dengan mengurangi jumlah perubahan yang diterapkan ke DOM, serta mempertahankan state komponen yang tidak berubah di antara render.
Sebutkan dua asumsi dasar yang digunakan dalam algoritme diffing React.
Dua elemen dengan tipe berbeda akan menghasilkan pohon yang berbeda.
Elemen dengan key yang sama dan konsisten antar-render dianggap sebagai elemen yang sama.
Apa yang terjadi jika elemen pada posisi yang sama dalam tree memiliki tipe yang berbeda setelah re-render?
React akan menganggap seluruh sub-pohon di bawah elemen tersebut sebagai elemen yang berbeda. Elemen lama, bersama dengan semua state-nya, akan dihancurkan, dan elemen baru akan dibangun ulang dari awal.
Berikan contoh perubahan elemen pada posisi yang sama.
Contoh:
// Render Pertama
<div>
<SearchBar></SearchBar>
</div>
// Render Kedua
<header>
<SearchBar></SearchBar>
</header>
Pada contoh ini, <div> berubah menjadi <header>, sehingga React akan menghancurkan <div> beserta seluruh isinya dan membangun <header> dari awal.
Apa yang terjadi pada state komponen jika tipe elemen berubah?
State dari komponen akan hilang karena elemen lama dihancurkan dan digantikan dengan elemen baru. Ini berlaku baik untuk elemen DOM maupun komponen React.
Apa yang terjadi jika elemen pada posisi yang sama di tree memiliki tipe yang sama di antara dua render?
Elemen tersebut akan tetap berada di DOM, hanya atribut dan properti yang berubah akan dimutasi, dan state yang ada di komponen akan dipertahankan.
Berikan contoh elemen yang sama dengan atribut yang berbeda.
// Render Pertama
<div>
<SearchBar></SearchBar>
</div>
// Render Kedua
<div>
<SearchBar></SearchBar>
</div>
Pada contoh ini, hanya atribut className dari <div> yang berubah, serta properti weight dari <SearchBar>. React hanya akan memutasi atribut dan properti tersebut tanpa menghancurkan elemen.</SearchBar>
Mengapa atribut key penting dalam daftar elemen di React?
Key digunakan untuk membedakan elemen dalam daftar dan menentukan apakah elemen tersebut telah berubah, tetap sama, atau perlu dihapus dan dibangun ulang. Dengan key, React bisa mengidentifikasi elemen yang tetap sama meskipun urutan elemen berubah.
Berikan contoh perubahan daftar elemen menggunakan key.
// Render Pertama
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
// Render Kedua
<ul>
<li>Apple</li>
<li>Blueberry</li>
</ul>
Pada contoh ini, hanya teks dari elemen dengan key “b” yang berubah dari “Banana” menjadi “Blueberry”. React akan mengubah teks tanpa menghancurkan elemen <li>.
Apa yang terjadi jika key pada elemen berubah?
Jika key elemen berubah, React akan menganggap elemen lama telah dihapus dan elemen baru telah ditambahkan. Ini menyebabkan penghancuran elemen lama, termasuk state-nya, dan pembuatan ulang elemen baru dengan state baru.
