` - Semua itu akan mengarah pada pembangunan kembali sepenuhnya.
-When tearing down a tree, old DOM nodes are destroyed. Component instances receive `componentWillUnmount()`. When building up a new tree, new DOM nodes are inserted into the DOM. Component instances receive `componentWillMount()` and then `componentDidMount()`. Any state associated with the old tree is lost.
+Saat meruntuhkan sebuah pohon, node DOM lama dihancurkan. *Instance* komponen menerima `componentWillUnmount()`. Saat membangun pohon baru, node DOM baru dimasukan ke dalam DOM. *Instance* komponen menerima `componentWillMount()` lalu `componentDidMount()`. *State* manapun yang terkait dengan pohon lama akan hilang.
-Any components below the root will also get unmounted and have their state destroyed. For example, when diffing:
+Komponen manapun di bawah *root* juga akan dilepas dan *state* nya dihancurkan. Sebagai contoh, saat membedakan:
```xml
@@ -40,12 +40,11 @@ Any components below the root will also get unmounted and have their state destr
```
+Ini akan menghancurkan `Counter` lama dan memasang kembali yang baru.
-This will destroy the old `Counter` and remount a new one.
+### Elemen DOM Dari Jenis Yang Sama {#dom-elements-of-the-same-type}
-### DOM Elements Of The Same Type {#dom-elements-of-the-same-type}
-
-When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM node, and only updates the changed attributes. For example:
+Saat membandingkan dua elemen DOM React dari jenis yang sama, React melihat atribut keduanya, menjaga node DOM dengan dasar yang sama, dan hanya memperbarui atribut yang berubah. Sebagai contoh:
```xml
@@ -53,9 +52,9 @@ When comparing two React DOM elements of the same type, React looks at the attri
```
-By comparing these two elements, React knows to only modify the `className` on the underlying DOM node.
+Dengan membandingkan dua elemen ini, React tahu untuk hanya memodifikasi `className` pada node DOM yang mendasarinya.
-When updating `style`, React also knows to update only the properties that changed. For example:
+Saat memperbarui `style`, React juga tahu untuk hanya memperbarui properti yang berubah. Sebagai contoh:
```xml
@@ -63,21 +62,21 @@ When updating `style`, React also knows to update only the properties that chang
```
-When converting between these two elements, React knows to only modify the `color` style, not the `fontWeight`.
+Saat mengkonversi diantara dua elemen ini, React tahu untuk hanya memodifikasi *style* `color`, bukan `fontWeight`.
-After handling the DOM node, React then recurses on the children.
+Setelah menangani node DOM, React lalu berulang pada *children*.
-### Component Elements Of The Same Type {#component-elements-of-the-same-type}
+### Elemen Komponen Dari Jenis Yang Sama {#component-elements-of-the-same-type}
-When a component updates, the instance stays the same, so that state is maintained across renders. React updates the props of the underlying component instance to match the new element, and calls `componentWillReceiveProps()` and `componentWillUpdate()` on the underlying instance.
+Saat komponen diperbarui, *instance*-nya tetap sama, jadi *state* tersebut terjaga di berbagai *render*. React memperbarui *prop* yang mendasari *instance* komponen untuk mencocokan elemen baru, dan memanggil `componentWillReceiveProps()` dan `componentWillUpdate()` di *instance* yang mendasari.
-Next, the `render()` method is called and the diff algorithm recurses on the previous result and the new result.
+Selanjutnya, metode `render()` dipanggil dan algoritma pembeda berulang pada hasil sebelumnya dan hasil yang baru.
-### Recursing On Children {#recursing-on-children}
+### Berulang Di Children {#recursing-on-children}
-By default, when recursing on the children of a DOM node, React just iterates over both lists of children at the same time and generates a mutation whenever there's a difference.
+Secara standar, saat berulang pada *children* node DOM, React hanya melakukan iterasi di atas kedua daftar *children* di waktu bersamaan dan menghasilkan mutasi setiap kali ada perbedaan.
-For example, when adding an element at the end of the children, converting between these two trees works well:
+Sebagai contoh, saat menambahkan sebuah elemen pada akhir *children*, mengkonversi diantara kedua pohon ini bekerja dengan baik:
```xml
@@ -92,9 +91,9 @@ For example, when adding an element at the end of the children, converting betwe
```
-React will match the two `
first` trees, match the two `
second` trees, and then insert the `
third` tree.
+React akan mencocokan kedua pohon `
first`, mencocokan kedua pohon `
second`, dan lalu memasukan pohon `
third`.
-If you implement it naively, inserting an element at the beginning has worse performance. For example, converting between these two trees works poorly:
+Jika Anda mengimplementasikan dengan naifnya, memasukan sebuah elemen di awal memiliki kinerja lebih buruk. Sebagai contoh, mengkonversi diantara kedua pohon ini bekerja dengan buruk:
```xml
@@ -109,11 +108,11 @@ If you implement it naively, inserting an element at the beginning has worse per
```
-React will mutate every child instead of realizing it can keep the `
Duke` and `
Villanova` subtrees intact. This inefficiency can be a problem.
+React akan mengubah setiap *child* daripada menyadari itu dapat menjaga keutuhan sub-pohon `
Duke` dan `
Villanova`. Ketidakefisienan ini bisa menjadi masalah.
-### Keys {#keys}
+### Key {#keys}
-In order to solve this issue, React supports a `key` attribute. When children have keys, React uses the key to match children in the original tree with children in the subsequent tree. For example, adding a `key` to our inefficient example above can make the tree conversion efficient:
+Untuk mengatasi masalah ini, React mendukung atribut `key`. Saat *children* memiliki *key*, React menggunakan *key* untuk mencocokan *children* di dalam pohon yang asli dengan *children* di dalam pohon selanjutnya. Sebagai contoh, menambahkan `key` pada contoh tidak efisien kita diatas dapat membuat konversi pohon efisien:
```xml
@@ -128,30 +127,30 @@ In order to solve this issue, React supports a `key` attribute. When children ha
```
-Now React knows that the element with key `'2014'` is the new one, and the elements with the keys `'2015'` and `'2016'` have just moved.
+Sekarang React tahu bahwa elemen dengan *key* `'2014'` adalah yang baru, dan elemen dengan *key* `'2015'` dan `'2016'` telah dipindahkan.
-In practice, finding a key is usually not hard. The element you are going to display may already have a unique ID, so the key can just come from your data:
+Dalam prakteknya, menemukan sebuah *key* biasanya tidak sulit. Elemen yang akan Anda tampilkan mungkin sudah memiliki ID yang unik, jadi *key*-nya bisa saja berasal dari data Anda:
```js
{item.name}
```
-When that's not the case, you can add a new ID property to your model or hash some parts of the content to generate a key. The key only has to be unique among its siblings, not globally unique.
+Saat itu bukan kasusnya, Anda dapat menambahkan properti ID baru pada model Anda atau *hash* beberapa bagian dari konten untuk menghasilkan sebuah *key*. *Key* hanya harus unik antar *sibling*, bukan unik secara global.
-As a last resort, you can pass an item's index in the array as a key. This can work well if the items are never reordered, but reorders will be slow.
+Sebagai pilihan terakhir, Anda dapat mengoper sebuah indeks *item* dalam senarai (*array*) sebagai *key*. Ini dapat bekerja dengan baik jika *item-item* tidak pernah diurutkan kembali, tetapi pengurutan kembali akan menjadi lambat.
-Reorders can also cause issues with component state when indexes are used as keys. Component instances are updated and reused based on their key. If the key is an index, moving an item changes it. As a result, component state for things like uncontrolled inputs can get mixed up and updated in unexpected ways.
+Pengurutan kembali juga dapat menyebabkan masalah dengan *state* komponen saat indeks digunakan sebagai *key*. *Instance* komponen diperbarui dan digunakan kembali berdasarkan *key*-nya. Jika *key* adalah indeks, memindahkan sebuah *item* akan mengubahnya. Sebagai hasil, *state* komponen untuk hal seperti *uncontrolled input* dapat tercampur dan diperbarui dengan cara yang tidak terduga.
-[Here](codepen://reconciliation/index-used-as-key) is an example of the issues that can be caused by using indexes as keys on CodePen, and [here](codepen://reconciliation/no-index-used-as-key) is an updated version of the same example showing how not using indexes as keys will fix these reordering, sorting, and prepending issues.
+[Disini](codepen://reconciliation/index-used-as-key) adalah contoh masalah yang dapat disebabkan oleh penggunaan indeks sebagai *key* pada CodePen, dan [disini](codepen://reconciliation/no-index-used-as-key) adalah versi terbaru dari contoh yang sama menunjukan bagaimana agar tidak menggunakan indeks sebagai *key* akan memperbaiki pengurutan kembali, penyortiran, dan masalah yang saling terkait ini.
-## Tradeoffs {#tradeoffs}
+## Pengorbanan {#tradeoffs}
-It is important to remember that the reconciliation algorithm is an implementation detail. React could rerender the whole app on every action; the end result would be the same. Just to be clear, rerender in this context means calling `render` for all components, it doesn't mean React will unmount and remount them. It will only apply the differences following the rules stated in the previous sections.
+Penting untuk diingat bahwa algoritma rekonsiliasi adalah sebuah detail implementasi. React dapat *render* kembali seluruh aplikasi pada setiap aksi; hasil akhirnya akan sama. Untuk lebih jelasnya, *render* kembali di konteks ini berarti memanggil `render` untuk semua komponen, ini bukan berarti React akan melepaskan dan memasangnya kembali. Itu hanya akan menerapkan perbedaan mengikuti aturan yang disebutkan di bagian sebelumnya.
-We are regularly refining the heuristics in order to make common use cases faster. In the current implementation, you can express the fact that a subtree has been moved amongst its siblings, but you cannot tell that it has moved somewhere else. The algorithm will rerender that full subtree.
+Kita secara teratur memperbaiki heuristik untuk membuat contoh kasus umum menjadi lebih cepat. Dalam implementasi saat ini, Anda dapat mengekspresikan fakta bahwa sebuah sub-pohon telah dipindahkan diantara *sibling*, tetapi Anda tidak dapat mengatakan bahwa itu telah dipindahkan ke tempat lain. Algoritma akan *render* ulang sub-pohon itu sepenuhnya.
-Because React relies on heuristics, if the assumptions behind them are not met, performance will suffer.
+Karena React bergantung pada heuristik, jika asumsi dibelakang mereka tidak terpenuhi, kinerja akan menderita.
-1. The algorithm will not try to match subtrees of different component types. If you see yourself alternating between two component types with very similar output, you may want to make it the same type. In practice, we haven't found this to be an issue.
+1. Algoritma tidak akan mencoba untuk mencocokan sub-pohon dari jenis komponen yang berbeda. Jika Anda melihat diri Anda sendiri bergantian antara dua jenis komponen dengan keluaran yang sangat mirip, Anda mungkin ingin untuk membuatnya menjadi jenis yang sama. Dalam prakteknya, Kita belum menemukan ini sebagai masalah.
-2. Keys should be stable, predictable, and unique. Unstable keys (like those produced by `Math.random()`) will cause many component instances and DOM nodes to be unnecessarily recreated, which can cause performance degradation and lost state in child components.
+2. *Key* harus stabil, dapat diprediksi, dan unik. *Key* yang tidak stabil (seperti yang diproduksi oleh `Math.random()`) akan menyebabkan banyak *instance* komponen dan node DOM tidak perlu diciptakan kembali, yang dapat menyebabkan penurunan kinerja dan *state* hilang dalam komponen *child*.