From ba4a3113dad591991c134027ce63bd313f443649 Mon Sep 17 00:00:00 2001
From: Aroyan <43630681+aroyan@users.noreply.github.com>
Date: Sun, 23 Jun 2024 14:20:59 +0800
Subject: [PATCH] docs: translation for `Component(class)` (#571)

Co-authored-by: Resi Respati <resir014@gmail.com>
Co-authored-by: M Haidar Hanif <me@mhaidarhanif.com>
---
 src/content/reference/react/Component.md | 620 ++++++++++++-----------
 1 file changed, 311 insertions(+), 309 deletions(-)

diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md
index 46406ff5e..555b1ea24 100644
--- a/src/content/reference/react/Component.md
+++ b/src/content/reference/react/Component.md
@@ -4,18 +4,18 @@ title: Component
 
 <Pitfall>
 
-We recommend defining components as functions instead of classes. [See how to migrate.](#alternatives)
+Kami merekomendasikan mendefinisikan komponen sebagai fungsi daripada kelas. [Lihat bagaimana cara migrasi.](#alternatives)
 
 </Pitfall>
 
 <Intro>
 
-`Component` is the base class for the React components defined as [JavaScript classes.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) Class components are still supported by React, but we don't recommend using them in new code.
+`Component` adalah kelas dasar untuk komponen React yang didefinisikan sebagai [JavaScript classes.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) Kelas komponen masih didukung oleh React, tetapi kami tidak merekomendasikan untuk menggunakannya di kode baru.
 
 ```js
 class Greeting extends Component {
   render() {
-    return <h1>Hello, {this.props.name}!</h1>;
+    return <h1>Halo, {this.props.name}!</h1>;
   }
 }
 ```
@@ -26,33 +26,33 @@ class Greeting extends Component {
 
 ---
 
-## Reference {/*reference*/}
+## Referensi {/*reference*/}
 
 ### `Component` {/*component*/}
 
-To define a React component as a class, extend the built-in `Component` class and define a [`render` method:](#render)
+Untuk mendefinisikan sebuah komponen React sebagai sebuah kelas, *extend* kelas `Component` bawaan dan definisikan [*method* `render`:](#render)
 
 ```js
 import { Component } from 'react';
 
 class Greeting extends Component {
   render() {
-    return <h1>Hello, {this.props.name}!</h1>;
+    return <h1>Halo, {this.props.name}!</h1>;
   }
 }
 ```
 
-Only the `render` method is required, other methods are optional.
+Hanya *method* `render` yang diperlukan, *method* yang lain adalah opsional.
 
-[See more examples below.](#usage)
+[Lihat lebih banyak contoh di bawah](#usage)
 
 ---
 
 ### `context` {/*context*/}
 
-The [context](/learn/passing-data-deeply-with-context) of a class component is available as `this.context`. It is only available if you specify *which* context you want to receive using [`static contextType`](#static-contexttype) (modern) or [`static contextTypes`](#static-contexttypes) (deprecated).
+[Context](/learn/passing-data-deeply-with-context) dari sebuah *class component* tersedia sebagai `this.context`. Ini hanya tersedia jika Anda menentukan context *yang mana* yang ingin Anda terima menggunakan [`static contextType`](#static-contexttype) (modern) atau [`static contextTypes`](#static-contexttypes) (deprecated).
 
-A class component can only read one context at a time.
+*Class component* hanya bisa membaca satu *context* pada satu waktu.
 
 ```js {2,5}
 class Button extends Component {
@@ -73,9 +73,9 @@ class Button extends Component {
 
 <Note>
 
-Reading `this.context` in class components is equivalent to [`useContext`](/reference/react/useContext) in function components.
+Membaca `this.context` pada *class components* setara dengan [`useContext`](/reference/react/useContext) pada *function components*.
 
-[See how to migrate.](#migrating-a-component-with-context-from-a-class-to-a-function)
+[Lihat bagaimana cara migrasi.](#migrating-a-component-with-context-from-a-class-to-a-function)
 
 </Note>
 
@@ -83,12 +83,12 @@ Reading `this.context` in class components is equivalent to [`useContext`](/refe
 
 ### `props` {/*props*/}
 
-The props passed to a class component are available as `this.props`.
+*props* yang dioper ke sebuah *class component* tersedia sebagai `this.props`.
 
 ```js {3}
 class Greeting extends Component {
   render() {
-    return <h1>Hello, {this.props.name}!</h1>;
+    return <h1>Halo, {this.props.name}!</h1>;
   }
 }
 
@@ -97,9 +97,9 @@ class Greeting extends Component {
 
 <Note>
 
-Reading `this.props` in class components is equivalent to [declaring props](/learn/passing-props-to-a-component#step-2-read-props-inside-the-child-component) in function components.
+Membaca `this.props` pada *class components* setara dengan [mendeklarasikan props](/learn/passing-props-to-a-component#step-2-read-props-inside-the-child-component) pada *function components*.
 
-[See how to migrate.](#migrating-a-simple-component-from-a-class-to-a-function)
+[Lihat bagaimana cara migrasi.](#migrating-a-simple-component-from-a-class-to-a-function)
 
 </Note>
 
@@ -109,17 +109,17 @@ Reading `this.props` in class components is equivalent to [declaring props](/lea
 
 <Deprecated>
 
-This API will be removed in a future major version of React. [Use `createRef` instead.](/reference/react/createRef)
+API ini akan dihapus pada versi mayor React di masa depan. [Gunakan `createRef` sebagai gantinya.](/reference/react/createRef)
 
 </Deprecated>
 
-Lets you access [legacy string refs](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) for this component.
+Memungkinkan Anda mengakses [legacy string refs](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) pada komponen ini.
 
 ---
 
 ### `state` {/*state*/}
 
-The state of a class component is available as `this.state`. The `state` field must be an object. Do not mutate the state directly. If you wish to change the state, call `setState` with the new state.
+*State* dari *class component* tersedia sebagai `this.state`. *Field state* harus berupa objek. Jangan mengubah *state* secara langsung. Jika Anda ingin mengubah *state*, panggil `setState` dengan *state* baru.
 
 ```js {2-4,7-9,18}
 class Counter extends Component {
@@ -148,9 +148,9 @@ class Counter extends Component {
 
 <Note>
 
-Defining `state` in class components is equivalent to calling [`useState`](/reference/react/useState) in function components.
+Mendefinisikan `state` pada *class components* setara dengan [`useState`](/reference/react/useState) pada *function components*.
 
-[See how to migrate.](#migrating-a-component-with-state-from-a-class-to-a-function)
+[Lihat bagaimana cara migrasi.](#migrating-a-component-with-state-from-a-class-to-a-function)
 
 </Note>
 
@@ -158,7 +158,7 @@ Defining `state` in class components is equivalent to calling [`useState`](/refe
 
 ### `constructor(props)` {/*constructor*/}
 
-The [constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor) runs before your class component *mounts* (gets added to the screen). Typically, a constructor is only used for two purposes in React. It lets you declare state and [bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) your class methods to the class instance:
+[Constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor) dijalankan sebelum *class component* Anda *dipasang* (ditambahkan ke layar). Biasanya, sebuah *constructor* hanya digunakan untuk dua tujuan dalam React. Ini memungkinkan Anda mendeklarasikan *state* dan [bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) *class methods* Anda ke *class instance*:
 
 ```js {2-6}
 class Counter extends Component {
@@ -173,7 +173,7 @@ class Counter extends Component {
   }
 ```
 
-If you use modern JavaScript syntax, constructors are rarely needed. Instead, you can rewrite this code above using the [public class field syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields) which is supported both by modern browsers and tools like [Babel:](https://babeljs.io/)
+Jika Anda menggunakan sintaksis JavaScript modern, *constructors* jarang diperlukan. Sebagai gantinya, Anda dapat menulis ulang kode di atas menggunakan [public class field syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields) yang didukung oleh browser modern dan alat seperti [Babel:](https://babeljs.io/)
 
 ```js {2,4}
 class Counter extends Component {
@@ -184,31 +184,31 @@ class Counter extends Component {
   }
 ```
 
-A constructor should not contain any side effects or subscriptions.
+Sebuah *constructor* sebaiknya tidak mengandung *side effects* atau *subscriptions*.
 
-#### Parameters {/*constructor-parameters*/}
+#### Parameter {/*constructor-parameters*/}
 
-* `props`: The component's initial props.
+* `props`: Props awal komponen.
 
-#### Returns {/*constructor-returns*/}
+#### Kembalian {/*constructor-returns*/}
 
-`constructor` should not return anything.
+`constructor` seharusnya tidak mengembalikan apapun.
 
-#### Caveats {/*constructor-caveats*/}
+#### Catatan penting {/*constructor-caveats*/}
 
-* Do not run any side effects or subscriptions in the constructor. Instead, use [`componentDidMount`](#componentdidmount) for that.
+* Jangan menjalankan *side effects* atau *subscriptions* dalam *constructor*. Sebagai gantinya, gunakan [`componentDidMount`](#componentdidmount) untuk itu.
 
-* Inside a constructor, you need to call `super(props)` before any other statement. If you don't do that, `this.props` will be `undefined` while the constructor runs, which can be confusing and cause bugs.
+* Dalam sebuah *constructor*, Anda perlu memanggil `super(props)` sebelum pernyataan lainnya. Jika Anda tidak melakukannya, `this.props` akan menjadi `undefined` saat *constructor* berjalan, yang dapat membingungkan dan menyebabkan bug.
 
-* Constructor is the only place where you can assign [`this.state`](#state) directly. In all other methods, you need to use [`this.setState()`](#setstate) instead. Do not call `setState` in the constructor.
+* *Constructor* adalah satu-satunya tempat di mana Anda dapat langsung mengisi nilai [`this.state`](#state). Pada semua metode lainnya, Anda perlu menggunakan [`this.setState()`](#setstate) sebagai gantinya. Jangan memanggil `setState` di dalam *constructor*.
 
-* When you use [server rendering,](/reference/react-dom/server) the constructor will run on the server too, followed by the [`render`](#render) method. However, lifecycle methods like `componentDidMount` or `componentWillUnmount` will not run on the server.
+* Ketika Anda menggunakan [pe-render-an di server,](/reference/react-dom/server) *constructor* juga akan dijalankan di server, diikuti oleh metode [`render`](#render). Namun, *lifecycle methods* seperti `componentDidMount` atau `componentWillUnmount` tidak akan dijalankan di server.
 
-* When [Strict Mode](/reference/react/StrictMode) is on, React will call `constructor` twice in development and then throw away one of the instances. This helps you notice the accidental side effects that need to be moved out of the `constructor`.
+* Ketika [Strict Mode](/reference/react/StrictMode) diaktifkan, React akan memanggil `constructor` dua kali dalam pengembangan kemudian membuang salah satu *instances*. Ini membantu Anda memperhatikan *side effects* yang tidak disengaja yang perlu dipindahkan dari `constructor`.
 
 <Note>
 
-There is no exact equivalent for `constructor` in function components. To declare state in a function component, call [`useState`.](/reference/react/useState) To avoid recalculating the initial state, [pass a function to `useState`.](/reference/react/useState#avoiding-recreating-the-initial-state)
+Tidak ada yang setara dengan `constructor` pada *function components*. Untuk mendeklarasikan *state* pada *function component*, panggil [`useState`.](/reference/react/useState) Untuk menghindari perhitungan ulang pada *state* awal, [oper fungsi ke `useState`.](/reference/react/useState#avoiding-recreating-the-initial-state)
 
 </Note>
 
@@ -216,31 +216,31 @@ There is no exact equivalent for `constructor` in function components. To declar
 
 ### `componentDidCatch(error, info)` {/*componentdidcatch*/}
 
-If you define `componentDidCatch`, React will call it when some child component (including distant children) throws an error during rendering. This lets you log that error to an error reporting service in production.
+Jika Anda mendefinisikan `componentDidCatch`, React akan memanggilnya ketika beberapa komponen anak(termasuk anak-anak yang jauh) melempar sebuah kesalahan saat rendering. Hal ini memungkinkan Anda untuk mencatat kesalahan tersebut ke *error reporting service* di produksi.
 
-Typically, it is used together with [`static getDerivedStateFromError`](#static-getderivedstatefromerror) which lets you update state in response to an error and display an error message to the user. A component with these methods is called an *error boundary.*
+Biasanya, digunakan bersama dengan [`static getDerivedStateFromError`](#static-getderivedstatefromerror) yang memungkinkan Anda memperbarui *state* sebagai respons terhadap kesalahan dan menampilkan pesan kesalahan kepada pengguna. Komponen dengan metode-metode ini disebut sebagai *error boundary*.
 
-[See an example.](#catching-rendering-errors-with-an-error-boundary)
+[Lihat contoh.](#catching-rendering-errors-with-an-error-boundary)
 
-#### Parameters {/*componentdidcatch-parameters*/}
+#### Parameter {/*componentdidcatch-parameters*/}
 
-* `error`: The error that was thrown. In practice, it will usually be an instance of [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) but this is not guaranteed because JavaScript allows to [`throw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw) any value, including strings or even `null`.
+* `error`: *Error* yang dilempar. Pada praktiknya, biasanya akan berupa sebuah *instance* dari [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) tetapi ini tidak dijamin karena JavaScript memungkinkan untuk [`throw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw) nilai apa pun, termasuk string atau bahkan null.
 
-* `info`: An object containing additional information about the error. Its `componentStack` field contains a stack trace with the component that threw, as well as the names and source locations of all its parent components. In production, the component names will be minified. If you set up production error reporting, you can decode the component stack using sourcemaps the same way as you would do for regular JavaScript error stacks.
+* `info`: Objek yang berisi informasi tambahan tentang *error*. *Field* `componentStack` berisi jejak tumpukan(*stack trace*) dengan komponen yang melempar kesalahan, serta nama-nama dan lokasi sumber dari semua komponen induknya. Di produksi, nama komponennya akan di-*minified*. Jika Anda mengatur *error reporting* di produksi, Anda dapat mendekode jejak tumpukan(*stack trace*) komponen menggunakan *sourcemaps* dengan cara yang sama seperti yang Anda lakukan untuk jejak tumpukan(*stack trace*) kesalahan JavaScript biasa.
 
-#### Returns {/*componentdidcatch-returns*/}
+#### Kembalian {/*componentdidcatch-returns*/}
 
-`componentDidCatch` should not return anything.
+`componentDidCatch` seharusnya tidak mengembalikan apapun.
 
-#### Caveats {/*componentdidcatch-caveats*/}
+#### Catatan penting {/*componentdidcatch-caveats*/}
 
-* In the past, it was common to call `setState` inside `componentDidCatch` in order to update the UI and display the fallback error message. This is deprecated in favor of defining [`static getDerivedStateFromError`.](#static-getderivedstatefromerror)
+* Di masa lalu, umumnya memanggil `setState` di dalam `componentDidCatch` untuk memperbarui antarmuka pengguna(UI) dan menampilkan pesan kesalahan pengganti. Ini sudah ditinggalkan karena mendefinisikan [`static getDerivedStateFromError`.](#static-getderivedstatefromerror)
 
-* Production and development builds of React slightly differ in the way `componentDidCatch` handles errors. In development, the errors will bubble up to `window`, which means that any `window.onerror` or `window.addEventListener('error', callback)` will intercept the errors that have been caught by `componentDidCatch`. In production, instead, the errors will not bubble up, which means any ancestor error handler will only receive errors not explicitly caught by `componentDidCatch`.
+* Build produksi dan pengembangan dari React sedikit berbeda dalam cara `componentDidCatch` menangani kesalahan. Pada pengembangan, kesalahan akan naik ke `window`, yang berarti `window.onerror` atau `window.addEventListener('error', callback)` akan menangkap kesalahan yang telah ditangkap oleh `componentDidCatch`. Pada produksi, sebaliknya, kesalahan tidak akan naik, yang berarti penangan kesalahan induk hanya akan menerima kesalahan yang tidak ditangkap secara eksplisit oleh `componentDidCatch`.
 
 <Note>
 
-There is no direct equivalent for `componentDidCatch` in function components yet. If you'd like to avoid creating class components, write a single `ErrorBoundary` component like above and use it throughout your app. Alternatively, you can use the [`react-error-boundary`](https://github.com/bvaughn/react-error-boundary) package which does that for you.
+Belum ada yang setara dengan `componentDidCatch` pada *function components*. Jika Anda ingin menghindari membuat *class components*, tulis satu komponen `ErrorBoundary` seperti di atas dan gunakan di seluruh aplikasi Anda. Sebagai alternatif, Anda dapat menggunakan paket  [`react-error-boundary`](https://github.com/bvaughn/react-error-boundary) yang akan melakukannya untuk Anda.
 
 </Note>
 
@@ -248,9 +248,9 @@ There is no direct equivalent for `componentDidCatch` in function components yet
 
 ### `componentDidMount()` {/*componentdidmount*/}
 
-If you define the `componentDidMount` method, React will call it when your component is added *(mounted)* to the screen. This is a common place to start data fetching, set up subscriptions, or manipulate the DOM nodes.
+Jika Anda mendefinisikan metode `componentDidMount`, React akan memanggilnya ketika komponen Anda ditambahkan*(mounted)* ke layar. Ini adalah tempat umum untuk memulai pengambilan data, menyiapkan *subscriptions*, atau memanipulasi *DOM nodes*.
 
-If you implement `componentDidMount`, you usually need to implement other lifecycle methods to avoid bugs. For example, if `componentDidMount` reads some state or props, you also have to implement [`componentDidUpdate`](#componentdidupdate) to handle their changes, and [`componentWillUnmount`](#componentwillunmount) to clean up whatever `componentDidMount` was doing.
+Jika Anda mengimplementasikan `componentDidMount`, biasanya Anda juga perlu mengimplementasikan *lifecycle methods* lainnya untuk menghindari bug. Sebagai contoh, jika `componentDidMount` membaca sebuah *state* atau *props*, Anda juga harus mengimplementasikan [`componentDidUpdate`](#componentdidupdate) untuk menangani perubahan mereka, dan [`componentWillUnmount`](#componentwillunmount) untuk membersihkan apa pun yang dilakukan oleh `componentDidMount`.
 
 ```js {6-8}
 class ChatRoom extends Component {
@@ -280,27 +280,27 @@ class ChatRoom extends Component {
 }
 ```
 
-[See more examples.](#adding-lifecycle-methods-to-a-class-component)
+[Lihat contoh lebih banyak.](#adding-lifecycle-methods-to-a-class-component)
 
-#### Parameters {/*componentdidmount-parameters*/}
+#### Parameter {/*componentdidmount-parameters*/}
 
-`componentDidMount` does not take any parameters.
+`componentDidMount` tidak mengambil parameter apa pun.
 
-#### Returns {/*componentdidmount-returns*/}
+#### Kembalian {/*componentdidmount-returns*/}
 
-`componentDidMount` should not return anything.
+`componentDidMount` seharusnya tidak mengembalikan apapun.
 
-#### Caveats {/*componentdidmount-caveats*/}
+#### Catatan penting {/*componentdidmount-caveats*/}
 
-- When [Strict Mode](/reference/react/StrictMode) is on, in development React will call `componentDidMount`, then immediately call [`componentWillUnmount`,](#componentwillunmount) and then call `componentDidMount` again. This helps you notice if you forgot to implement `componentWillUnmount` or if its logic doesn't fully "mirror" what `componentDidMount` does.
+- Ketika [Strict Mode](/reference/react/StrictMode) aktif, di pengembangan React kan memanggil `componentDidMount`, kemudian segera memanggil [`componentWillUnmount`,](#componentwillunmount) dan kemudian memanggil `componentDidMount` lagi. Ini membantu Anda melihai jika Anda lupa untuk mengimplementasikan `componentWillUnmount` atau jika logikanya tidak sepenuhnya "mencerminkan" apa yang dilakukan oleh `componentDidMount`.
 
-- Although you may call [`setState`](#setstate) immediately in `componentDidMount`, it's best to avoid that when you can. It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the [`render`](#render) will be called twice in this case, the user won't see the intermediate state. Use this pattern with caution because it often causes performance issues. In most cases, you should be able to assign the initial state in the [`constructor`](#constructor) instead. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.
+- Meskipun Anda dapat langsung memanggil [`setState`](#setstate) di `componentDidMount`, sebaiknya hindari hal itu jika bisa. Ini akan memicu *render*-ing ekstra, tetapi itu akan terjadi sebelum browser memperbarui layar. Ini menjamin bahwa meskipun [`render`](#render) akan dipanggil dua kali dalam kasus ini, pengguna tidak akan melihat *state* perantara. Gunakan pola ini dengan hati-hati karena sering menyebabkan masalah performa. Dalam kebanyakan kasus, Anda seharusnya dapat menetapkan *state* awal di [`constructor`](#constructor) sebagai gantinya. Namun, dalam beberapa kasus seperti *modal* dan *tooltip* ketika Anda perlu mengukur sebuah *DOM node* sebelum me-*render* sesuatu yang bergantung pada ukuran atau posisinya.
 
 <Note>
 
-For many use cases, defining `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` together in class components is equivalent to calling [`useEffect`](/reference/react/useEffect) in function components. In the rare cases where it's important for the code to run before browser paint, [`useLayoutEffect`](/reference/react/useLayoutEffect) is a closer match.
+Untuk banyak kasus penggunaan, mendefinisikan `componentDidMount`, `componentDidUpdate`, dan `componentWillUnmount` bersama pada *class components* itu setara dengan memanggil [`useEffect`](/reference/react/useEffect) pada *function components*. Dalam kasus yang jarang terjadi di mana penting bagi kode untuk dijalankan sebelum tampilan browser dilakukan, [`useLayoutEffect`](/reference/react/useLayoutEffect) merupakan pilihan yang lebih tepat.
 
-[See how to migrate.](#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
+[Lihat bagaimana cara migrasi.](#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
 
 </Note>
 
@@ -308,9 +308,9 @@ For many use cases, defining `componentDidMount`, `componentDidUpdate`, and `com
 
 ### `componentDidUpdate(prevProps, prevState, snapshot?)` {/*componentdidupdate*/}
 
-If you define the `componentDidUpdate` method, React will call it immediately after your component has been re-rendered with updated props or state.  This method is not called for the initial render.
+Jika Anda mendefinisikan metode `componentDidUpdate`, React akan memanggilnya segera setelah komponen Anda di-*render* ulang dengan *prop* atau *state* yang diperbarui. Metode ini tidak dipanggil saat *render* awal.
 
-You can use it to manipulate the DOM after an update. This is also a common place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed). Typically, you'd use it together with [`componentDidMount`](#componentdidmount) and [`componentWillUnmount`:](#componentwillunmount)
+Anda dapat menggunakannya untuk memanipulasi DOM setelah pembaruan. Ini juga tempat umum untuk melakukan permintaan jaringan selama Anda membandingkan *prop* saat ini dengan *prop* sebelumnya (misalnya, permintaan jaringan mungkin tidak diperlukan jika *prop* tidak berubah). Biasanya, Anda akan menggunakannya bersama dengan [`componentDidMount`](#componentdidmount) dan [`componentWillUnmount`:](#componentwillunmount)
 
 ```js {10-18}
 class ChatRoom extends Component {
@@ -340,34 +340,34 @@ class ChatRoom extends Component {
 }
 ```
 
-[See more examples.](#adding-lifecycle-methods-to-a-class-component)
+[Lihat contoh lebih banyak.](#adding-lifecycle-methods-to-a-class-component)
 
 
-#### Parameters {/*componentdidupdate-parameters*/}
+#### Parameter {/*componentdidupdate-parameters*/}
 
-* `prevProps`: Props before the update. Compare `prevProps` to [`this.props`](#props) to determine what changed.
+* `prevProps`: Props sebelum update. Membandingkan `prevProps` ke [`this.props`](#props) untuk menentukan apa yang berubah.
 
-* `prevState`: State before the update. Compare `prevState` to [`this.state`](#state) to determine what changed.
+* `prevState`: State sebelum update. Membandingkan `prevState` ke [`this.state`](#state) untuk menentukan apa yang berubah.
 
-* `snapshot`: If you implemented [`getSnapshotBeforeUpdate`](#getsnapshotbeforeupdate), `snapshot` will contain the value you returned from that method. Otherwise, it will be `undefined`.
+* `snapshot`: Jika Anda mengimplementasikan [`getSnapshotBeforeUpdate`](#getsnapshotbeforeupdate), `snapshot` akan berisi nilai yang Anda kembalikan dari metode tersebut. Jika tidak, nilainya akan `undefined`.
 
-#### Returns {/*componentdidupdate-returns*/}
+#### Kembalian {/*componentdidupdate-returns*/}
 
-`componentDidUpdate` should not return anything.
+`componentDidUpdate` seharusnya tidak mengembalikan apapun.
 
-#### Caveats {/*componentdidupdate-caveats*/}
+#### Catatan penting {/*componentdidupdate-caveats*/}
 
-- `componentDidUpdate` will not get called if [`shouldComponentUpdate`](#shouldcomponentupdate) is defined and returns `false`.
+- `componentDidUpdate` tidak akan dipanggil jika [`shouldComponentUpdate`](#shouldcomponentupdate) didefinisikan dan mengembalikan `false`.
 
-- The logic inside `componentDidUpdate` should usually be wrapped in conditions comparing `this.props` with `prevProps`, and `this.state` with `prevState`. Otherwise, there's a risk of creating infinite loops.
+- Logika di dalam `componentDidUpdate` biasanya harus dibungkus dalam kondisi yang membandingkan `this.props` dengan `prevProps`, dan `this.state` dengan `prevState`. Jika tidak, ada risiko terjadi perulangan tak terbatas.
 
-- Although you may call [`setState`](#setstate) immediately in `componentDidUpdate`, it's best to avoid that when you can. It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the [`render`](#render) will be called twice in this case, the user won't see the intermediate state. This pattern often causes performance issues, but it may be necessary for rare cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.
+- Meskipun Anda dapat memanggil [`setState`](#setstate) langsung di dalam `componentDidUpdate`, sebaiknya hindari hal itu jika memungkinkan. Ini akan memicu *render* tambahan, tetapi akan terjadi sebelum browser memperbarui tampilan. Ini menjamin bahwa meskipun [`render`](#render) akan dipanggil dua kali dalam kasus ini, pengguna tidak akan melihat *intermediate state*. Pola ini sering menyebabkan isu *performance*, tetapi mungkin diperlukan untuk kasus-kasus langka seperti *modal* dan *tooltip* ketika Anda perlu mengukur node DOM sebelum me-*render* sesuatu yang bergantung pada ukuran atau posisinya.
 
 <Note>
 
-For many use cases, defining `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` together in class components is equivalent to calling [`useEffect`](/reference/react/useEffect) in function components. In the rare cases where it's important for the code to run before browser paint, [`useLayoutEffect`](/reference/react/useLayoutEffect) is a closer match.
+Untuk banyak kasus penggunaan, mendefinisikan `componentDidMount`, `componentDidUpdate`, dan `componentWillUnmount` bersama dalam *class components* setara dengan menggunakan [`useEffect`](/reference/react/useEffect) di *function components*. Dalam kasus yang jarang terjadi di mana penting bagi kode untuk dijalankan sebelum tampilan browser, [`useLayoutEffect`](/reference/react/useLayoutEffect) adalah pilihan yang lebih tepat.
 
-[See how to migrate.](#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
+[Lihat bagaimana cara migrasi.](#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
 
 </Note>
 ---
@@ -376,9 +376,9 @@ For many use cases, defining `componentDidMount`, `componentDidUpdate`, and `com
 
 <Deprecated>
 
-This API has been renamed from `componentWillMount` to [`UNSAFE_componentWillMount`.](#unsafe_componentwillmount) The old name has been deprecated. In a future major version of React, only the new name will work.
+API ini telah diganti namanya dari `componentWillMount` ke [`UNSAFE_componentWillMount`.](#unsafe_componentwillmount) Nama lama sudah tidak digunakan lagi. Di versi mayor React yang akan datang, hanya nama baru yang akan berfungsi.
 
-Run the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
+Jalankan [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) untuk memperbaruhi komponen Anda secara otomatis.
 
 </Deprecated>
 
@@ -388,9 +388,9 @@ Run the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-co
 
 <Deprecated>
 
-This API has been renamed from `componentWillReceiveProps` to [`UNSAFE_componentWillReceiveProps`.](#unsafe_componentwillreceiveprops) The old name has been deprecated. In a future major version of React, only the new name will work.
+API ini telah diganti namanya dari `componentWillReceiveProps` ke [`UNSAFE_componentWillReceiveProps`.](#unsafe_componentwillreceiveprops) Nama lama sudah tidak digunakan lagi. Di versi mayor React yang akan datang, hanya nama baru yang akan berfungsi.
 
-Run the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
+Jalankan [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) untuk memperbaruhi komponen Anda secara otomatis.
 
 </Deprecated>
 
@@ -400,9 +400,9 @@ Run the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-co
 
 <Deprecated>
 
-This API has been renamed from `componentWillUpdate` to [`UNSAFE_componentWillUpdate`.](#unsafe_componentwillupdate) The old name has been deprecated. In a future major version of React, only the new name will work.
+API ini telah diganti namanya dari `componentWillUpdate` ke [`UNSAFE_componentWillUpdate`.](#unsafe_componentwillupdate) Nama lama sudah tidak digunakan lagi. Di versi mayor React yang akan datang, hanya nama baru yang akan berfungsi.
 
-Run the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
+Jalankan [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) untuk memperbaruhi komponen Anda secara otomatis.
 
 </Deprecated>
 
@@ -410,9 +410,9 @@ Run the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-co
 
 ### `componentWillUnmount()` {/*componentwillunmount*/}
 
-If you define the `componentWillUnmount` method, React will call it before your component is removed *(unmounted)* from the screen. This is a common place to cancel data fetching or remove subscriptions.
+Jika Anda mendefinisikan metode `componentWillUnmount`, React akan memanggilnya sebelum komponen Anda dihapus *(unmounted)* dari layar. Ini adalah tempat umum untuk membatalkan pengambilan data atau menghapus langganan.
 
-The logic inside `componentWillUnmount` should "mirror" the logic inside [`componentDidMount`.](#componentdidmount) For example, if `componentDidMount` sets up a subscription, `componentWillUnmount` should clean up that subscription. If the cleanup logic in your `componentWillUnmount` reads some props or state, you will usually also need to implement [`componentDidUpdate`](#componentdidupdate) to clean up resources (such as subscriptions) corresponding to the old props and state.
+Logika di dalam `componentWillUnmount` harus "mencerminkan" logika di dalam [`componentDidMount`.](#componentdidmount) Sebagai contoh, jika `componentDidMount` mempersiapkan langganan, `componentWillUnmount` harus membersihkan langganan itu. Jika logika pembersihan di `componentWillUnmount` membaca beberapa *props* atau *state*, Anda biasanya juga perlu menerapkan [`componentDidUpdate`](#componentdidupdate) untuk membersihkan sumber daya (seperti langganan) yang sesuai dengan *props* dan *state* lama.
 
 ```js {20-22}
 class ChatRoom extends Component {
@@ -442,25 +442,25 @@ class ChatRoom extends Component {
 }
 ```
 
-[See more examples.](#adding-lifecycle-methods-to-a-class-component)
+[Lihat contoh lebih banyak.](#adding-lifecycle-methods-to-a-class-component)
 
-#### Parameters {/*componentwillunmount-parameters*/}
+#### Parameter {/*componentwillunmount-parameters*/}
 
-`componentWillUnmount` does not take any parameters.
+`componentWillUnmount` tidak mengambil parameter apapun.
 
-#### Returns {/*componentwillunmount-returns*/}
+#### Kembalian {/*componentwillunmount-returns*/}
 
-`componentWillUnmount` should not return anything.
+`componentWillUnmount` seharusnya tidak mengembalikan apapun.
 
-#### Caveats {/*componentwillunmount-caveats*/}
+#### Catatan penting {/*componentwillunmount-caveats*/}
 
-- When [Strict Mode](/reference/react/StrictMode) is on, in development React will call [`componentDidMount`,](#componentdidmount) then immediately call `componentWillUnmount`, and then call `componentDidMount` again. This helps you notice if you forgot to implement `componentWillUnmount` or if its logic doesn't fully "mirror" what `componentDidMount` does.
+- Ketika [Strict Mode](/reference/react/StrictMode) aktif, pada *development* React akan memanggil [`componentDidMount`,](#componentdidmount) kemudian segera memanggil `componentWillUnmount`, dan kemudian memanggil `componentDidMount` lagi. Ini membantu Anda memperhatikan jika Anda lupa menerapkan `componentWillUnmount` atau jika logikanya tidak sepenuhnya "mencerminkan" apa yang `componentDidMount` lakukan.
 
 <Note>
 
-For many use cases, defining `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` together in class components is equivalent to calling [`useEffect`](/reference/react/useEffect) in function components. In the rare cases where it's important for the code to run before browser paint, [`useLayoutEffect`](/reference/react/useLayoutEffect) is a closer match.
+Untuk banyak kasus penggunaan, mendefinisikan `componentDidMount`, `componentDidUpdate`, dan `componentWillUnmount` bersama pada *class components* setara dengan memanggil [`useEffect`](/reference/react/useEffect) pada *function components*. Dalam kasus yang jarang terjadi di mana penting bagi kode untuk dijalankan sebelum tampilan browser, [`useLayoutEffect`](/reference/react/useLayoutEffect) adalah pilihan yang lebih tepat.
 
-[See how to migrate.](#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
+[Lihat bagaimana cara migrasi.](#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
 
 </Note>
 
@@ -468,27 +468,27 @@ For many use cases, defining `componentDidMount`, `componentDidUpdate`, and `com
 
 ### `forceUpdate(callback?)` {/*forceupdate*/}
 
-Forces a component to re-render.
+Memaksa komponen untuk me-*render* ulang.
 
-Usually, this is not necessary. If your component's [`render`](#render) method only reads from [`this.props`](#props), [`this.state`](#state), or [`this.context`,](#context) it will re-render automatically when you call [`setState`](#setstate) inside your component or one of its parents. However, if your component's `render` method reads directly from an external data source, you have to tell React to update the user interface when that data source changes. That's what `forceUpdate` lets you do.
+Biasanya, ini tidak perlu. Jika metode [`render`](#render) komponen Anda hanya baca(only reads) dari [`this.props`](#props), [`this.state`](#state), atau [`this.context`,](#context) akan me-*render* ulang otomatis ketika Anda memanggil [`setState`](#setstate) di dalam komponen Anda atau salah satu dari *parent*. Namun, Jika metode `render` komponen Anda membaca secara langsung dari sumber data eksternal, Anda harus memberi tahu React untuk memperbarui antarmuka pengguna saat sumber data itu berubah. Itulah yang `forceUpdate` memungkinkan Anda melakukannya.
 
-Try to avoid all uses of `forceUpdate` and only read from `this.props` and `this.state` in `render`.
+Cobalah untuk menghindari semua penggunaan `forceUpdate` dan hanya membaca dari `this.props` dan `this.state` pada `render`.
 
-#### Parameters {/*forceupdate-parameters*/}
+#### Parameter {/*forceupdate-parameters*/}
 
-* **optional** `callback` If specified, React will call the `callback` you've provided after the update is committed.
+* **optional** `callback` Jika ditentukan, React akan memanggil `callback` yang Anda berikan setelah pembaruan dilakukan.
 
-#### Returns {/*forceupdate-returns*/}
+#### Kembalian {/*forceupdate-returns*/}
 
-`forceUpdate` does not return anything.
+`forceUpdate` tidak mengembalikan apapun.
 
-#### Caveats {/*forceupdate-caveats*/}
+#### Catatan penting {/*forceupdate-caveats*/}
 
-- If you call `forceUpdate`, React will re-render without calling [`shouldComponentUpdate`.](#shouldcomponentupdate)
+- Jika Anda memanggil `forceUpdate`, React akan me-*render* ulang tanpa memanggil [`shouldComponentUpdate`.](#shouldcomponentupdate)
 
 <Note>
 
-Reading an external data source and forcing class components to re-render in response to its changes with `forceUpdate` has been superseded by [`useSyncExternalStore`](/reference/react/useSyncExternalStore) in function components.
+Membaca sumber data eksternal dan memaksa komponen kelas untuk me-*render* ulang sebagai respons terhadap perubahannya `forceUpdate` telah digantikan oleh [`useSyncExternalStore`](/reference/react/useSyncExternalStore) pada *function components*.
 
 </Note>
 
@@ -498,19 +498,19 @@ Reading an external data source and forcing class components to re-render in res
 
 <Deprecated>
 
-This API will be removed in a future major version of React. [Use `Context.Provider` instead.](/reference/react/createContext#provider)
+API ini akan dihapus di versi mayor React yang akan datang. [Gunakan `Context.Provider` sebagai gantinya.](/reference/react/createContext#provider)
 
 </Deprecated>
 
-Lets you specify the values for the [legacy context](https://reactjs.org/docs/legacy-context.html) is provided by this component.
+Memungkinkan Anda menentukan nilai untuk [legacy context](https://reactjs.org/docs/legacy-context.html) yang disediakan oleh komponen ini.
 
 ---
 
 ### `getSnapshotBeforeUpdate(prevProps, prevState)` {/*getsnapshotbeforeupdate*/}
 
-If you implement `getSnapshotBeforeUpdate`, React will call it immediately before React updates the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle method will be passed as a parameter to [`componentDidUpdate`.](#componentdidupdate)
+Jika Anda mengimplementasikan `getSnapshotBeforeUpdate`, React akan segera memanggilnya sebelum React memperbarui DOM. Ini memungkinkan komponen Anda untuk menangkap beberapa informasi dari DOM (e.g. posisi *scroll*) sebelum berpotensi diubah. Nilai apa pun yang dikembalikan oleh *lifecycle method* ini akan diteruskan sebagai parameter ke [`componentDidUpdate`.](#componentdidupdate)
 
-For example, you can use it in a UI like a chat thread that needs to preserve its scroll position during updates:
+Misalnya, Anda dapat menggunakannya di UI seperti utas obrolan yang perlu mempertahankan posisi *scroll*-nya selama pembaruan:
 
 ```js {7-15,17}
 class ScrollingList extends React.Component {
@@ -520,8 +520,8 @@ class ScrollingList extends React.Component {
   }
 
   getSnapshotBeforeUpdate(prevProps, prevState) {
-    // Are we adding new items to the list?
-    // Capture the scroll position so we can adjust scroll later.
+    // Apakah kita menambahkan item baru ke dalam list?
+    // Tangkap posisi scroll supaya kita dapat mengatur scroll nanti.
     if (prevProps.list.length < this.props.list.length) {
       const list = this.listRef.current;
       return list.scrollHeight - list.scrollTop;
@@ -530,9 +530,9 @@ class ScrollingList extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState, snapshot) {
-    // If we have a snapshot value, we've just added new items.
-    // Adjust scroll so these new items don't push the old ones out of view.
-    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
+    // Apabila kita memiliki nilai snapshot, kita baru saja menambahkan item baru.
+    // Atur scroll supaya item-item baru ini tidak mendorong item-item lama ke luar tampilan.
+    // (snapshot adalah nilai yang dikembalikan dari getSnapshotBeforeUpdate)
     if (snapshot !== null) {
       const list = this.listRef.current;
       list.scrollTop = list.scrollHeight - snapshot;
@@ -547,25 +547,25 @@ class ScrollingList extends React.Component {
 }
 ```
 
-In the above example, it is important to read the `scrollHeight` property directly in `getSnapshotBeforeUpdate`. It is not safe to read it in [`render`](#render), [`UNSAFE_componentWillReceiveProps`](#unsafe_componentwillreceiveprops), or [`UNSAFE_componentWillUpdate`](#unsafe_componentwillupdate) because there is a potential time gap between these methods getting called and React updating the DOM.
+Pada contoh di atas, penting untuk membaca properti `scrollHeight` secara langsung di `getSnapshotBeforeUpdate`. Tidak aman untuk membacanya di [`render`](#render), [`UNSAFE_componentWillReceiveProps`](#unsafe_componentwillreceiveprops), atau [`UNSAFE_componentWillUpdate`](#unsafe_componentwillupdate) karena ada potensi jeda waktu antara pemanggilan metode ini dan React memperbarui DOM.
 
-#### Parameters {/*getsnapshotbeforeupdate-parameters*/}
+#### Parameter {/*getsnapshotbeforeupdate-parameters*/}
 
-* `prevProps`: Props before the update. Compare `prevProps` to [`this.props`](#props) to determine what changed.
+* `prevProps`: *Props* sebelum pembaharuan. Membandingkan `prevProps` ke [`this.props`](#props) untuk menentukan apa yang berubah.
 
-* `prevState`: State before the update. Compare `prevState` to [`this.state`](#state) to determine what changed.
+* `prevState`: State sebelum pembaharuan. Membandingkan `prevState` ke [`this.state`](#state) untuk menentukan apa yang berubah.
 
-#### Returns {/*getsnapshotbeforeupdate-returns*/}
+#### Kembalian {/*getsnapshotbeforeupdate-returns*/}
 
-You should return a snapshot value of any type that you'd like, or `null`. The value you returned will be passed as the third argument to [`componentDidUpdate`.](#componentdidupdate)
+Anda harus mengembalikan nilai snapshot dari jenis apa pun yang Anda inginkan, atau `null`. Nilai yang Anda kembalikan akan diteruskan sebagai argumen ketiga pada [`componentDidUpdate`.](#componentdidupdate)
 
-#### Caveats {/*getsnapshotbeforeupdate-caveats*/}
+#### Catatan penting {/*getsnapshotbeforeupdate-caveats*/}
 
-- `getSnapshotBeforeUpdate` will not get called if [`shouldComponentUpdate`](#shouldcomponentupdate) is defined and returns `false`.
+- `getSnapshotBeforeUpdate` tidak akan dipanggil jika [`shouldComponentUpdate`](#shouldcomponentupdate) didefinisikan dan mengembalikan `false`.
 
 <Note>
 
-At the moment, there is no equivalent to `getSnapshotBeforeUpdate` for function components. This use case is very uncommon, but if you have the need for it, for now you'll have to write a class component.
+Saat ini, tidak ada yang setara dengan `getSnapshotBeforeUpdate` untuk *function components*. Kasus penggunaan ini sangat jarang, tetapi jika Anda membutuhkannya, untuk sekarang Anda harus menulis sebuah *class component*.
 
 </Note>
 
@@ -573,9 +573,9 @@ At the moment, there is no equivalent to `getSnapshotBeforeUpdate` for function
 
 ### `render()` {/*render*/}
 
-The `render` method is the only required method in a class component.
+Metode `render` adalah satu-satunya metode yang diperlukan dalam *class component*.
 
-The `render` method should specify what you want to appear on the screen, for example:
+Metode `render` harus menentukan apa yang ingin Anda tampilkan di layar, misalnya:
 
 ```js {4-6}
 import { Component } from 'react';
@@ -587,33 +587,35 @@ class Greeting extends Component {
 }
 ```
 
-React may call `render` at any moment, so you shouldn't assume that it runs at a particular time. Usually, the `render` method should return a piece of [JSX](/learn/writing-markup-with-jsx), but a few [other return types](#render-returns) (like strings) are supported. To calculate the returned JSX, the `render` method can read [`this.props`](#props), [`this.state`](#state), and [`this.context`](#context).
+React dapat memanggil `render` kapan saja, jadi Anda tidak boleh berasumsi bahwa itu berjalan pada waktu tertentu. Biasanya, metode `render` harus mengembalikan sebagian dari [JSX](/learn/writing-markup-with-jsx), tetapi beberapa [jenis *return* lainnya](#render-returns) (seperti strings) didukung. Untuk menghitung JSX yang dikembalikan, metode `render` dapat membaca[`this.props`](#props), [`this.state`](#state), dan [`this.context`](#context).
 
-You should write the `render` method as a pure function, meaning that it should return the same result if props, state, and context are the same. It also shouldn't contain side effects (like setting up subscriptions) or interact with the browser APIs. Side effects should happen either in event handlers or methods like [`componentDidMount`.](#componentdidmount)
+Anda harus menulis metode `render` sebagai *pure function*, artinya ia harus mengembalikan hasil yang sama jika *props*, *state*, dan *context*-nya sama. Itu juga tidak boleh mengandung *side effects* (seperti menyiapkan *subscriptions*) atau interaksi dengan API peramban. Side effects harus terjadi baik dalam *event handlers* atau metode seperti [`componentDidMount`.](#componentdidmount)
 
-#### Parameters {/*render-parameters*/}
+#### Parameter {/*render-parameters*/}
 
-`render` does not take any parameters.
+* `prevProps`: *Props* sebelum pembaruan. Bandingkan `prevProps` ke [`this.props`](#props) untuk menentukan apa yang berubah.
 
-#### Returns {/*render-returns*/}
+* `prevState`: State sebelum pembaruan. Bandingkan `prevState` ke [`this.state`](#state) untuk menentukan apa yang berubah.
 
-`render` can return any valid React node. This includes React elements such as `<div />`, strings, numbers, [portals](/reference/react-dom/createPortal), empty nodes (`null`, `undefined`, `true`, and `false`), and arrays of React nodes.
+#### Kembalian {/*render-returns*/}
 
-#### Caveats {/*render-caveats*/}
+`render` dapat mengembalikan *node* React apa pun yang valid. Ini termasuk elemen-elemen React seperti `<div />`, strings, numbers, [portals](/reference/react-dom/createPortal), *nodes* kosong (`null`, `undefined`, `true`, dan `false`), dan arrays dari React *nodes*.
 
-- `render` should be written as a pure function of props, state, and context. It should not have side effects.
+#### Catatan penting {/*render-caveats*/}
 
-- `render` will not get called if [`shouldComponentUpdate`](#shouldcomponentupdate) is defined and returns `false`.
+- `render` harus ditulis sebagai pure function dari *props*, *state*, dan *context*. Seharusnya tidak memiliki *side effects*.
 
-- When [Strict Mode](/reference/react/StrictMode) is on, React will call `render` twice in development and then throw away one of the results. This helps you notice the accidental side effects that need to be moved out of the `render` method.
+- `render` tidak akan dipanggil jika [`shouldComponentUpdate`](#shouldcomponentupdate) didefinisikan dan mengembalikan `false`.
 
-- There is no one-to-one correspondence between the `render` call and the subsequent `componentDidMount` or `componentDidUpdate` call. Some of the `render` call results may be discarded by React when it's beneficial.
+- Ketika [Strict Mode](/reference/react/StrictMode) aktif, React akan memanggil `render` dua kali dalam *development* dan kemudian membuang salah satu hasilnya. Ini membantu Anda melihat efek samping yang tidak disengaja yang perlu dipindahkan dari metode `render`.
+
+- Tidak ada korespondensi satu-satu antara panggilan `render` dan panggilan `componentDidMount` atau panggilan `componentDidUpdate`. Beberapa hasil panggilan `render` mungkin dibuang oleh React jika bermanfaat.
 
 ---
 
 ### `setState(nextState, callback?)` {/*setstate*/}
 
-Call `setState` to update the state of your React component.
+Memanggil `setState` untuk mengupdate *state* dari komponen React Anda.
 
 ```js {8-10}
 class Form extends Component {
@@ -639,11 +641,11 @@ class Form extends Component {
 }
 ```
 
-`setState` enqueues changes to the component state. It tells React that this component and its children need to re-render with the new state. This is the main way you'll update the user interface in response to interactions.
+`setState` mengantrekan perubahan ke *state* komponen. Ini memberi tahu React bahwa komponen ini dan turunannya perlu di-*render* ulang dengan *state* baru. Ini adalah cara utama Anda memperbarui antarmuka pengguna sebagai respons terhadap interaksi.
 
 <Pitfall>
 
-Calling `setState` **does not** change the current state in the already executing code:
+Memanggil `setState` **tidak** mengubah *state* saat ini di kode yang sudah dieksekusi:
 
 ```js {6}
 function handleClick() {
@@ -655,11 +657,11 @@ function handleClick() {
 }
 ```
 
-It only affects what `this.state` will return starting from the *next* render.
+Ini hanya memengaruhi apa yang akan dikembalikan oleh `this.state` mulai dari render *berikutnya*.
 
 </Pitfall>
 
-You can also pass a function to `setState`. It lets you update state based on the previous state:
+Anda juga dapat meneruskan fungsi ke `setState`. Ini memungkinkan Anda memperbarui *state* berdasarkan *state* sebelumnya:
 
 ```js {2-6}
   handleIncreaseAge = () => {
@@ -671,31 +673,31 @@ You can also pass a function to `setState`. It lets you update state based on th
   }
 ```
 
-You don't have to do this, but it's handy if you want to update state multiple times during the same event.
+Anda tidak harus melakukan ini, tetapi akan berguna jika Anda ingin memperbarui *state* beberapa kali selama *event* yang sama.
 
-#### Parameters {/*setstate-parameters*/}
+#### Parameter {/*setstate-parameters*/}
 
-* `nextState`: Either an object or a function.
-  * If you pass an object as `nextState`, it will be shallowly merged into `this.state`.
-  * If you pass a function as `nextState`, it will be treated as an _updater function_. It must be pure, should take the pending state and props as arguments, and should return the object to be shallowly merged into `this.state`. React will put your updater function in a queue and re-render your component. During the next render, React will calculate the next state by applying all of the queued updaters to the previous state.
+* `nextState`: Baik objek atau fungsi.
+  * Jika Anda meneruskan objek sebagai `nextState`, objek tersebut akan digabungkan secara dangkal ke dalam `this.state`.
+  * Jika Anda meneruskan fungsi sebagai `nextState`, fungsi tersebut akan diperlakukan sebagai _updater function_. Itu harus murni, harus mengambil `state` dan `props` yang tertunda sebagai argumen, dan harus mengembalikan objek untuk digabungkan secara dangkal ke dalam `this.state`. React akan menempatkan fungsi pembaru Anda dalam antrean dan merender ulang komponen Anda. Selama render berikutnya, React akan menghitung *state* selanjutnya dengan menerapkan semua pembaruan yang antri ke *state* sebelumnya.
 
-* **optional** `callback`: If specified, React will call the `callback` you've provided after the update is committed.
+* **opsional** `callback`: Jika ditentukan, React akan memanggil `callback` yang Anda berikan setelah pembaruan dilakukan.
 
-#### Returns {/*setstate-returns*/}
+#### Kembalian {/*setstate-returns*/}
 
-`setState` does not return anything.
+`setState` tidak mengembalikan apapun.
 
-#### Caveats {/*setstate-caveats*/}
+#### Catatan penting {/*setstate-caveats*/}
 
-- Think of `setState` as a *request* rather than an immediate command to update the component. When multiple components update their state in response to an event, React will batch their updates and re-render them together in a single pass at the end of the event. In the rare case that you need to force a particular state update to be applied synchronously, you may wrap it in [`flushSync`,](/reference/react-dom/flushSync) but this may hurt performance.
+- Pikirkan `setState` sebagai *permintaan* daripada perintah langsung untuk memperbarui komponen. Ketika beberapa komponen memperbarui *state*-nya sebagai respons terhadap suatu *event*, React akan mengelompokkan pembaruannya dan merendernya kembali bersama-sama dalam satu lintasan di akhir *event*. Dalam kasus yang jarang terjadi saat Anda perlu memaksa pembaruan *state* tertentu untuk diterapkan secara sinkron, Anda dapat menggabungkannya dalam [`flushSync`,](/reference/react-dom/flushSync) tetapi ini dapat mengganggu kinerja.
 
-- `setState` does not update `this.state` immediately. This makes reading `this.state` right after calling `setState` a potential pitfall. Instead, use [`componentDidUpdate`](#componentdidupdate) or the setState `callback` argument, either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, you can pass a function to `nextState` as described above.
+- `setState` tidak segera memperbarui `this.state`. Hal ini membuat pembacaan `this.state` tepat setelah memanggil `setState` menjadi potensial jebakan. Sebagai gantinya, gunakan [`componentDidUpdate`](#componentdidupdate) atau argumen setState `callback`, yang keduanya dijamin akan aktif setelah pembaruan diterapkan. Jika Anda perlu menyetel *state* berdasarkan *state* sebelumnya, Anda dapat meneruskan fungsi ke `nextState` seperti yang dijelaskan di atas.
 
 <Note>
 
-Calling `setState` in class components is similar to calling a [`set` function](/reference/react/useState#setstate) in function components.
+Memanggil `setState` pada *class components* mirip dengan memanggil [fungsi `set`](/reference/react/useState#setstate) pada *function components*.
 
-[See how to migrate.](#migrating-a-component-with-state-from-a-class-to-a-function)
+[Lihat bagaimana cara migrasi.](#migrating-a-component-with-state-from-a-class-to-a-function)
 
 </Note>
 
@@ -703,9 +705,9 @@ Calling `setState` in class components is similar to calling a [`set` function](
 
 ### `shouldComponentUpdate(nextProps, nextState, nextContext)` {/*shouldcomponentupdate*/}
 
-If you define `shouldComponentUpdate`, React will call it to determine whether a re-render can be skipped.
+Jika Anda mendefinisikan `shouldComponentUpdate`, React akan memanggilnya untuk menentukan apakah *render* ulang dapat dilewati.
 
-If you are confident you want to write it by hand, you may compare `this.props` with `nextProps` and `this.state` with `nextState` and return `false` to tell React the update can be skipped.
+Jika Anda yakin ingin menulisnya dengan tangan, Anda dapat membandingkan `this.props` dengan `nextProps` dan `this.state` dengan `nextState` dan mengembalikan `false` untuk memberi tahu React bahwa pembaruan dapat dilewati.
 
 ```js {6-18}
 class Rectangle extends Component {
@@ -721,7 +723,7 @@ class Rectangle extends Component {
       nextProps.size.height === this.props.size.height &&
       nextState.isHovered === this.state.isHovered
     ) {
-      // Nothing has changed, so a re-render is unnecessary
+      // Tidak ada yang berubah, jadi tidak perlu render ulang
       return false;
     }
     return true;
@@ -732,35 +734,35 @@ class Rectangle extends Component {
 
 ```
 
-React calls `shouldComponentUpdate` before rendering when new props or state are being received. Defaults to `true`. This method is not called for the initial render or when [`forceUpdate`](#forceupdate) is used.
+React memanggil `shouldComponentUpdate` sebelum *render*-ing ketika *props* baru atau *state* sedang diterima. Default `true`. Metode ini tidak dipanggil untuk *render* awal atau saat [`forceUpdate`](#forceupdate) digunakan.
 
-#### Parameters {/*shouldcomponentupdate-parameters*/}
+#### Parameter {/*shouldcomponentupdate-parameters*/}
 
-- `nextProps`: The next props that the component is about to render with. Compare `nextProps` to [`this.props`](#props) to determine what changed.
-- `nextState`: The next state that the component is about to render with. Compare `nextState` to [`this.state`](#props) to determine what changed.
-- `nextContext`: The next context that the component is about to render with. Compare `nextContext` to [`this.context`](#context) to determine what changed. Only available if you specify [`static contextType`](#static-contexttype) (modern) or [`static contextTypes`](#static-contexttypes) (legacy).
+- `nextProps`: Props berikutnya yang akan dirender oleh komponen. Bandingkan `nextProps` dengan [`this.props`](#props) untuk menentukan apa yang berubah.
+- `nextState`: *State* berikutnya yang akan di-*render* oleh komponen. Bandingkan `nextState` dengan [`this.state`](#props) untuk menentukan apa yang berubah.
+- `nextContext`: Konteks berikutnya yang akan di-*render* oleh komponen. Bandingkan `nextContext` dengan [`this.context`](#context) untuk menentukan apa yang berubah. Hanya tersedia jika Anda menetapkan [`static contextType`](#static-contexttypes) (modern) atau [`static contextTypes`](#static-contexttypes) (legacy).
 
-#### Returns {/*shouldcomponentupdate-returns*/}
+#### Kembalian {/*shouldcomponentupdate-returns*/}
 
-Return `true` if you want the component to re-render. That's the default behavior.
+Mengembalikan `true` jika Anda ingin komponen di-*render* ulang. Itu merupakan perilaku default.
 
-Return `false` to tell React that re-rendering can be skipped.
+Mengembalikan `false` untuk memberitahu React bahwa *render* ulang dapat dilewati.
 
-#### Caveats {/*shouldcomponentupdate-caveats*/}
+#### Catatan penting {/*shouldcomponentupdate-caveats*/}
 
-- This method *only* exists as a performance optimization. If your component breaks without it, fix that first. 
+- Metode ini *hanya* ada sebagai pengoptimalan kinerja. Jika komponen Anda rusak tanpanya, perbaiki terlebih dahulu. 
 
-- Consider using [`PureComponent`](/reference/react/PureComponent) instead of writing `shouldComponentUpdate` by hand. `PureComponent` shallowly compares props and state, and reduces the chance that you'll skip a necessary update.
+- Pertimbangkan untuk menggunakan [`PureComponent`](/reference/react/PureComponent) daripada menulis `shouldComponentUpdate` secara manual. `PureComponent` secara dangkal membandingkan *props* dan *state*, dan mengurangi kemungkinan Anda melewati pembaruan yang diperlukan.
 
-- We do not recommend doing deep equality checks or using `JSON.stringify` in `shouldComponentUpdate`. It makes performance unpredictable and dependent on the data structure of every prop and state. In the best case, you risk introducing multi-second stalls to your application, and in the worst case you risk crashing it.
+- Kami tidak menyarankan melakukan pemeriksaan kesetaraan mendalam atau menggunakan `JSON.stringify` di `shouldComponentUpdate`. Itu membuat kinerja tidak dapat diprediksi dan bergantung pada struktur data setiap *prop* dan *state*. Dalam kasus terbaik, Anda berisiko memperkenalkan henti selama beberapa detik pada aplikasi Anda, dan dalam kasus terburuk Anda berisiko membuatnya crash.
 
-- Returning `false` does not prevent child components from re-rendering when *their* state changes.
+- Mengembalikan `false` tidak mencegah komponen turunan dari *render*-ing ulang ketika *state* *mereka* berubah.
 
-- Returning `false` does not *guarantee* that the component will not re-render. React will use the return value as a hint but it may still choose to re-render your component if it makes sense to do for other reasons.
+- Mengembalikan `false` tidak *menjamin* bahwa komponen tidak akan di-*render* ulang. React akan menggunakan nilai yang dikembalikan sebagai petunjuk tetapi mungkin masih memilih untuk me-*render* ulang komponen Anda jika masuk akal untuk dilakukan karena alasan lain.
 
 <Note>
 
-Optimizing class components with `shouldComponentUpdate` is similar to optimizing function components with [`memo`.](/reference/react/memo) Function components also offer more granular optimization with [`useMemo`.](/reference/react/useMemo)
+Mengoptimalkan *class components* dengan `shouldComponentUpdate` serupa dengan mengoptimalkan *function components* dengan [`memo`.](/reference/react/memo) *Function components* juga menawarkan pengoptimalan yang lebih terperinci dengan [`useMemo`.](/reference/react/useMemo)
 
 </Note>
 
@@ -768,32 +770,32 @@ Optimizing class components with `shouldComponentUpdate` is similar to optimizin
 
 ### `UNSAFE_componentWillMount()` {/*unsafe_componentwillmount*/}
 
-If you define `UNSAFE_componentWillMount`, React will call it immediately after the [`constructor`.](#constructor) It only exists for historical reasons and should not be used in any new code. Instead, use one of the alternatives:
+Jika Anda mendefinisikan `UNSAFE_componentWillMount`, React akan memanggilnya segera setelah [`constructor`.](#constructor) Itu hanya ada karena alasan historis dan tidak boleh digunakan dalam kode baru apa pun. Sebagai gantinya, gunakan salah satu alternatif:
 
-- To initialize state, declare [`state`](#state) as a class field or set `this.state` inside the [`constructor`.](#constructor)
-- If you need to run a side effect or set up a subscription, move that logic to [`componentDidMount`](#componentdidmount) instead.
+- Untuk menginisialisasi *state*, deklarasikan [`state`](#state) sebagai bidang kelas atau setel `this.state` di dalam [`konstruktor`.](#konstruktor)
+- Jika Anda perlu menjalankan efek samping atau menyiapkan langganan, pindahkan logika tersebut ke [`componentDidMount`](#componentdidmount) sebagai gantinya.
 
-[See examples of migrating away from unsafe lifecycles.](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#examples)
+[Lihat contoh migrasi dari *unsafe lifecycles*.](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#examples)
 
-#### Parameters {/*unsafe_componentwillmount-parameters*/}
+#### Parameter {/*unsafe_componentwillmount-parameters*/}
 
-`UNSAFE_componentWillMount` does not take any parameters.
+`UNSAFE_componentWillMount` tidak menggunakan parameter apa pun.
 
-#### Returns {/*unsafe_componentwillmount-returns*/}
+#### Kembalian {/*unsafe_componentwillmount-returns*/}
 
-`UNSAFE_componentWillMount` should not return anything.
+`UNSAFE_componentWillMount` seharusnya tidak mengembalikan apa pun.
 
-#### Caveats {/*unsafe_componentwillmount-caveats*/}
+#### Catatan penting {/*unsafe_componentwillmount-caveats*/}
 
-- `UNSAFE_componentWillMount` will not get called if the component implements [`static getDerivedStateFromProps`](#static-getderivedstatefromprops) or [`getSnapshotBeforeUpdate`.](#getsnapshotbeforeupdate)
+- `UNSAFE_componentWillMount` tidak akan dipanggil jika komponen mengimplementasikan [`static getDerivedStateFromProps`](#static-getderivedstatefromprops) atau [`getSnapshotBeforeUpdate`.](#getsnapshotbeforeupdate)
 
-- Despite its naming, `UNSAFE_componentWillMount` does not guarantee that the component *will* get mounted if your app uses modern React features like [`Suspense`.](/reference/react/Suspense) If a render attempt is suspended (for example, because the code for some child component has not loaded yet), React will throw the in-progress tree away and attempt to construct the component from scratch during the next attempt. This is why this method is "unsafe". Code that relies on mounting (like adding a subscription) should go into [`componentDidMount`.](#componentdidmount)
+- Terlepas dari namanya, `UNSAFE_componentWillMount` tidak menjamin bahwa komponen *akan* dipasang jika aplikasi Anda menggunakan fitur React modern seperti [`Suspense`.](/reference/react/Suspense) Jika upaya render ditangguhkan (misalnya, karena kode untuk beberapa komponen anak belum dimuat), React akan membuang pohon yang sedang berjalan dan mencoba membangun komponen dari awal selama upaya berikutnya. Inilah mengapa metode ini "tidak aman". Kode yang bergantung pada pemasangan (seperti menambahkan langganan) harus masuk ke [`componentDidMount`.](#componentdidmount)
 
-- `UNSAFE_componentWillMount` is the only lifecycle method that runs during [server rendering.](/reference/react-dom/server) For all practical purposes, it is identical to [`constructor`,](#constructor) so you should use the `constructor` for this type of logic instead.
+- `UNSAFE_componentWillMount` adalah satu-satunya metode siklus hidup yang berjalan selama [server rendering.](/reference/react-dom/server) Untuk semua tujuan praktis, ini identik dengan [`constructor`,](#constructor) sehingga Anda harus menggunakan `konstruktor` untuk jenis logika ini.
 
 <Note>
 
-Calling [`setState`](#setstate) inside `UNSAFE_componentWillMount` in a class component to initialize state is equivalent to passing that state as the initial state to [`useState`](/reference/react/useState) in a function component.
+Memanggil [`setState`](#setstate) di dalam `UNSAFE_componentWillMount` dalam *class component* untuk menginisialisasi *state* sama dengan meneruskan *state* tersebut sebagai *state* awal ke [`useState`](/reference/react/useState) dalam *function components*.
 
 </Note>
 
@@ -801,37 +803,37 @@ Calling [`setState`](#setstate) inside `UNSAFE_componentWillMount` in a class co
 
 ### `UNSAFE_componentWillReceiveProps(nextProps, nextContext)` {/*unsafe_componentwillreceiveprops*/}
 
-If you define `UNSAFE_componentWillReceiveProps`, React will call it when the component receives new props. It only exists for historical reasons and should not be used in any new code. Instead, use one of the alternatives:
+Jika Anda mendefinisikan `UNSAFE_componentWillReceiveProps`, React akan memanggilnya ketika komponen menerima *props* baru. Itu hanya ada karena alasan historis dan tidak boleh digunakan dalam kode baru apa pun. Sebagai gantinya, gunakan salah satu alternatif:
 
-- If you need to **run a side effect** (for example, fetch data, run an animation, or reinitialize a subscription) in response to prop changes, move that logic to [`componentDidUpdate`](#componentdidupdate) instead.
-- If you need to **avoid re-computing some data only when a prop changes,** use a [memoization helper](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization) instead.
-- If you need to **"reset" some state when a prop changes,** consider either making a component [fully controlled](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) or [fully uncontrolled with a key](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) instead.
-- If you need to **"adjust" some state when a prop changes,** check whether you can compute all the necessary information from props alone during rendering. If you can't, use [`static getDerivedStateFromProps`](/reference/react/Component#static-getderivedstatefromprops) instead.
+- Jika Anda perlu **menjalankan efek samping** (misalnya, mengambil data, menjalankan animasi, atau menginisialisasi ulang langganan) sebagai respons terhadap perubahan *prop*, pindahkan logika tersebut ke [`componentDidUpdate`](#componentdidupdate) sebagai gantinya.
+- Jika Anda perlu **menghindari komputasi ulang beberapa data hanya saat prop berubah,** gunakan [memoization helper](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization) sebagai gantinya.
+- Jika Anda perlu **"mereset" beberapa state saat prop berubah,** pertimbangkan untuk membuat komponen [fully controlled](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) atau [fully uncontrolled with a key](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) sebagai gantinya.
+- Jika Anda perlu **"menyesuaikan" beberapa status saat prop berubah,** periksa apakah Anda dapat menghitung semua informasi yang diperlukan hanya dari *prop* selama *render*-ing. Jika tidak bisa, gunakan [`static getDerivedStateFromProps`](/reference/react/Component#static-getderivedstatefromprops) sebagai gantinya.
 
-[See examples of migrating away from unsafe lifecycles.](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props)
+[Lihat contoh migrasi dari *unsafe lifecycles*.](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props)
 
-#### Parameters {/*unsafe_componentwillreceiveprops-parameters*/}
+#### Parameter {/*unsafe_componentwillreceiveprops-parameters*/}
 
-- `nextProps`: The next props that the component is about to receive from its parent component. Compare `nextProps` to [`this.props`](#props) to determine what changed.
-- `nextContext`: The next context that the component is about to receive from the closest provider. Compare `nextContext` to [`this.context`](#context) to determine what changed. Only available if you specify [`static contextType`](#static-contexttype) (modern) or [`static contextTypes`](#static-contexttypes) (legacy).
+- `nextProps`: *Props* berikutnya yang akan diterima komponen dari komponen induknya. Bandingkan `nextProps` dengan [`this.props`](#props) untuk menentukan apa yang berubah.
+- `nextContext`: *Props* berikutnya yang akan diterima komponen dari penyedia terdekat. Bandingkan `nextContext` dengan [`this.context`](#context) untuk menentukan apa yang berubah. Hanya tersedia jika Anda menetapkan [`static contextType`](#static-contexttype) (modern) atau [`static contextTypes`](#static-contexttypes) (legacy).
 
-#### Returns {/*unsafe_componentwillreceiveprops-returns*/}
+#### Kembalian {/*unsafe_componentwillreceiveprops-returns*/}
 
-`UNSAFE_componentWillReceiveProps` should not return anything.
+`UNSAFE_componentWillReceiveProps` seharusnya tidak mengembalikan apa pun.
 
-#### Caveats {/*unsafe_componentwillreceiveprops-caveats*/}
+#### Catatan penting {/*unsafe_componentwillreceiveprops-caveats*/}
 
-- `UNSAFE_componentWillReceiveProps` will not get called if the component implements [`static getDerivedStateFromProps`](#static-getderivedstatefromprops) or [`getSnapshotBeforeUpdate`.](#getsnapshotbeforeupdate)
+- `UNSAFE_componentWillReceiveProps` tidak akan dipanggil jika komponen mengimplementasikan [`static getDerivedStateFromProps`](#static-getderivedstatefromprops) atau [`getSnapshotBeforeUpdate`.](#getsnapshotbeforeupdate)
 
-- Despite its naming, `UNSAFE_componentWillReceiveProps` does not guarantee that the component *will* receive those props if your app uses modern React features like [`Suspense`.](/reference/react/Suspense) If a render attempt is suspended (for example, because the code for some child component has not loaded yet), React will throw the in-progress tree away and attempt to construct the component from scratch during the next attempt. By the time of the next render attempt, the props might be different. This is why this method is "unsafe". Code that should run only for committed updates (like resetting a subscription) should go into [`componentDidUpdate`.](#componentdidupdate)
+- Terlepas dari namanya, `UNSAFE_componentWillReceiveProps` tidak menjamin bahwa komponen *akan* menerima props tersebut jika aplikasi Anda menggunakan fitur React modern seperti [`Suspense`.](/reference/react/Suspense) Jika upaya *render* ditangguhkan (misalnya , karena kode untuk beberapa komponen anak belum dimuat), React akan membuang pohon yang sedang dalam proses dan mencoba membangun komponen dari awal selama upaya berikutnya. Pada saat percobaan *render* berikutnya, *props* mungkin berbeda. Inilah mengapa metode ini "tidak aman". Kode yang harus dijalankan hanya untuk pembaruan yang dilakukan (seperti menyetel ulang langganan) harus masuk ke [`componentDidUpdate`.](#componentdidupdate)
 
-- `UNSAFE_componentWillReceiveProps` does not mean that the component has received *different* props than the last time. You need to compare `nextProps` and `this.props` yourself to check if something changed.
+- `UNSAFE_componentWillReceiveProps` tidak berarti bahwa komponen telah menerima props yang *berbeda* dari sebelumnya. Anda perlu membandingkan `nextProps` dan `this.props` sendiri untuk memeriksa apakah ada yang berubah.
 
-- React doesn't call `UNSAFE_componentWillReceiveProps` with initial props during mounting. It only calls this method if some of component's props are going to be updated. For example, calling [`setState`](#setstate) doesn't generally trigger `UNSAFE_componentWillReceiveProps` inside the same component.
+- React tidak memanggil `UNSAFE_componentWillReceiveProps` dengan *props awal* selama *mounting*. Itu hanya memanggil metode ini jika beberapa *props* komponen akan diperbarui. Misalnya, memanggil [`setState`](#setstate) biasanya tidak memicu `UNSAFE_componentWillReceiveProps` di dalam komponen yang sama.
 
 <Note>
 
-Calling [`setState`](#setstate) inside `UNSAFE_componentWillReceiveProps` in a class component to "adjust" state is equivalent to [calling the `set` function from `useState` during rendering](/reference/react/useState#storing-information-from-previous-renders) in a function component.
+Memanggil [`setState`](#setstate) dalam `UNSAFE_componentWillReceiveProps` pada *class component* untuk "menyesuaikan" state sama dengan  [memanggil fungsi `set` dari `useState` selama *render*-ing](/reference/react/useState#storing-information-from-previous-renders) dalam *function component*.
 
 </Note>
 
@@ -840,39 +842,39 @@ Calling [`setState`](#setstate) inside `UNSAFE_componentWillReceiveProps` in a c
 ### `UNSAFE_componentWillUpdate(nextProps, nextState)` {/*unsafe_componentwillupdate*/}
 
 
-If you define `UNSAFE_componentWillUpdate`, React will call it before rendering with the new props or state. It only exists for historical reasons and should not be used in any new code. Instead, use one of the alternatives:
+Jika Anda mendefinisikan `UNSAFE_componentWillUpdate`, React akan memanggilnya sebelum me-*render* dengan *props* atau *state* baru. Itu hanya ada karena alasan historis dan tidak boleh digunakan dalam kode baru apa pun. Sebagai gantinya, gunakan salah satu alternatif:
 
-- If you need to run a side effect (for example, fetch data, run an animation, or reinitialize a subscription) in response to prop or state changes, move that logic to [`componentDidUpdate`](#componentdidupdate) instead.
-- If you need to read some information from the DOM (for example, to save the current scroll position) so that you can use it in [`componentDidUpdate`](#componentdidupdate) later, read it inside [`getSnapshotBeforeUpdate`](#getsnapshotbeforeupdate) instead.
+- Jika Anda perlu menjalankan efek samping (misalnya, mengambil data, menjalankan animasi, atau menginisialisasi ulang langganan) sebagai respons terhadap perubahan *prop* atau *state*, pindahkan logika tersebut ke [`componentDidUpdate`](#componentdidupdate) sebagai gantinya.
+- Jika Anda perlu membaca beberapa informasi dari DOM (misalnya, untuk menyimpan posisi gulir saat ini) sehingga Anda dapat menggunakannya di [`componentDidUpdate`](#componentdidupdate) nanti, baca di dalam [`getSnapshotBeforeUpdate`](#getsnapshotbeforeupdate ) sebagai gantinya.
 
-[See examples of migrating away from unsafe lifecycles.](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#examples)
+[Lihat contoh migrasi dari *unsafe lifecycles*.](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#examples)
 
-#### Parameters {/*unsafe_componentwillupdate-parameters*/}
+#### Parameter {/*unsafe_componentwillupdate-parameters*/}
 
-- `nextProps`: The next props that the component is about to render with. Compare `nextProps` to [`this.props`](#props) to determine what changed.
-- `nextState`: The next state that the component is about to render with. Compare `nextState` to [`this.state`](#state) to determine what changed.
+- `nextProps`: *Props* berikutnya yang akan di-*render* oleh komponen. Bandingkan `nextProps` dengan [`this.props`](#props) untuk menentukan apa yang berubah.
+- `nextState`: *State* selanjutnya yang akan di-*render* oleh komponen. Bandingkan `nextState` dengan [`this.state`](#state) untuk menentukan apa yang berubah.
 
-#### Returns {/*unsafe_componentwillupdate-returns*/}
+#### Kembalian {/*unsafe_componentwillupdate-returns*/}
 
-`UNSAFE_componentWillUpdate` should not return anything.
+`UNSAFE_componentWillUpdate` seharusnya tidak mengembalikan apa pun.
 
-#### Caveats {/*unsafe_componentwillupdate-caveats*/}
+#### Catatan penting {/*unsafe_componentwillupdate-caveats*/}
 
-- `UNSAFE_componentWillUpdate` will not get called if [`shouldComponentUpdate`](#shouldcomponentupdate) is defined and returns `false`.
+- `UNSAFE_componentWillUpdate` tidak akan dipanggil jika [`shouldComponentUpdate`](#shouldcomponentupdate) ditentukan dan mengembalikan `false`.
 
-- `UNSAFE_componentWillUpdate` will not get called if the component implements [`static getDerivedStateFromProps`](#static-getderivedstatefromprops) or [`getSnapshotBeforeUpdate`.](#getsnapshotbeforeupdate)
+- `UNSAFE_componentWillUpdate` tidak akan dipanggil jika komponen mengimplementasikan [`static getDerivedStateFromProps`](#static-getderivedstatefromprops) atau [`getSnapshotBeforeUpdate`.](#getsnapshotbeforeupdate)
 
-- It's not supported to call [`setState`](#setstate) (or any method that leads to `setState` being called, like dispatching a Redux action) during `componentWillUpdate`.
+- Tidak didukung untuk memanggil [`setState`](#setstate) (atau metode apa pun yang menyebabkan `setState` dipanggil, seperti *dispatching Redux action*) selama `componentWillUpdate`.
 
-- Despite its naming, `UNSAFE_componentWillUpdate` does not guarantee that the component *will* update if your app uses modern React features like [`Suspense`.](/reference/react/Suspense) If a render attempt is suspended (for example, because the code for some child component has not loaded yet), React will throw the in-progress tree away and attempt to construct the component from scratch during the next attempt. By the time of the next render attempt, the props and state might be different. This is why this method is "unsafe". Code that should run only for committed updates (like resetting a subscription) should go into [`componentDidUpdate`.](#componentdidupdate)
+- Terlepas dari namanya, `UNSAFE_componentWillUpdate` tidak menjamin bahwa komponen *akan* diupdate jika aplikasi Anda menggunakan fitur React modern seperti [`Suspense`.](/reference/react/Suspense) Jika upaya *render* ditangguhkan (misalnya, karena kode untuk beberapa komponen anak belum dimuat), React akan membuang pohon yang sedang berjalan dan mencoba membangun komponen dari awal selama upaya berikutnya. Pada saat upaya *render* berikutnya, *props* dan *state* mungkin berbeda. Inilah mengapa metode ini "tidak aman". Kode yang harus dijalankan hanya untuk pembaruan yang dilakukan (seperti menyetel ulang langganan) harus masuk ke [`componentDidUpdate`.](#componentdidupdate)
 
-- `UNSAFE_componentWillUpdate` does not mean that the component has received *different* props or state than the last time. You need to compare `nextProps` with `this.props` and `nextState` with `this.state` yourself to check if something changed.
+- `UNSAFE_componentWillUpdate` tidak berarti bahwa komponen telah menerima *props* atau *state* yang *berbeda* dari sebelumnya. Anda perlu membandingkan `nextProps` dengan `this.props` dan `nextState` dengan `this.state` sendiri untuk memeriksa apakah ada yang berubah.
 
-- React doesn't call `UNSAFE_componentWillUpdate` with initial props and state during mounting.
+- React tidak memanggil `UNSAFE_componentWillUpdate` dengan *props* awal dan *state* selama pemasangan.
 
 <Note>
 
-There is no direct equivalent to `UNSAFE_componentWillUpdate` in function components.
+Tidak ada persamaan langsung dengan `UNSAFE_componentWillUpdate` dalam *function components*.
 
 </Note>
 
@@ -882,11 +884,11 @@ There is no direct equivalent to `UNSAFE_componentWillUpdate` in function compon
 
 <Deprecated>
 
-This API will be removed in a future major version of React. [Use `static contextType` instead.](#static-contexttype)
+API ini akan dihapus di versi mayor React yang akan datang. [Gunakan `static contextType` sebagai gantinya.](#static-contexttype)
 
 </Deprecated>
 
-Lets you specify which [legacy context](https://reactjs.org/docs/legacy-context.html) is provided by this component.
+Memungkinkan Anda menentukan [legacy context](https://reactjs.org/docs/legacy-context.html) mana yang disediakan oleh komponen ini.
 
 ---
 
@@ -894,17 +896,17 @@ Lets you specify which [legacy context](https://reactjs.org/docs/legacy-context.
 
 <Deprecated>
 
-This API will be removed in a future major version of React. [Use `static contextType` instead.](#static-contexttype)
+API ini akan dihapus di versi mayor React yang akan datang. [Gunakan `static contextType` sebagai gantinya.](#static-contexttype)
 
 </Deprecated>
 
-Lets you specify which [legacy context](https://reactjs.org/docs/legacy-context.html) is consumed by this component.
+Memungkinkan Anda menentukan [legacy context](https://reactjs.org/docs/legacy-context.html) yang dikonsumsi oleh komponen ini.
 
 ---
 
 ### `static contextType` {/*static-contexttype*/}
 
-If you want to read [`this.context`](#context-instance-field) from your class component, you must specify which context it needs to read. The context you specify as the `static contextType` must be a value previously created by [`createContext`.](/reference/react/createContext)
+Jika Anda ingin membaca [`this.context`](#context-instance-field) dari *class component* Anda, Anda harus menentukan *context* mana yang perlu dibaca. *Context* yang Anda tentukan sebagai `static contextType` harus berupa nilai yang dibuat sebelumnya oleh [`createContext`.](/reference/react/createContext)
 
 ```js {2}
 class Button extends Component {
@@ -924,9 +926,9 @@ class Button extends Component {
 
 <Note>
 
-Reading `this.context` in class components is equivalent to [`useContext`](/reference/react/useContext) in function components.
+Membaca `this.context` pada *class components* setara dengan [`useContext`](/reference/react/useContext) pada *function components*.
 
-[See how to migrate.](#migrating-a-component-with-context-from-a-class-to-a-function)
+[Lihat bagaimana cara migrasi.](#migrating-a-component-with-context-from-a-class-to-a-function)
 
 </Note>
 
@@ -934,9 +936,9 @@ Reading `this.context` in class components is equivalent to [`useContext`](/refe
 
 ### `static defaultProps` {/*static-defaultprops*/}
 
-You can define `static defaultProps` to set the default props for the class. They will be used for `undefined` and missing props, but not for `null` props.
+Anda dapat mendefinisikan `static defaultProps` untuk mengatur *props* bawaan untuk *class*. Mereka akan digunakan untuk `undefined` dan *props* yang hilang, tetapi tidak untuk *props* `null`.
 
-For example, here is how you define that the `color` prop should default to `'blue'`:
+Sebagai contoh, di sini adalah bagaimana Anda mendefinisikan bahwa *prop* `color` harus default ke `'blue'`:
 
 ```js {2-4}
 class Button extends Component {
@@ -950,7 +952,7 @@ class Button extends Component {
 }
 ```
 
-If the `color` prop is not provided or is `undefined`, it will be set by default to `'blue'`:
+Jika *prop* `color` tidak disediakan atau `undefined`, maka akan disetel secara default ke `'blue'`:
 
 ```js
 <>
@@ -970,7 +972,7 @@ If the `color` prop is not provided or is `undefined`, it will be set by default
 
 <Note>
 
-Defining `defaultProps` in class components is similar to using [default values](/learn/passing-props-to-a-component#specifying-a-default-value-for-a-prop) in function components.
+Mendefinisikan `defaultProps` pada *class components* serupa dengan menggunakan [default values](/learn/passing-props-to-a-component#specifying-a-default-value-for-a-prop) pada *function components*.
 
 </Note>
 
@@ -978,7 +980,7 @@ Defining `defaultProps` in class components is similar to using [default values]
 
 ### `static propTypes` {/*static-proptypes*/}
 
-You can define `static propTypes` together with the [`prop-types`](https://www.npmjs.com/package/prop-types) library to declare the types of the props accepted by your component. These types will be checked during rendering and in development only.
+Anda dapat mendefinisikan `static propTypes` bersama dengan pustaka [`prop-types`](https://www.npmjs.com/package/prop-types) untuk mendeklarasikan jenis *props* yang diterima oleh komponen Anda. Jenis ini akan diperiksa selama *render*-ing dan hanya dalam pengembangan.
 
 ```js
 import PropTypes from 'prop-types';
@@ -998,7 +1000,7 @@ class Greeting extends React.Component {
 
 <Note>
 
-We recommend using [TypeScript](https://www.typescriptlang.org/) instead of checking prop types at runtime.
+Kami merekomendasikan menggunakan [TypeScript](https://www.typescriptlang.org/) daripada memeriksa *prop types* pada *runtime*.
 
 </Note>
 
@@ -1006,27 +1008,27 @@ We recommend using [TypeScript](https://www.typescriptlang.org/) instead of chec
 
 ### `static getDerivedStateFromError(error)` {/*static-getderivedstatefromerror*/}
 
-If you define `static getDerivedStateFromError`, React will call it when a child component (including distant children) throws an error during rendering. This lets you display an error message instead of clearing the UI.
+Jika Anda mendefinisikan `static getDerivedStateFromError`, React akan memanggilnya ketika komponen anak (termasuk anak jauh) melemparkan kesalahan selama *render*-ing. Ini memungkinkan Anda menampilkan pesan kesalahan alih-alih menghapus UI.
 
-Typically, it is used together with [`componentDidCatch`](#componentdidcatch) which lets you send the error report to some analytics service. A component with these methods is called an *error boundary.*
+Biasanya, ini digunakan bersama dengan [`componentDidCatch`](#componentDidCatch) yang memungkinkan Anda mengirim laporan kesalahan ke beberapa layanan analitik. Komponen dengan metode ini disebut *error boundary.*
 
-[See an example.](#catching-rendering-errors-with-an-error-boundary)
+[Lihat contoh.](#catching-rendering-errors-with-an-error-boundary)
 
-#### Parameters {/*static-getderivedstatefromerror-parameters*/}
+#### Parameter {/*static-getderivedstatefromerror-parameters*/}
 
-* `error`: The error that was thrown. In practice, it will usually be an instance of [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) but this is not guaranteed because JavaScript allows to [`throw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw) any value, including strings or even `null`.
+* `error`: Kesalahan yang dilemparkan. Dalam prakteknya, biasanya akan menjadi *instance* dari [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) tetapi ini tidak dijamin karena JavaScript memungkinkan untuk [`throw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw) nilai apa saja, termasuk *strings* atau bahkan `null`.
 
-#### Returns {/*static-getderivedstatefromerror-returns*/}
+#### Kembalian {/*static-getderivedstatefromerror-returns*/}
 
-`static getDerivedStateFromError` should return the state telling the component to display the error message.
+`static getDerivedStateFromError` harus mengembalikan *state* yang memberi tahu komponen untuk menampilkan pesan kesalahan.
 
-#### Caveats {/*static-getderivedstatefromerror-caveats*/}
+#### Catatan penting {/*static-getderivedstatefromerror-caveats*/}
 
-* `static getDerivedStateFromError` should be a pure function. If you want to perform a side effect (for example, to call an analytics service), you need to also implement [`componentDidCatch`.](#componentdidcatch)
+* `static getDerivedStateFromError` harus berupa *pure function*. Jika Anda ingin melakukan efek samping (misalnya, untuk memanggil layanan analitik), Anda juga perlu mengimplementasikan [`componentDidCatch`.](#componentdidcatch)
 
 <Note>
 
-There is no direct equivalent for `static getDerivedStateFromError` in function components yet. If you'd like to avoid creating class components, write a single `ErrorBoundary` component like above and use it throughout your app. Alternatively, use the [`react-error-boundary`](https://github.com/bvaughn/react-error-boundary) package which does that.
+Belum ada padanan langsung untuk `static getDerivedStateFromError` dalam *function components*. Jika Anda ingin menghindari pembuatan *class components*, tulis satu komponen `ErrorBoundary` seperti di atas dan gunakan di seluruh aplikasi Anda. Sebagai alternatif, gunakan *package*[`react-error-boundary`](https://github.com/bvaughn/react-error-boundary) yang melakukan itu.
 
 </Note>
 
@@ -1034,9 +1036,9 @@ There is no direct equivalent for `static getDerivedStateFromError` in function
 
 ### `static getDerivedStateFromProps(props, state)` {/*static-getderivedstatefromprops*/}
 
-If you define `static getDerivedStateFromProps`, React will call it right before calling [`render`,](#render) both on the initial mount and on subsequent updates. It should return an object to update the state, or `null` to update nothing.
+Jika Anda mendefinisikan `static getDerivedStateFromProps`, React akan memanggilnya tepat sebelum memanggil [`render`,](#render) baik pada pemasangan awal maupun pembaruan berikutnya. Itu harus mengembalikan objek untuk memperbarui *state*, atau `null` untuk tidak memperbarui apa pun.
 
-This method exists for [rare use cases](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state) where the state depends on changes in props over time. For example, this `Form` component resets the `email` state when the `userID` prop changes:
+Metode ini ada untuk [kasus penggunaan yang jarang](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state) di mana *states* tergantung pada perubahan *props* dari waktu ke waktu. Misalnya, komponen `Form` ini menyetel ulang *state* `email` saat *prop* `userID` berubah:
 
 ```js {7-18}
 class Form extends Component {
@@ -1046,9 +1048,9 @@ class Form extends Component {
   };
 
   static getDerivedStateFromProps(props, state) {
-    // Any time the current user changes,
-    // Reset any parts of state that are tied to that user.
-    // In this simple example, that's just the email.
+    // Setiap kali user saat ini berubah,
+    // Setel ulang bagian state mana pun yang terkait ke user itu.
+    // Dalam contoh simpel ini, hanya ada email.
     if (props.userID !== state.prevUserID) {
       return {
         prevUserID: props.userID,
@@ -1062,46 +1064,46 @@ class Form extends Component {
 }
 ```
 
-Note that this pattern requires you to keep a previous value of the prop (like `userID`) in state (like `prevUserID`).
+Perhatikan bahwa pola ini mengharuskan Anda mempertahankan nilai *prop* sebelumnya (seperti `userID`) dalam *state* (seperti `prevUserID`).
 
 <Pitfall>
 
-Deriving state leads to verbose code and makes your components difficult to think about. [Make sure you're familiar with simpler alternatives:](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html)
+*Deriving state* mengarah ke kode *verbose* dan membuat komponen Anda sulit untuk dipikirkan. [Pastikan Anda terbiasa dengan alternatif yang lebih sederhana:](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html)
 
-- If you need to **perform a side effect** (for example, data fetching or an animation) in response to a change in props, use [`componentDidUpdate`](#componentdidupdate) method instead.
-- If you want to **re-compute some data only when a prop changes,** [use a memoization helper instead.](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization)
-- If you want to **"reset" some state when a prop changes,** consider either making a component [fully controlled](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) or [fully uncontrolled with a key](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) instead.
+- Jika Anda perlu **melakukan efek samping** (misalnya, pengambilan data atau animasi) sebagai respons terhadap perubahan *props*, gunakan metode [`componentDidUpdate`](#componentdidupdate) sebagai gantinya.
+- Jika Anda ingin **menghitung ulang beberapa data hanya saat prop berubah,** [gunakan pembantu memoisasi sebagai gantinya.](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization)
+- Jika Anda ingin **"mereset" beberapa *state* saat *prop* berubah,** pertimbangkan untuk membuat komponen [fully controlled](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) atau [fully uncontrolled with a key](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key).
 
 </Pitfall>
 
-#### Parameters {/*static-getderivedstatefromprops-parameters*/}
+#### Parameter {/*static-getderivedstatefromprops-parameters*/}
 
-- `props`: The next props that the component is about to render with.
-- `state`: The next state that the component is about to render with.
+- `props`: *Props* berikutnya yang akan di-*render* oleh komponen.
+- `state`: *State* berikutnya yang akan di-*render* oleh komponen.
 
-#### Returns {/*static-getderivedstatefromprops-returns*/}
+#### Kembalian {/*static-getderivedstatefromprops-returns*/}
 
-`static getDerivedStateFromProps` return an object to update the state, or `null` to update nothing.
+`static getDerivedStateFromProps` mengembalikan objek untuk memperbarui *state*, atau `null` untuk tidak memperbarui apa pun.
 
-#### Caveats {/*static-getderivedstatefromprops-caveats*/}
+#### Catatan penting {/*static-getderivedstatefromprops-caveats*/}
 
-- This method is fired on *every* render, regardless of the cause. This is different from [`UNSAFE_componentWillReceiveProps`](#unsafe_cmoponentwillreceiveprops), which only fires when the parent causes a re-render and not as a result of a local `setState`.
+- Metode ini diaktifkan pada *setiap* *render*, apa pun penyebabnya. hal ini berbeda dengan [`UNSAFE_componentWillReceiveProps`](#unsafe_cmoponentwillreceiveprops), yang hanya aktif bila induk menyebabkan *render* ulang dan bukan sebagai akibat dari `setState` lokal.
 
-- This method doesn't have access to the component instance. If you'd like, you can reuse some code between `static getDerivedStateFromProps` and the other class methods by extracting pure functions of the component props and state outside the class definition.
+- Metode ini tidak memiliki akses ke instance komponen. Jika mau, Anda bisa menggunakan kembali beberapa kode antara `static getDerivedStateFromProps` dan metode kelas lainnya dengan mengekstraksi fungsi murni dari *props* komponen dan *state* di luar definisi kelas.
 
 <Note>
 
-Implementing `static getDerivedStateFromProps` in a class component is equivalent to [calling the `set` function from `useState` during rendering](/reference/react/useState#storing-information-from-previous-renders) in a function component.
+Menerapkan `static getDerivedStateFromProps` pada *class component* setara dengan [memanggil fungsi `set` dari `useState` selama rendering](/reference/react/useState#storing-information-from-previous-renders) pada *function component*.
 
 </Note>
 
 ---
 
-## Usage {/*usage*/}
+## Penggunaan {/*usage*/}
 
-### Defining a class component {/*defining-a-class-component*/}
+### Mendefinisikan class component {/*defining-a-class-component*/}
 
-To define a React component as a class, extend the built-in `Component` class and define a [`render` method:](#render)
+Untuk mendefinisikan komponen React sebagai sebuah *class*, *extend* `Component` *class* bawaan dan definisikan [*method* `render`:](#render)
 
 ```js
 import { Component } from 'react';
@@ -1113,9 +1115,9 @@ class Greeting extends Component {
 }
 ```
 
-React will call your [`render`](#render) method whenever it needs to figure out what to display on the screen. Usually, you will return some [JSX](/learn/writing-markup-with-jsx) from it. Your `render` method should be a [pure function:](https://en.wikipedia.org/wiki/Pure_function) it should only calculate the JSX.
+React akan memanggil metode [`render`](#render) Anda kapan pun diperlukan untuk mencari tahu apa yang akan ditampilkan di layar. Biasanya, Anda akan mengembalikan beberapa [JSX](/learn/writing-markup-with-jsx) darinya. Metode `render` Anda harus berupa [pure function:](https://en.wikipedia.org/wiki/Pure_function) yang seharusnya hanya menghitung JSX.
 
-Similarly to [function components,](/learn/your-first-component#defining-a-component) a class component can [receive information by props](/learn/your-first-component#defining-a-component) from its parent component. However, the syntax for reading props is different. For example, if the parent component renders `<Greeting name="Taylor" />`, then you can read the `name` prop from [`this.props`](#props), like `this.props.name`:
+Mirip dengan [*function components*,](/learn/your-first-component#defining-a-component) sebuah *class component* dapat [menerima informasi dengan *props*](/learn/your-first-component#defining-a-component) dari komponen induknya. Namun, sintaks untuk membaca *props* berbeda. Misalnya, jika komponen induk me-*render* `<Greeting name="Taylor" />`, maka Anda dapat membaca *prop* `name` dari [`this.props`](#props), seperti `this.props.name`:
 
 <Sandpack>
 
@@ -1141,19 +1143,19 @@ export default function App() {
 
 </Sandpack>
 
-Note that Hooks (functions starting with `use`, like [`useState`](/reference/react/useState)) are not supported inside class components.
+Perhatikan bahwa Hooks (fungsi yang dimulai dengan `use`, seperti [`useState`](/reference/react/useState)) tidak didukung di dalam *class components*.
 
 <Pitfall>
 
-We recommend defining components as functions instead of classes. [See how to migrate.](#migrating-a-simple-component-from-a-class-to-a-function)
+Kami merekomendasikan mendefinisikan komponen sebagai fungsi, bukan kelas. [Lihat cara bermigrasi.](#migrating-a-simple-component-from-a-class-to-a-function)
 
 </Pitfall>
 
 ---
 
-### Adding state to a class component {/*adding-state-to-a-class-component*/}
+### Menambahkan state pada class component {/*adding-state-to-a-class-component*/}
 
-To add [state](/learn/state-a-components-memory) to a class, assign an object to a property called [`state`](#state). To update state, call [`this.setState`](#setstate).
+Untuk menambahkan [state](/learn/state-a-components-memory) ke dalam sebuah kelas, menetapkan objek ke properti yang disebut [`state`](#state). Untuk mengupdate *state*, panggil [`this.setState`](#setstate).
 
 <Sandpack>
 
@@ -1203,21 +1205,21 @@ button { display: block; margin-top: 10px; }
 
 <Pitfall>
 
-We recommend defining components as functions instead of classes. [See how to migrate.](#migrating-a-component-with-state-from-a-class-to-a-function)
+Kami merekomendasikan mendefinisikan komponen sebagai fungsi, bukan kelas. [Lihat cara bermigrasi.](#migrating-a-component-with-state-from-a-class-to-a-function)
 
 </Pitfall>
 
 ---
 
-### Adding lifecycle methods to a class component {/*adding-lifecycle-methods-to-a-class-component*/}
+### Menambahkan *lifecycle methods* ke *class component* {/*adding-lifecycle-methods-to-a-class-component*/}
 
-There are a few special methods you can define on your class.
+Ada beberapa metode khusus yang dapat Anda tentukan di kelas Anda.
 
-If you define the [`componentDidMount`](#componentdidmount) method, React will call it when your component is added *(mounted)* to the screen. React will call [`componentDidUpdate`](#componentdidupdate) after your component re-renders due to changed props or state. React will call [`componentWillUnmount`](#componentwillunmount) after your component has been removed *(unmounted)* from the screen.
+Jika Anda mendefinisikan metode [`componentDidMount`](#componentdidmount), React akan memanggilnya ketika komponen Anda ditambahkan *(mounted)* ke layar. React akan memanggil [`componentDidUpdate`](#componentdidupdate) setelah komponen Anda di-*render* ulang karena perubahan *props* atau *state*. React akan memanggil [`componentWillUnmount`](#componentwillunmount) setelah komponen Anda dihapus *(unmount)* dari layar.
 
-If you implement `componentDidMount`, you usually need to implement all three lifecycles to avoid bugs. For example, if `componentDidMount` reads some state or props, you also have to implement `componentDidUpdate` to handle their changes, and `componentWillUnmount` to clean up whatever `componentDidMount` was doing.
+Jika Anda mengimplementasikan `componentDidMount`, biasanya Anda perlu mengimplementasikan ketiga *lifecycles* untuk menghindari bug. Misalnya, jika `componentDidMount` membaca beberapa *state* atau *props*, Anda juga harus mengimplementasikan `componentDidUpdate` untuk menangani perubahannya, dan `componentWillUnmount` untuk membersihkan apa pun yang dilakukan `componentDidMount`.
 
-For example, this `ChatRoom` component keeps a chat connection synchronized with props and state:
+Misalnya, komponen `ChatRoom` ini menjaga koneksi obrolan tetap tersinkronisasi dengan *props* dan *state*:
 
 <Sandpack>
 
@@ -1333,11 +1335,11 @@ button { margin-left: 10px; }
 
 </Sandpack>
 
-Note that in development when [Strict Mode](/reference/react/StrictMode) is on, React will call `componentDidMount`, immediately call `componentWillUnmount`, and then call `componentDidMount` again. This helps you notice if you forgot to implement `componentWillUnmount` or if its logic doesn't fully "mirror" what `componentDidMount` does.
+Perhatikan bahwa dalam pengembangan saat [Strict Mode](/reference/react/StrictMode) aktif, React akan memanggil `componentDidMount`, segera memanggil `componentWillUnmount`, lalu memanggil `componentDidMount` lagi. Ini membantu Anda menyadari jika Anda lupa mengimplementasikan `componentWillUnmount` atau jika logikanya tidak sepenuhnya "mencerminkan" apa yang dilakukan `componentDidMount`.
 
 <Pitfall>
 
-We recommend defining components as functions instead of classes. [See how to migrate.](#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
+Kami merekomendasikan mendefinisikan komponen sebagai fungsi, bukan kelas. [Lihat cara bermigrasi.](#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
 
 </Pitfall>
 
@@ -1345,9 +1347,9 @@ We recommend defining components as functions instead of classes. [See how to mi
 
 ### Catching rendering errors with an error boundary {/*catching-rendering-errors-with-an-error-boundary*/}
 
-By default, if your application throws an error during rendering, React will remove its UI from the screen. To prevent this, you can wrap a part of your UI into an *error boundary*. An error boundary is a special component that lets you display some fallback UI instead of the part that crashed--for example, an error message.
+Secara default, jika aplikasi Anda menampilkan kesalahan selama *render*-ing, React akan menghapus UI-nya dari layar. Untuk mencegah hal ini, Anda dapat menggabungkan sebagian UI ke dalam *error boundary*. *Error Boundary* adalah komponen khusus yang memungkinkan Anda menampilkan beberapa UI cadangan, bukan bagian yang mengalami kesalahan misalnya, pesan kesalahan.
 
-To implement an error boundary component, you need to provide [`static getDerivedStateFromError`](#static-getderivedstatefromerror) which lets you update state in response to an error and display an error message to the user. You can also optionally implement [`componentDidCatch`](#componentdidcatch) to add some extra logic, for example, to log the error to an analytics service.
+Untuk mengimplementasikan komponen batas kesalahan (error boundary), Anda perlu menyediakan [`static getDerivedStateFromError`](#static-getderivedstatefromerror) yang memungkinkan Anda memperbarui *state* sebagai respons terhadap kesalahan dan menampilkan pesan kesalahan kepada pengguna. Anda juga dapat secara opsional mengimplementasikan [`componentDidCatch`](#componentdidcatch) untuk menambahkan beberapa logika tambahan, misalnya, untuk mencatat kesalahan ke layanan analitik.
 
 ```js {7-10,12-19}
 class ErrorBoundary extends React.Component {
@@ -1357,12 +1359,12 @@ class ErrorBoundary extends React.Component {
   }
 
   static getDerivedStateFromError(error) {
-    // Update state so the next render will show the fallback UI.
+    // Perbarui state sehingga render selanjutnya menunjukkan UI fallback.
     return { hasError: true };
   }
 
   componentDidCatch(error, info) {
-    // Example "componentStack":
+    // Contoh "componentStack":
     //   in ComponentThatThrows (created by App)
     //   in ErrorBoundary (created by App)
     //   in div (created by App)
@@ -1372,7 +1374,7 @@ class ErrorBoundary extends React.Component {
 
   render() {
     if (this.state.hasError) {
-      // You can render any custom fallback UI
+      // Anda dapat me-render UI fallback apa pun.
       return this.props.fallback;
     }
 
@@ -1381,7 +1383,7 @@ class ErrorBoundary extends React.Component {
 }
 ```
 
-Then you can wrap a part of your component tree with it:
+Kemudian Anda dapat membungkus bagian dari pohon komponen Anda dengannya:
 
 ```js {1,3}
 <ErrorBoundary fallback={<p>Something went wrong</p>}>
@@ -1389,25 +1391,25 @@ Then you can wrap a part of your component tree with it:
 </ErrorBoundary>
 ```
 
-If `Profile` or its child component throws an error, `ErrorBoundary` will "catch" that error, display a fallback UI with the error message you've provided, and send a production error report to your error reporting service.
+Jika `Profile` atau komponen anaknya mengalami kesalahan, `ErrorBoundary` akan "menangkap" kesalahan tersebut, menampilkan UI cadangan dengan pesan kesalahan yang telah Anda sediakan, dan mengirim laporan kesalahan produksi ke layanan pelaporan kesalahan Anda.
 
-You don't need to wrap every component into a separate error boundary. When you think about the [granularity of error boundaries,](https://www.brandondail.com/posts/fault-tolerance-react) consider where it makes sense to display an error message. For example, in a messaging app, it makes sense to place an error boundary around the list of conversations. It also makes sense to place one around every individual message. However, it wouldn't make sense to place a boundary around every avatar.
+Anda tidak perlu melibatkan setiap komponen ke dalam batas kesalahan (error boundary) yang terpisah. Saat Anda mempertimbangkan [granularitas dari batas kesalahan,](https://aweary.dev/fault-tolerance-react/) pertimbangkan di mana tepatnya menampilkan pesan kesalahan. Sebagai contoh, dalam aplikasi pesan, masuk akal untuk menempatkan batas kesalahan di sekitar daftar percakapan. Juga masuk akal untuk menempatkannya di sekitar setiap pesan individu. Namun, tidak masuk akal untuk menempatkan batasan di sekitar setiap avatar.
 
 <Note>
 
-There is currently no way to write an error boundary as a function component. However, you don't have to write the error boundary class yourself. For example, you can use [`react-error-boundary`](https://github.com/bvaughn/react-error-boundary) instead.
+Saat ini, belum ada cara untuk menulis batas kesalahan sebagai *function component*. Namun, Anda tidak perlu menulis kelas batas kesalahan sendiri. Sebagai contoh, Anda dapat menggunakan [`react-error-boundary`](https://github.com/bvaughn/react-error-boundary) sebagai gantinya.
 
 </Note>
 
 ---
 
-## Alternatives {/*alternatives*/}
+## Alternatif {/*alternatives*/}
 
-### Migrating a simple component from a class to a function {/*migrating-a-simple-component-from-a-class-to-a-function*/}
+### Migrasi komponen sederhana dari *class* ke sebuah *function* {/*migrating-a-simple-component-from-a-class-to-a-function*/}
 
-Typically, you will [define components as functions](/learn/your-first-component#defining-a-component) instead.
+Biasanya, Anda akan [mendefinisikan komponen sebagai `functions`](/learn/your-first-component#defining-a-component).
 
-For example, suppose you're converting this `Greeting` class component to a function:
+Sebagai contoh, asumsikan Anda sedang mengonversi komponen kelas `Greeting` ini menjadi sebuah fungsi:
 
 <Sandpack>
 
@@ -1433,15 +1435,15 @@ export default function App() {
 
 </Sandpack>
 
-Define a function called `Greeting`. This is where you will move the body of your `render` function.
+Tentukan sebuah fungsi yang disebut `Greeting`. Di sinilah Anda akan memindahkan tubuh fungsi `render` Anda.
 
 ```js
 function Greeting() {
-  // ... move the code from the render method here ...
+  // ... pindahkan kode dari `render method` di sini ...
 }
 ```
 
-Instead of `this.props.name`, define the `name` prop [using the destructuring syntax](/learn/passing-props-to-a-component) and read it directly:
+Sebagai pengganti `this.props.name`, definisikan prop `name` [menggunakan sintaks *destructuring*](/learn/passing-props-to-a-component) dan gunakan secara langsung:
 
 ```js
 function Greeting({ name }) {
@@ -1449,7 +1451,7 @@ function Greeting({ name }) {
 }
 ```
 
-Here is a complete example:
+Berikut contoh lengkapnya:
 
 <Sandpack>
 
@@ -1473,9 +1475,9 @@ export default function App() {
 
 ---
 
-### Migrating a component with state from a class to a function {/*migrating-a-component-with-state-from-a-class-to-a-function*/}
+### Migrasi komponen dengan `state` dari kelas ke fungsi {/*migrating-a-component-with-state-from-a-class-to-a-function*/}
 
-Suppose you're converting this `Counter` class component to a function:
+Asumsikan Anda sedang mengonversi komponen kelas `Counter` ini menjadi sebuah fungsi.
 
 <Sandpack>
 
@@ -1523,7 +1525,7 @@ button { display: block; margin-top: 10px; }
 
 </Sandpack>
 
-Start by declaring a function with the necessary [state variables:](/reference/react/useState#adding-state-to-a-component)
+Mulai dengan mendeklarasikan sebuah fungsi dengan variabel [state](/reference/react/useState#adding-state-to-a-component) yang diperlukan:
 
 ```js {4-5}
 import { useState } from 'react';
@@ -1534,7 +1536,7 @@ function Counter() {
   // ...
 ```
 
-Next, convert the event handlers:
+Selanjutnya, konversi  `event handlers`:
 
 ```js {5-7,9-11}
 function Counter() {
@@ -1551,9 +1553,9 @@ function Counter() {
   // ...
 ```
 
-Finally, replace all references starting with `this` with the variables and functions you defined in your component. For example, replace `this.state.age` with `age`, and replace `this.handleNameChange` with `handleNameChange`.
+Terakhir, gantikan semua referensi yang dimulai dengan `this` dengan variabel dan fungsi yang Anda definisikan di komponen Anda. Misalnya, gantikan `this.state.age` dengan `age`, dan gantikan `this.handleNameChange` dengan `handleNameChange`.
 
-Here is a fully converted component:
+Berikut adalah komponen yang telah sepenuhnya dikonversi:
 
 <Sandpack>
 
@@ -1595,9 +1597,9 @@ button { display: block; margin-top: 10px; }
 
 ---
 
-### Migrating a component with lifecycle methods from a class to a function {/*migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function*/}
+### Migrasi sebuah komponen dengan *lifecycle methods* dari kelas ke fungsi {/*migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function*/}
 
-Suppose you're converting this `ChatRoom` class component with lifecycle methods to a function:
+Asumsikan Anda sedang mengonversi komponen kelas `ChatRoom` ini dengan *lifecycle methods* ke sebuah fungsi:
 
 <Sandpack>
 
@@ -1694,7 +1696,7 @@ export default class ChatRoom extends Component {
 
 ```js src/chat.js
 export function createConnection(serverUrl, roomId) {
-  // A real implementation would actually connect to the server
+  // Sebuah implementasi nyata sebenarnya akan terhubung ke server.
   return {
     connect() {
       console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
@@ -1713,11 +1715,11 @@ button { margin-left: 10px; }
 
 </Sandpack>
 
-First, verify that your [`componentWillUnmount`](#componentwillunmount) does the opposite of [`componentDidMount`.](#componentdidmount) In the above example, that's true: it disconnects the connection that `componentDidMount` sets up. If such logic is missing, add it first.
+Pertama, verifikasi bahwa metode [`componentWillUnmount`](#componentwillunmount) Anda melakukan kebalikan dari [`componentDidMount`](#componentdidmount). Pada contoh di atas, hal ini terjadi: metode tersebut memutuskan koneksi yang dibuat oleh `componentDidMount`. Jika logika semacam itu tidak ada, tambahkan terlebih dahulu.
 
-Next, verify that your [`componentDidUpdate`](#componentdidupdate) method handles changes to any props and state you're using in `componentDidMount`. In the above example, `componentDidMount` calls `setupConnection` which reads `this.state.serverUrl` and `this.props.roomId`. This is why `componentDidUpdate` checks whether `this.state.serverUrl` and `this.props.roomId` have changed, and resets the connection if they did. If your `componentDidUpdate` logic is missing or doesn't handle changes to all relevant props and state, fix that first.
+Selanjutnya, pastikan metode [`componentDidUpdate`](#componentdidupdate) Anda menangani perubahan pada semua prop dan state yang Anda gunakan di `componentDidMount`. Pada contoh di atas, `componentDidMount` memanggil `setupConnection` yang membaca `this.state.serverUrl` dan `this.props.roomId`. Oleh karena itu, `componentDidUpdate` memeriksa apakah `this.state.serverUrl` dan `this.props.roomId` telah berubah, dan mereset koneksi jika iya. Jika logika `componentDidUpdate` Anda tidak ada atau tidak menangani perubahan pada semua prop dan state yang relevan, perbaiki terlebih dahulu.
 
-In the above example, the logic inside the lifecycle methods connects the component to a system outside of React (a chat server). To connect a component to an external system, [describe this logic as a single Effect:](/reference/react/useEffect#connecting-to-an-external-system)
+Pada contoh di atas, logika di dalam metode siklus hidup menghubungkan komponen ke sistem di luar React (sebuah server obrolan). Untuk menghubungkan sebuah komponen ke sistem eksternal, [jelaskan logika ini sebagai sebuah Efek tunggal:](/reference/react/useEffect#connecting-to-an-external-system)
 
 ```js {6-12}
 import { useState, useEffect } from 'react';
@@ -1737,7 +1739,7 @@ function ChatRoom({ roomId }) {
 }
 ```
 
-This [`useEffect`](/reference/react/useEffect) call is equivalent to the logic in the lifecycle methods above. If your lifecycle methods do multiple unrelated things, [split them into multiple independent Effects.](/learn/removing-effect-dependencies#is-your-effect-doing-several-unrelated-things) Here is a complete example you can play with:
+Panggilan [`useEffect`](/reference/react/useEffect) ini setara dengan logika dalam *lifecycle methods* di atas. Jika *lifecycle methods* Anda melakukan beberapa hal yang tidak terkait, [pisahkan mereka menjadi beberapa Efek independen.](/learn/removing-effect-dependencies#is-your-effect-doing-several-unrelated-things) Berikut adalah contoh lengkap yang dapat Anda coba:
 
 <Sandpack>
 
@@ -1803,7 +1805,7 @@ export default function ChatRoom({ roomId }) {
 
 ```js src/chat.js
 export function createConnection(serverUrl, roomId) {
-  // A real implementation would actually connect to the server
+  // Sebuah implementasi nyata sebenarnya akan terhubung ke server.
   return {
     connect() {
       console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
@@ -1824,15 +1826,15 @@ button { margin-left: 10px; }
 
 <Note>
 
-If your component does not synchronize with any external systems, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+Jika komponen Anda tidak disinkronkan dengan sistem eksternal apapun, [Anda mungkin tidak membutuhkan sebuah *Effect*.](/learn/you-might-not-need-an-effect)
 
 </Note>
 
 ---
 
-### Migrating a component with context from a class to a function {/*migrating-a-component-with-context-from-a-class-to-a-function*/}
+### Migrasi komponen dengan `context` dari kelas ke fungsi {/*migrating-a-component-with-context-from-a-class-to-a-function*/}
 
-In this example, the `Panel` and `Button` class components read [context](/learn/passing-data-deeply-with-context) from [`this.context`:](#context)
+Pada contoh ini, kelas komponen `Panel` dan `Button` membaca [context](/learn/passing-data-deeply-with-context) dari [`this.context`:](#context)
 
 <Sandpack>
 
@@ -1926,7 +1928,7 @@ export default function MyApp() {
 
 </Sandpack>
 
-When you convert them to function components, replace `this.context` with [`useContext`](/reference/react/useContext) calls:
+Ketika Anda mengonversi ke komponen fungsi, ubah `this.context` dengan memanggil [`useContext`](/reference/react/useContext):
 
 <Sandpack>