docs: translate 'react calls component and hooks'

src/content/reference/rules/react-calls-components-and-hooks.md

@@ -1,101 +1,102 @@
 ---
-title: React calls Components and Hooks
+title: React memanggil Komponen dan Hooks
 ---
 
 <Intro>
-React is responsible for rendering components and Hooks when necessary to optimize the user experience. 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 dan Hooks saat diperlukan untuk mengoptimisasi pengalaman pengguna. Ini bersifat deklaratif: Anda memberi tahu React apa yang harus di-*render* dalam logika komponen Anda, dan React akan mencari cara terbaik untuk menampilkannya kepada pengguna Anda.
+
 </Intro>
 
 <InlineToc />
 
 ---
 
-## Never call component functions directly {/*never-call-component-functions-directly*/}
-Components should only be used in JSX. Don't call them as regular functions. React should call it.
+## Jangan pernah memanggil fungsi komponen secara langsung {/*never-call-component-functions-directly*/}
+Komponen seharusnya hanya digunakan di JSX. Jangan memanggil komponen seperti fungsi pada umumnya. React yang seharusnya memanggilnya.
+
+React harus menentukan kapan sebuah fungsi komponen dipanggil [saat sedang di-*render*](/reference/rules/components-and-hooks-must-be-pure#how-does-react-run-your-code). Di React, hal ini dilakukan dengan JSX.
 
-React must decide when your component function is called [during rendering](/reference/rules/components-and-hooks-must-be-pure#how-does-react-run-your-code). In React, you do this using JSX.
 
 ```js {2}
 function BlogPost() {
-  return <Layout><Article /></Layout>; // ✅ Good: Only use components in JSX
+  return <Layout><Article /></Layout>; // ✅ Baik: Hanya menggunakan komponen dalam bentuk JSX
 }
 ```
 
 ```js {2}
 function BlogPost() {
-  return <Layout>{Article()}</Layout>; // 🔴 Bad: Never call them directly
+  return <Layout>{Article()}</Layout>; // 🔴 Buruk: Jangan pernah memanggil komponen secara langsung
 }
 ```
+Jika sebuah komponen mengandung Hooks, sangat mudah untuk melanggar [Aturan dari Hooks](/reference/rules/rules-of-hooks) saat komponen secara langsung dipanggil dalam sebuah loop ataupun secara kondisional.
 
-If a component contains Hooks, it's easy to violate the [Rules of Hooks](/reference/rules/rules-of-hooks) when components are called directly in a loop or conditionally.
 
-Letting React orchestrate rendering also allows a number of benefits:
+Membiarkan React melakukan orkestrasi rendering juga memungkinkan sejumlah manfaat:
 
-* **Components become more than functions.** React can augment them with features like _local state_ through Hooks that are tied to the component's identity in the tree.
-* **Component types participate in reconciliation.** By letting React call your components, you also tell it more about the conceptual structure of your tree. For example, when you move from rendering `<Feed>` to the `<Profile>` page, React won’t attempt to re-use them.
-* **React can enhance your user experience.** For example, it can let the browser do some work between component calls so that re-rendering a large component tree doesn’t block the main thread.
-* **A better debugging story.** If components are first-class citizens that the library is aware of, we can build rich developer tools for introspection in development.
-* **More efficient reconciliation.** React can decide exactly which components in the tree need re-rendering and skip over the ones that don't. That makes your app faster and more snappy.
+* **Komponen menjadi lebih dari sebuah fungsi.** React dapat menambahkannya dengan fitur seperti _localstate_ melalui Hooks yang diikat ke identitas komponen di dalam pohon React.
+* **Tipe komponen ikut sertadalam rekonsiliasi.** Dengan membiarkan React memanggil komponen Anda, Anda juga memberi tahu React lebih banyak tentang struktur konseptual dari pohon Anda. Sebagai contoh, ketika Anda berpindah dari merender `<Feed>` ke halaman `<Profile>`, React tidak akan mencoba untuk menggunakannya kembali.
+* **React dapat memingkatkan pengalaman pengguna anda.** Sebagai contoh, jika anda membiarkan peramban untuk melakukan beberapa pekerjaan di antara pemanggilan komponen sehingga me-render ulang pohon komponen yang besar tidak memblokir utas utama.
+* **Story debugging yang lebih baik** Jika komponen adalah warga kelas satu yang diketahui oleh library, kita dapat membuat alat bantu pengembang yang kaya untuk introspeksi dalam pengembangan.
+* **Rekonsiliasi yang lebih efisien.** React dapat memutuskan dengan tepat komponen mana di dalam tree yang perlu di-render ulang dan melewatkan komponen yang tidak perlu di-render ulang. Hal ini membuat aplikasi Anda menjadi lebih cepat dan lebih tajam.
 
 ---
 
-## Never pass around Hooks as regular values {/*never-pass-around-hooks-as-regular-values*/}
+## Jangan oper Hooks sebagai nilai {/*never-pass-around-hooks-as-regular-values*/}
 
-Hooks should only be called inside of components or Hooks. Never pass it around as a regular value.
+Hooks seharusnya hanya dipanggil didalam sebuah komponen atau Hooks. Jangan pernah mengopernya sebagai sebuah nilai.
 
-Hooks allow you to augment a component with React features. They should always be called as a function, and never passed around as a regular value. This enables _local reasoning_, or the ability for developers to understand everything a component can do by looking at that component in isolation.
+Hooks memungkinkan anda untuk menambahkan sebuah komponen dalam fitur React. Hooks seharusnya harus selalu dipanggil sebagai sebuah fungsi, dan tidak dioper sebagai sebuah nilai. Hal ini memungkinkan _local reasoning_, atau kemampuan para developer untuk memahami semua yang dapat dilakukan oleh sebuah komponen hanya dengan melihat komponen tersebut secara terisolasi.
 
-Breaking this rule will cause React to not automatically optimize your component.
+Melanggar aturan ini akan menyebabkan React untuk tidak secara langsung mengoptimisasi komponen anda.
 
-### Don't dynamically mutate a Hook {/*dont-dynamically-mutate-a-hook*/}
+### Jangan melakukan mutasi Hook secara dinamis {/*dont-dynamically-mutate-a-hook*/}
 
-Hooks should be as "static" as possible. This means you shouldn't dynamically mutate them. For example, this means you shouldn't write higher order Hooks:
+Sebuah Hooks sebagainya selalu se-"statis" mungkin. Berarti anda seharusnya tidak melakukan mutasi secara dinamis pada Hooks. Sebagai contoh, artinya anda tidak seharusnya menulis sebuah Hooks dengan orde yang lebih tinggi:
 
 ```js {2}
 function ChatInput() {
-  const useDataWithLogging = withLogging(useData); // 🔴 Bad: don't write higher order Hooks
+  const useDataWithLogging = withLogging(useData); // 🔴 Buruk: jangan menulis sebuah Hooks dengan orde yang lebih tinggi
   const data = useDataWithLogging();
 }
 ```
 
-Hooks should be immutable and not be mutated. Instead of mutating a Hook dynamically, create a static version of the Hook with the desired functionality.
+Hooks seharusnya tidak dapat dimutasi dan tidak dilakukan mutasi. Melainkan memutasi Hook secara dinamis, buatlah sebuah bentuk statis dari Hook tersebut dengan fungsionalitas yang diinginkan.
 
 ```js {2,6}
 function ChatInput() {
-  const data = useDataWithLogging(); // ✅ Good: Create a new version of the Hook
+  const data = useDataWithLogging(); // ✅ Baik: Buatlah sebuah versi baru dari Hook
 }
 
 function useDataWithLogging() {
-  // ... Create a new version of the Hook and inline the logic here
+  // ... Buatlah versi baru hook dan logikanya disini
 }
 ```
 
-### Don't dynamically use Hooks {/*dont-dynamically-use-hooks*/}
+### Jangan menggunakan Hooks secara dinamis {/*dont-dynamically-use-hooks*/}
 
-Hooks should also not be dynamically used: for example, instead of doing dependency injection in a component by passing a Hook as a value:
+Hooks juga seharusnya tidak digunakan secara dinamis: sebagai contoh, gunakanlah *dependency injection* pada sebuah komponen dengan cara mengopernya kedalam Hook sebaga sebuah nilai:
 
 ```js {2}
 function ChatInput() {
-  return <Button useData={useDataWithLogging} /> // 🔴 Bad: don't pass Hooks as props
+  return <Button useData={useDataWithLogging} /> // 🔴 Buruk: Jangan mengoper Hooks sebagai props
 }
 ```
 
-You should always inline the call of the Hook into that component and handle any logic in there.
+Anda harus selalu mensejajarkan pemanggilan Hook ke dalam komponen tersebut dan menangani logika apa pun di dalamnya.
 
 ```js {6}
 function ChatInput() {
   return <Button />
 }
 
 function Button() {
-  const data = useDataWithLogging(); // ✅ Good: Use the Hook directly
+  const data = useDataWithLogging(); // ✅ Baik: Gunakan Hook secara langsung 
 }
 
 function useDataWithLogging() {
-  // If there's any conditional logic to change the Hook's behavior, it should be inlined into
-  // the Hook
+  // Jika ada logika kondisional untuk mengubah perilaku Hook, logika tersebut harus di-inline-kan menjadi
+  // sebuah Hook
 }
 ```
 
-This way, `<Button />` is much easier to understand and debug. When Hooks are used in dynamic ways, it increases the complexity of your app greatly and inhibits local reasoning, making your team less productive in the long term. It also makes it easier to accidentally break the [Rules of Hooks](/reference/rules/rules-of-hooks) that Hooks should not be called conditionally. If you find yourself needing to mock components for tests, it's better to mock the server instead to respond with canned data. If possible, it's also usually more effective to test your app with end-to-end tests.
-
+Dengan cara ini, `<Button />` menjadi lebih mudah untuk dipahami dan didebug. Saat Hooks digunakan dengan cara yang dinamis, komplesitas dari aplikasi akan meningkat secara signifikan dan menghambat penalaran lokal, membuat tim anda menjadi lebih tidak produktif dalam jangka panjang. Hal ini juga memudahkan Anda untuk secara tidak sengaja melanggar [Aturan Hooks](/reference/rules/rules-of-hooks) bahwa Hooks tidak boleh dipanggil secara bersyarat. Jika Anda merasa perlu membuat *mock* komponen untuk pengujian, lebih baik membuat *mock* server untuk merespons dengan data kalengan. Jika memungkinkan, biasanya juga lebih efektif untuk menguji aplikasi Anda dengan pengujian *end-to-end*.