refactor(reusing-logic-with-custom-hooks.md): translate the article to Indonesian

Author: rvndaputra

src/content/learn/reusing-logic-with-custom-hooks.md

@@ -1,30 +1,30 @@
 ---
-title: 'Reusing Logic with Custom Hooks'
+title: 'Menggunakan ulang logika dengan Custom Hooks'
 ---
 
 <Intro>
 
-React comes with several built-in Hooks like `useState`, `useContext`, and `useEffect`. Sometimes, you'll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. You might not find these Hooks in React, but you can create your own Hooks for your application's needs.
+React dilengkapi dengan beberapa Hook bawaan seperti `useState`, `useContext`, dan `useEffect`. Terkadang, Anda mungkin ingin ada Hook untuk tujuan yang lebih spesifik: misalnya, untuk mengambil data, melacak apakah pengguna sedang online, atau terhubung ke ruang obrolan. Anda mungkin tidak menemukan Hook ini di React, tetapi Anda dapat membuat Hook Anda sendiri untuk kebutuhan aplikasi Anda.
 
 </Intro>
 
 <YouWillLearn>
 
-- What custom Hooks are, and how to write your own
-- How to reuse logic between components
-- How to name and structure your custom Hooks
-- When and why to extract custom Hooks
+- Apa itu custom Hooks, dan bagaimana menulis Hooks sendiri
+- Bagaimana cara menggunakan ulang logika antara komponen
+- Bagaimana memberi nama dan mengatur struktur Hooks yang dibuat sendiri
+- Kapan dan mengapa harus mengekstrak custom Hooks
 
 </YouWillLearn>
 
-## Custom Hooks: Sharing logic between components {/*custom-hooks-sharing-logic-between-components*/}
+## Custom Hooks: Berbagi logika antar komponen {/*custom-hooks-sharing-logic-between-components*/}
 
-Imagine you're developing an app that heavily relies on the network (as most apps do). You want to warn the user if their network connection has accidentally gone off while they were using your app. How would you go about it? It seems like you'll need two things in your component:
+Bayangkan Anda sedang mengembangkan aplikasi yang sangat bergantung pada jaringan (seperti kebanyakan aplikasi). Anda ingin memberi peringatan kepada pengguna jika koneksi jaringannya tiba-tiba terputus saat mereka menggunakan aplikasi Anda. Bagaimana cara melakukannya? Sepertinya Anda akan memerlukan dua hal dalam komponen Anda:
 
-1. A piece of state that tracks whether the network is online.
-2. An Effect that subscribes to the global [`online`](https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event) and [`offline`](https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event) events, and updates that state.
+1. Sebuah keadaan (state) yang melacak apakah jaringan online.
+2. Sebuah Efek yang berlangganan (subscribes) pada peristiwa (events) [`online`](https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event) dan [`offline`](https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event) global, dan memperbarui state tersebut.
 
-This will keep your component [synchronized](/learn/synchronizing-with-effects) with the network status. You might start with something like this:
+Hal ini akan menjaga [sinkronisasi](/learn/synchronizing-with-effects) komponen Anda dengan status jaringan. Anda mungkin memulainya dengan sesuatu seperti ini:
 
 <Sandpack>
 
@@ -54,11 +54,11 @@ export default function StatusBar() {
 
 </Sandpack>
 
-Try turning your network on and off, and notice how this `StatusBar` updates in response to your actions.
+Coba matikan dan nyalakan jaringan Anda, dan perhatikan bagaimana `StatusBar` ini diperbarui sebagai respons terhadap tindakan Anda.
 
-Now imagine you *also* want to use the same logic in a different component. You want to implement a Save button that will become disabled and show "Reconnecting..." instead of "Save" while the network is off.
+Sekarang bayangkan Anda *juga* ingin menggunakan logika yang sama pada komponen yang berbeda. Anda ingin mengimplementasikan tombol Simpan yang akan menjadi tidak aktif dan menunjukkan "Sedang menghubungkan kembali..." alih-alih "Simpan" saat jaringan mati.
 
-To start, you can copy and paste the `isOnline` state and the Effect into `SaveButton`:
+Untuk memulai, Anda dapat menyalin dan mem-paste state `isOnline` dan Efeknya ke dalam `SaveButton`:
 
 <Sandpack>
 
@@ -96,13 +96,13 @@ export default function SaveButton() {
 
 </Sandpack>
 
-Verify that, if you turn off the network, the button will change its appearance.
+Pastikan, jika Anda mematikan jaringan, tampilan tombol tersebut akan berubah.
 
-These two components work fine, but the duplication in logic between them is unfortunate. It seems like even though they have different *visual appearance,* you want to reuse the logic between them.
+Kedua komponen ini berfungsi dengan baik, tetapi duplikasi logika di antara keduanya tidak diinginkan. Meskipun mereka memiliki *tampilan visual* yang berbeda, Anda ingin menggunakan kembali logika yang sama di antara keduanya.
 
-### Extracting your own custom Hook from a component {/*extracting-your-own-custom-hook-from-a-component*/}
+### Mengekstrak custom Hook Anda sendiri dari sebuah komponen {/*extracting-your-own-custom-hook-from-a-component*/}
 
-Imagine for a moment that, similar to [`useState`](/reference/react/useState) and [`useEffect`](/reference/react/useEffect), there was a built-in `useOnlineStatus` Hook. Then both of these components could be simplified and you could remove the duplication between them:
+Bayangkan bahwa, serupa dengan [`useState`](/reference/react/useState) dan [`useEffect`](/reference/react/useEffect), ada sebuah Hook `useOnlineStatus` bawaan. Kemudian kedua komponen ini bisa disederhanakan dan Anda dapat menghapus duplikasi di antara keduanya:
 
 ```js {2,7}
 function StatusBar() {
@@ -124,8 +124,7 @@ function SaveButton() {
   );
 }
 ```
-
-Although there is no such built-in Hook, you can write it yourself. Declare a function called `useOnlineStatus` and move all the duplicated code into it from the components you wrote earlier:
+Meskipun tidak ada Hook bawaan seperti itu, Anda dapat menulisnya sendiri. Deklarasikan fungsi bernama `useOnlineStatus` dan pindahkan semua kode duplikat ke dalamnya dari komponen yang Anda tulis sebelumnya:
 
 ```js {2-16}
 function useOnlineStatus() {