Merge branch 'main' into main

src/content/reference/react/index.md

@@ -1,42 +1,42 @@
 ---
-title: React Reference Overview
+title: "Ikhtisar Referensi React"
 ---
 
 <Intro>
 
-This section provides detailed reference documentation for working with React. For an introduction to React, please visit the [Learn](/learn) section.
+Bagian ini menyediakan dokumentasi referensi yang mendetail untuk bekerja dengan React. Untuk pengenalan tentang React, Silahkan kunjungi bagian [Learn](/learn).
 
 </Intro>
 
-The React reference documentation is broken down into functional subsections:
+Dokumentasi referensi React dibagi menjadi beberapa sub-bagian fungsional:
 
 ## React {/*react*/}
 
-Programmatic React features:
+Fitur-fitur React yang diprogram:
 
-* [Hooks](/reference/react/hooks) - Use different React features from your components.
-* [Components](/reference/react/components) - Documents built-in components that you can use in your JSX.
-* [APIs](/reference/react/apis) - APIs that are useful for defining components.
-* [Directives](/reference/react/directives) - Provide instructions to bundlers compatible with React Server Components.
+* [*Hooks*](/reference/react/hooks) — Gunakan fitur React yang berbeda dari komponen Anda.
+* [Components](/reference/react/components) — Mendokumentasikan komponen bawaan yang dapat digunakan di JSX Anda.
+* [API](/reference/react/apis) — API yang berguna untuk mendefinisikan komponen.
+* [Directives](/reference/react/directives) — Menyediakan instruksi ke *bundler* yang kompatibel dengan React Server Component.
 
 ## React DOM {/*react-dom*/}
 
-React-dom contains features that are only supported for web applications (which run in the browser DOM environment). This section is broken into the following:
+React-dom berisi fitur-fitur yang hanya didukung untuk aplikasi web (yang berjalan di lingkungan peramban DOM). Bagian ini dibagi menjadi beberapa bagian berikut ini:
 
-* [Hooks](/reference/react-dom/hooks) - Hooks for web applications which run in the browser DOM environment.
-* [Components](/reference/react-dom/components) - React supports all of the browser built-in HTML and SVG components.
-* [APIs](/reference/react-dom) - The `react-dom` package contains methods supported only in web applications.
-* [Client APIs](/reference/react-dom/client) - The `react-dom/client` APIs let you render React components on the client (in the browser).
-* [Server APIs](/reference/react-dom/server) - The `react-dom/server` APIs let you render React components to HTML on the server.
+* [*Hooks*](/reference/react-dom/hooks) — *Hooks* untuk aplikasi web yang berjalan di lingkungan peramban DOM.
+* [Komponen](/reference/react-dom/components) — React mendukung semua komponen HTML dan SVG bawaan peramban.
+* [API](/reference/react-dom) — Paket `react-dom` berisi metode-metode yang hanya didukung dalam aplikasi web.
+* [API Klien](/reference/react-dom/client) — API `react-dom/client` memungkinkan Anda untuk me-*render* komponen React pada klien (di peramban).
+* [API Server](/reference/react-dom/server) — API `react-dom/server` memungkinkan Anda untuk me-*render* komponen React ke HTML di server.
 
-## Rules of React {/*rules-of-react*/}
+## Aturan React {/*rules-of-react*/}
 
-React has idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications:
+React memiliki idiom — atau aturan — tentang cara mengekspresikan pola dengan cara yang mudah dimengerti dan menghasilkan aplikasi berkualitas tinggi:
 
-* [Components and Hooks must be pure](/reference/rules/components-and-hooks-must-be-pure) – Purity makes your code easier to understand, debug, and allows React to automatically optimize your components and hooks correctly.
-* [React calls Components and Hooks](/reference/rules/react-calls-components-and-hooks) – React is responsible for rendering components and hooks when necessary to optimize the user experience.
-* [Rules of Hooks](/reference/rules/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.
+* [Komponen dan *Hooks* harus murni](/reference/rules/components-and-hooks-must-be-pure) — Kemurnian membuat kode Anda lebih mudah dipahami, di-*debug*, dan memungkinkan React untuk secara otomatis mengoptimalkan komponen dan *Hook* Anda dengan benar.
+* [React memanggil Komponen dan *Hooks*](/reference/rules/react-calls-components-and-hooks) — React bertanggung jawab untuk me-*render* komponen dan *Hooks* ketika diperlukan untuk mengoptimalkan pengalaman pengguna.
+* [Peraturan *Hooks*](/reference/rules/rules-of-hooks) — *Hooks* didefinisikan menggunakan fungsi JavaScript, tetapi *Hooks* merepresentasikan tipe khusus dari logika UI yang dapat digunakan kembali dengan batasan di mana *Hooks* tersebut dapat dipanggil.
 
-## Legacy APIs {/*legacy-apis*/}
+## API Lama {/*legacy-apis*/}
 
-* [Legacy APIs](/reference/react/legacy) - Exported from the `react` package, but not recommended for use in newly written code.
+* [API Lama](/reference/react/legacy) — Diekspor dari paket `react`, tetapi tidak direkomendasikan untuk digunakan pada kode yang baru ditulis.

src/content/reference/rules/rules-of-hooks.md

@@ -1,61 +1,61 @@
 ---
-title: Rules of Hooks
+title: Peraturan Hooks
 ---
 
 <Intro>
-Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.
+Hooks didefinisikan menggunakan fungsi JavaScript, tetapi Hooks merepresentasikan tipe khusus dari logika UI yang dapat digunakan kembali dengan batasan di mana hooks tersebut dapat dipanggil.
 </Intro>
 
 <InlineToc />
 
 ---
 
-##  Only call Hooks at the top level {/*only-call-hooks-at-the-top-level*/}
+## Panggil *Hooks* hanya di tingkat atas {/*only-call-hooks-at-the-top-level*/}
 
-Functions whose names start with `use` are called [*Hooks*](/reference/react) in React.
+Fungsi-fungsi yang namanya berawalan `use` disebut [*Hooks*](/reference/react) dalam React.
 
-**Don’t call Hooks inside loops, conditions, nested functions, or `try`/`catch`/`finally` blocks.** Instead, always use Hooks at the top level of your React function, before any early returns. You can only call Hooks while React is rendering a function component:
+**Jangan memanggil *Hooks* di dalam pengulangan, kondisi, fungsi bersarang, atau blok `try`/`catch`/`finally`.** Sebagai gantinya, selalu gunakan Hooks di tingkat teratas fungsi React Anda, sebelum kembalian awal apapun. Anda hanya dapat memanggil *Hooks* ketika React sedang me-*render* komponen fungsi:
 
-* ✅ Call them at the top level in the body of a [function component](/learn/your-first-component).
-* ✅ Call them at the top level in the body of a [custom Hook](/learn/reusing-logic-with-custom-hooks).
+* ✅ Panggil *Hooks* di tingkat teratas di dalam [komponen fungsi](/learn/your-first-component).
+* ✅ Panggil *Hooks* di tingkat teratas di dalam [*Hook* kustom](/learn/reusing-logic-with-custom-hooks).
 
 ```js{2-3,8-9}
 function Counter() {
-  // ✅ Good: top-level in a function component
+  // ✅ Baik: tingkat atas dalam komponen fungsi
   const [count, setCount] = useState(0);
   // ...
 }
 
 function useWindowWidth() {
-  // ✅ Good: top-level in a custom Hook
+  // ✅ Baik: tingkat atas dalam Hook kustom
   const [width, setWidth] = useState(window.innerWidth);
   // ...
 }
 ```
 
-It’s **not** supported to call Hooks (functions starting with `use`) in any other cases, for example:
+Memanggil Hooks (fungsi yang dimulai dengan `use`) dalam kasus penggunaan lainnya **tidak** diduking, misalnya:
 
-* 🔴 Do not call Hooks inside conditions or loops.
-* 🔴 Do not call Hooks after a conditional `return` statement.
-* 🔴 Do not call Hooks in event handlers.
-* 🔴 Do not call Hooks in class components.
-* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or `useEffect`.
-* 🔴 Do not call Hooks inside `try`/`catch`/`finally` blocks.
+* 🔴 Jangan memanggil *Hooks* di dalam kondisional atau pengulangan.
+* 🔴 Jangan memanggil *Hooks* setelah pernyataan `return` kondisional.
+* 🔴 Jangan memanggil *Hooks* di dalam *event handler*.
+* 🔴 Jangan memanggil *Hooks* di dalam komponen kelas.
+* 🔴 Jangan memanggil *Hooks* di dalam fungsi yang dioper ke `useMemo`, `useReducer`, atau `useEffect`.
+* 🔴 Jangan memanggil *Hooks* di dalam blok `try`/`catch`/`finally`.
 
-If you break these rules, you might see this error.
+Jika Anda melanggar peraturan ini, kemungkinan Anda akan melihat *error* berikut.
 
 ```js{3-4,11-12,20-21}
 function Bad({ cond }) {
   if (cond) {
-    // 🔴 Bad: inside a condition (to fix, move it outside!)
+    // 🔴 Buruk: di dalam kondisional (untuk memperbaiki, pindahkan ke luar!)
     const theme = useContext(ThemeContext);
   }
   // ...
 }
 
 function Bad() {
   for (let i = 0; i < 10; i++) {
-    // 🔴 Bad: inside a loop (to fix, move it outside!)
+    // 🔴 Buruk: di dalam pengulangan (untuk memperbaiki, pindahkan ke luar!)
     const theme = useContext(ThemeContext);
   }
   // ...
@@ -65,22 +65,22 @@ function Bad({ cond }) {
   if (cond) {
     return;
   }
-  // 🔴 Bad: after a conditional return (to fix, move it before the return!)
+  // 🔴 Buruk: setelah pengembalian kondisional (untuk memperbaiki, pindahkan ke sebelum return!)
   const theme = useContext(ThemeContext);
   // ...
 }
 
 function Bad() {
   function handleClick() {
-    // 🔴 Bad: inside an event handler (to fix, move it outside!)
+    // 🔴 Buruk: di dalam event handler (untuk memperbaiki, pindahkan ke luar!)
     const theme = useContext(ThemeContext);
   }
   // ...
 }
 
 function Bad() {
   const style = useMemo(() => {
-    // 🔴 Bad: inside useMemo (to fix, move it outside!)
+    // 🔴 Buruk: di dalam useMemo (untuk memperbaiki, pindahkan ke luar!)
     const theme = useContext(ThemeContext);
     return createStyle(theme);
   });
@@ -89,47 +89,47 @@ function Bad() {
 
 class Bad extends React.Component {
   render() {
-    // 🔴 Bad: inside a class component (to fix, write a function component instead of a class!)
+    // 🔴 Buruk: di dalam komponen kelas (untuk memperbaiki, buat komponen fungsi dan bukan komponen kelas!)
     useEffect(() => {})
     // ...
   }
 }
 
 function Bad() {
   try {
-    // 🔴 Bad: inside try/catch/finally block (to fix, move it outside!)
+    // 🔴 Buruk: di dalam blok try/catch/finally (untuk memperbaiki, pindahkan ke luar!)
     const [x, setX] = useState(0);
   } catch {
     const [x, setX] = useState(1);
   }
 }
 ```
 
-You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch these mistakes.
+Anda dapat menggunakan [plugin `eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) untuk menangkap kesalahan-kesalahan ini.
 
 <Note>
 
-[Custom Hooks](/learn/reusing-logic-with-custom-hooks) *may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering.
+[*Hooks* kustom](/learn/reusing-logic-with-custom-hooks) *mungkin* memanggil *Hooks* lain (memang itu tujuannya). Ini bekerja karena *Hooks* kustom juga seharusnya hanya dipanggil saat komponen fungsi sedang di-*render*.
 
 </Note>
 
 ---
 
-## Only call Hooks from React functions {/*only-call-hooks-from-react-functions*/}
+## Panggil *Hooks* hanya dari fungsi React {/*only-call-hooks-from-react-functions*/}
 
-Don’t call Hooks from regular JavaScript functions. Instead, you can:
+Jangan memanggil *Hooks* dari fungsi JavaScript reguler. Sebagai gantinya, Anda dapat:
 
-✅ Call Hooks from React function components.
-✅ Call Hooks from [custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component).
+✅ Memanggil *Hooks* dari komponen fungsi React.
+✅ Memanggil *Hooks* dari [*Hooks* kustom](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component).
 
-By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.
+Dengan mengikuti peraturan ini, Anda memastikan semua logika *stateful* dalam suatu komponen terlihat jelas dari kode sumbernya.
 
 ```js {2,5}
 function FriendList() {
   const [onlineStatus, setOnlineStatus] = useOnlineStatus(); // ✅
 }
 
-function setOnlineStatus() { // ❌ Not a component or custom Hook!
+function setOnlineStatus() { // ❌ Bukan sebuah komponen atau Hooks kustom!
   const [onlineStatus, setOnlineStatus] = useOnlineStatus();
 }
 ```