docs: translate 'Rules of React'

src/content/reference/rules/index.md

@@ -1,52 +1,52 @@
 ---
-title: Rules of React
+title: Peraturan React
 ---
 
 <Intro>
-Just as different programming languages have their own ways of expressing concepts, React has its own idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications.
+Sama seperti bahasa pemrograman lain yang memiliki cara tersendiri untuk mengekspresikan konsep, React memiliki idiom atau aturannya sendiri untuk menulis pola dengan cara yang mudah dipahami dan menghasilkan aplikasi berkualitas tinggi.
 </Intro>
 
 <InlineToc />
 
 ---
 
 <Note>
-To learn more about expressing UIs with React, we recommend reading [Thinking in React](/learn/thinking-in-react).
+Untuk mempelajari lebih lanjut tentang mengekspresikan antarmuka dengan React, kami sarankan untuk membaca [Cara Berpikir dengan React](/learn/thinking-in-react).
 </Note>
 
-This section describes the rules you need to follow to write idiomatic React code. Writing idiomatic React code can help you write well organized, safe, and composable applications. These properties make your app more resilient to changes and makes it easier to work with other developers, libraries, and tools.
+Bagian ini menjelaskan peraturan yang perlu Anda ikuti untuk menulis kode React yang idiomatis. Menulis kode React yang idiomatis dapat membantu Anda menulis aplikasi yang terorganisisasi dengan baik, aman, dan dapat disusun. Hal ini membuat aplikasi Anda lebih tahan terhadap perubahan dan memudahkan bekerja dengan pengembang, pustaka (*library*), dan alat lain.
 
-These rules are known as the **Rules of React**. They are rules – and not just guidelines – in the sense that if they are broken, your app likely has bugs. Your code also becomes unidiomatic and harder to understand and reason about.
+Peraturan ini dikenal sebagai **Peraturan React**. Ini adalah aturan, bukan sekadar pedoman, yang dalam artian jika peraturan tersebut dilanggar, kemungkinan besar aplikasi Anda memiliki *bug*. Kode Anda juga menjadi tidak idiomatis dan lebih sulit untuk dipahami dan dipikirkan.
 
-We strongly recommend using [Strict Mode](/reference/react/StrictMode) alongside React's [ESLint plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to help your codebase follow the Rules of React. By following the Rules of React, you'll be able to find and address these bugs and keep your application maintainable.
+Kami sangat merekomendasikan penggunaan [Strict Mode](/reference/react/StrictMode) bersama dengan [*plugin* ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) untuk React, untuk membantu basis kode (*codebase*) Anda mematuhi Peraturan React. Dengan mengikuti Peraturan React, Anda akan dapat menemukan dan mengatasi bug ini dan menjaga aplikasi Anda tetap dapat dipelihara.
 
 ---
 
-## Components and Hooks must be pure {/*components-and-hooks-must-be-pure*/}
+## Komponen dan *Hooks* harus murni {/*components-and-hooks-must-be-pure*/}
 
-[Purity in Components and Hooks](/reference/rules/components-and-hooks-must-be-pure) is a key rule of React that makes your app predictable, easy to debug, and allows React to automatically optimize your code.
+[Kemurnian dalam Komponen dan *Hooks*](/reference/rules/components-and-hooks-must-be-pure) adalah peraturan utama React yang membuat aplikasi Anda dapat diprediksi, mudah di-*debug*, dan memungkinkan React mengoptimalkan kode Anda secara otomatis. 
 
-* [Components must be idempotent](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) – React components are assumed to always return the same output with respect to their inputs – props, state, and context.
-* [Side effects must run outside of render](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) – Side effects should not run in render, as React can render components multiple times to create the best possible user experience.
-* [Props and state are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) – A component’s props and state are immutable snapshots with respect to a single render. Never mutate them directly.
-* [Return values and arguments to Hooks are immutable](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) – Once values are passed to a Hook, you should not modify them. Like props in JSX, values become immutable when passed to a Hook.
-* [Values are immutable after being passed to JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) – Don’t mutate values after they’ve been used in JSX. Move the mutation before the JSX is created.
+* [Komponen harus *idempotent*](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) – Komponen React diasumsikan selalu mengembalikan output yang sama terkait dengan inputnya – *props*, *state*, dan *context*.
+* [Efek samping harus dijalankan di luar *render*](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) – Efek samping tidak boleh dijalankan dalam *render*, karena React dapat me-*render* komponen beberapa kali untuk menciptakan pengalaman pengguna sebaik mungkin.
+* [*Props* dan *state* adalah sesuatu yang *immutable*](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) – *Props* dan *state* suatu komponen adalah *snapshot* yang *immutable* untuk sekali *render*. Jangan pernah mengubahnya secara langsung.
+* [Nilai kembalian dan argumen ke *Hooks* adalah sesuatu yang *immutable*](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) – Setelah nilai dioper ke sebuah *Hook*, Anda tidak boleh mengubahnya. Seperti *props* dalam JSX, nilai menjadi *immutable* saat dioper ke *Hook*.
+* [Nilai menjadi *immutable* setelah dioper ke JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) – Jangan ubah nilai setelah digunakan di JSX. Pindahkan perubahan (*mutation*) sebelum JSX dibuat.
 
 ---
 
-## React calls Components and Hooks {/*react-calls-components-and-hooks*/}
+## React memanggil Komponen dan *Hooks* {/*react-calls-components-and-hooks*/}
 
-[React is responsible for rendering components and hooks when necessary to optimize the user experience.](/reference/rules/react-calls-components-and-hooks) It is declarative: you tell React what to render in your component’s logic, and React will figure out how best to display it to your user.
+[React bertanggung jawab untuk me-*render* komponen-komponen dan *hooks* bila diperlukan untuk mengoptimalkan pengalaman pengguna.](/reference/rules/react-calls-components-and-hooks) React bersifat deklaratif: Anda memberi tahu React apa yang akan di-*render* dalam logika komponen Anda, dan React akan menentukan cara terbaik untuk menampilkannya kepada pengguna Anda.
 
-* [Never call component functions directly](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) – Components should only be used in JSX. Don’t call them as regular functions.
-* [Never pass around hooks as regular values](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) – Hooks should only be called inside of components. Never pass it around as a regular value.
+* [Jangan pernah memanggil fungsi komponen secara langsung](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) – Komponen hanya boleh digunakan di JSX. Jangan panggil mereka sebagai fungsi biasa.
+* [Jangan pernah mengoper *hooks* sebagai nilai biasa](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) – *Hooks* hanya boleh dipanggil di dalam komponen. Jangan pernah mengopernya sebagai nilai biasa.
 
 ---
 
-## Rules of Hooks {/*rules-of-hooks*/}
+## Peraturan *Hooks* {/*rules-of-hooks*/}
 
-Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called. You need to follow the [Rules of Hooks](/reference/rules/rules-of-hooks) when using them.
+Meskipun *Hooks* ditulis menggunakan fungsi JavaScript, mereka memiliki fungsi khusus sebagai logika antarmuka yang dapat digunakan kembali. Namun, ada batasan terkait saat Anda bisa menggunakan Hook. Anda perlu mematuhi [Peraturan *Hooks*](/reference/rules/rules-of-hooks) saat menggunakannya.
 
-* [Only call Hooks at the top level](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) – Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns.
-* [Only call Hooks from React functions](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – Don’t call Hooks from regular JavaScript functions.
+* [Panggil *Hooks* hanya di tingkat atas](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) – Jangan panggil *Hooks* di dalam perulangan (*loop*), kondisi (*if/else*), atau fungsi bersarang. Sebagai gantinya, selalu gunakan *Hooks* di level paling atas fungsi React Anda, sebelum kembalian awal (jika ada).
+* [Panggil *Hooks* hanya dari fungsi React](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – Jangan panggil *Hooks* dari fungsi JavaScript biasa.