From f6447868f960a97f4b955015862d9358e252b65a Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Mon, 1 May 2023 09:51:54 +0700 Subject: [PATCH 01/18] docs: translate introduction of escape hatches --- src/content/learn/escape-hatches.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 69e733521..be0b34974 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -4,7 +4,7 @@ title: Escape Hatches -Some of your components may need to control and synchronize with systems outside of React. For example, you might need to focus an input using the browser API, play and pause a video player implemented without React, or connect and listen to messages from a remote server. In this chapter, you'll learn the escape hatches that let you "step outside" React and connect to external systems. Most of your application logic and data flow should not rely on these features. +Beberapa komponen-komponen Anda mungkin membutuhkan kendali dan sinkronisasi dengan sistem di luar React. Misalkan, Anda mungkin ingin memfokuskan sebuah input dengan menggunakan API peramban, memutar dan menjeda sebuah pemutar video yang diimplementasi tanpa React, atau menghubungkan dan mendengarkan pesan-pesan dari sebuah *remote server*. Pada bab ini, Anda akan mempelajari *escape hatches* yang membiarkan Anda "melangkah keluar" dari aturan React dan menghubungkannya ke sistem luar. Sebagian besar logika aplikasi dan aliran data Anda sebaiknya tidak bergantung pada fitur-fitur ini. @@ -227,7 +227,7 @@ function Form() { } ``` -However, you *do* need Effects to synchronize with external systems. +However, you *do* need Effects to synchronize with external systems. @@ -388,7 +388,7 @@ export default function App() {
); @@ -521,7 +521,7 @@ export default function App() {
); From 0d852917f6b5ba95b2ba2ab83712bd30b564f8ed Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Mon, 8 May 2023 21:30:48 +0700 Subject: [PATCH 02/18] doc: translate table of content --- src/content/learn/escape-hatches.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index be0b34974..668544d82 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -10,14 +10,14 @@ Beberapa komponen-komponen Anda mungkin membutuhkan kendali dan sinkronisasi den -* [How to "remember" information without re-rendering](/learn/referencing-values-with-refs) -* [How to access DOM elements managed by React](/learn/manipulating-the-dom-with-refs) -* [How to synchronize components with external systems](/learn/synchronizing-with-effects) -* [How to remove unnecessary Effects from your components](/learn/you-might-not-need-an-effect) -* [How an Effect's lifecycle is different from a component's](/learn/lifecycle-of-reactive-effects) -* [How to prevent some values from re-triggering Effects](/learn/separating-events-from-effects) -* [How to make your Effect re-run less often](/learn/removing-effect-dependencies) -* [How to share logic between components](/learn/reusing-logic-with-custom-hooks) +* [Bagaimana cara "mengingat" informasi tanpa harus melakukan rendering kembali](/learn/referencing-values-with-refs) +* [Bagaimana cara mengakses elemen DOM yang dikelola oleh React](/learn/manipulating-the-dom-with-refs) +* [Bagaimana cara menyinkronkan komponen dengan sistem eksternal](/learn/synchronizing-with-effects) +* [Bagaimana cara menghapus *Effect* yang tidak perlu dari komponen Anda](/learn/you-might-not-need-an-effect) +* [Bagaimana sebuah *Effect's lifecycle* berbeda dari komponen](/learn/lifecycle-of-reactive-effects) +* [Bagaimana mencegah beberapa nilai dari pemanggilan *Effects* kembali](/learn/separating-events-from-effects) +* [Bagaiaman membuat *Effect* Anda berjalan kembali lebih sering](/learn/removing-effect-dependencies) +* [Bagaimana membagi logika antara komponen](/learn/reusing-logic-with-custom-hooks) From 68b817af1e2657ef4b58e647f99070122bdf8c66 Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Mon, 8 May 2023 21:45:00 +0700 Subject: [PATCH 03/18] fix: change effect translation --- src/content/learn/escape-hatches.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 668544d82..fa062b756 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -13,10 +13,10 @@ Beberapa komponen-komponen Anda mungkin membutuhkan kendali dan sinkronisasi den * [Bagaimana cara "mengingat" informasi tanpa harus melakukan rendering kembali](/learn/referencing-values-with-refs) * [Bagaimana cara mengakses elemen DOM yang dikelola oleh React](/learn/manipulating-the-dom-with-refs) * [Bagaimana cara menyinkronkan komponen dengan sistem eksternal](/learn/synchronizing-with-effects) -* [Bagaimana cara menghapus *Effect* yang tidak perlu dari komponen Anda](/learn/you-might-not-need-an-effect) -* [Bagaimana sebuah *Effect's lifecycle* berbeda dari komponen](/learn/lifecycle-of-reactive-effects) +* [Bagaimana cara menghapus efek yang tidak perlu dari komponen Anda](/learn/you-might-not-need-an-effect) +* [Bagaimana sebuah siklus hidup efek berbeda dari komponen](/learn/lifecycle-of-reactive-effects) * [Bagaimana mencegah beberapa nilai dari pemanggilan *Effects* kembali](/learn/separating-events-from-effects) -* [Bagaiaman membuat *Effect* Anda berjalan kembali lebih sering](/learn/removing-effect-dependencies) +* [Bagaiaman membuat efek Anda berjalan kembali lebih sering](/learn/removing-effect-dependencies) * [Bagaimana membagi logika antara komponen](/learn/reusing-logic-with-custom-hooks) From 6a4c0a04401bf7094bf8da605bea83d19af82446 Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Sun, 9 Jul 2023 14:43:57 +0700 Subject: [PATCH 04/18] doc: translate referencing values with Ref section --- src/content/learn/escape-hatches.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index fa062b756..7c18bfc02 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -21,15 +21,15 @@ Beberapa komponen-komponen Anda mungkin membutuhkan kendali dan sinkronisasi den -## Referencing values with refs {/*referencing-values-with-refs*/} +## Mereferensikan nilai menggunakan refs {/*referencing-values-with-refs*/} -When you want a component to "remember" some information, but you don't want that information to [trigger new renders](/learn/render-and-commit), you can use a *ref*: +Ketika Anda ingin sebuah komponen "mengingat" beberapa informasi, tapi Anda tidak ingin informasi tersebut [memicu *render* baru](/learn/render-and-commit), Anda dapat menggunakan *ref*: ```js const ref = useRef(0); ``` -Like state, refs are retained by React between re-renders. However, setting state re-renders a component. Changing a ref does not! You can access the current value of that ref through the `ref.current` property. +Sama seperti *state*, *refs* disimpan oleh React diantara pe-*render*-an ulang. Namun, mengatur *state* menyebabkan komponen di-*render* ulang. Mengganti sebuah *ref* tidak! Anda dapat mengakses nilai saat ini dari *ref* tersebut melalui properti `ref.current`. @@ -41,12 +41,12 @@ export default function Counter() { function handleClick() { ref.current = ref.current + 1; - alert('You clicked ' + ref.current + ' times!'); + alert('Anda mengeklik ' + ref.current + ' kali!'); } return ( ); } @@ -54,11 +54,11 @@ export default function Counter() { -A ref is like a secret pocket of your component that React doesn't track. For example, you can use refs to store [timeout IDs](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#return_value), [DOM elements](https://developer.mozilla.org/en-US/docs/Web/API/Element), and other objects that don't impact the component's rendering output. +*Ref* seperti sebuah kantong rahasia dari komponen Anda yang tidak dilacak oleh React. Misalkan, Anda dapat menggunakan *refs* untuk menyimpan [*timeout IDs*](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#return_value), [elemen-elemen DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element), dan objek lainnya yang tidak memengaruhi hasil *render* sebuah komponen. -Read **[Referencing Values with Refs](/learn/referencing-values-with-refs)** to learn how to use refs to remember information. +Baca **[Mereferensikan Nilai menggunakan Refs](/learn/referencing-values-with-refs)** untuk mempelajari bagaimana menggunakan *refs* untuk mengingat informasi. From 1f61da36680cd9c1edd08ee190550acfd2f2f95f Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Mon, 10 Jul 2023 09:16:47 +0700 Subject: [PATCH 05/18] doc: translate Manipulating the DOM with Refs section --- src/content/learn/escape-hatches.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 7c18bfc02..277f4ddc1 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -62,9 +62,9 @@ Baca **[Mereferensikan Nilai menggunakan Refs](/learn/referencing-values-with-re -## Manipulating the DOM with refs {/*manipulating-the-dom-with-refs*/} +## Manipulasi DOM dengan Refs {/*manipulating-the-dom-with-refs*/} -React automatically updates the DOM to match your render output, so your components won't often need to manipulate it. However, sometimes you might need access to the DOM elements managed by React—for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you will need a ref to the DOM node. For example, clicking the button will focus the input using a ref: +React secara otomatis memperbarui DOM agar sesuai dengan keluaran *render*, sehingga komponen Anda tidak perlu sering memanipulasinya. Namun, terkadang Anda mungkin perlu mengakses elemen DOM yang dikelola oleh React—misalnya, memberikan fokus pada sebuah simpul (*node*), menggulir ke sana, atau mengukur ukuran dan posisinya. Tidak ada cara bawaan untuk melakukan hal-hal tersebut di React, sehingga Anda memerlukan *ref* ke simpul DOM. Sebagai contoh, mengklik tombol akan memfokuskan input menggunakan sebuah *ref*: @@ -82,7 +82,7 @@ export default function Form() { <> ); @@ -93,7 +93,7 @@ export default function Form() { -Read **[Manipulating the DOM with Refs](/learn/manipulating-the-dom-with-refs)** to learn how to access DOM elements managed by React. +Baca **[Manipulasi DOM dengan Refs](/learn/manipulating-the-dom-with-refs)** untuk mempelajari bagaimana cara mengakses elemen DOM yang dikelola oleh React. From 1e31b5eedde210c9f3d6c2147c045d602acbfb37 Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Sat, 15 Jul 2023 12:43:09 +0700 Subject: [PATCH 06/18] doc: translate Synchronizing with Effects section --- src/content/learn/escape-hatches.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 277f4ddc1..f0e539b72 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -97,11 +97,11 @@ Baca **[Manipulasi DOM dengan Refs](/learn/manipulating-the-dom-with-refs)** unt -## Synchronizing with Effects {/*synchronizing-with-effects*/} +## Menyinkronkan dengan *Effects* {/*synchronizing-with-effects*/} -Some components need to synchronize with external systems. For example, you might want to control a non-React component based on the React state, set up a server connection, or send an analytics log when a component appears on the screen. Unlike event handlers, which let you handle particular events, *Effects* let you run some code after rendering. Use them to synchronize your component with a system outside of React. +Beberapa komponen perlu menyinkronkan dengan sistem eksternal. Misalkan, Anda mungkin ingin mengontrol komponen *non-React* berdasarkan *state* React, mengatur koneksi server, atau mengirim log analitik ketika sebuah komponen muncul di layar. Tidak seperti *event handlers*, yang memungkinkan Anda menangani *events* tertentu, *Effects* memungkinkan Anda menjalankan beberapa kode setelah *render*. Gunakan *Effects* ini untuk menyinkronkan komponen Anda dengan sistem di luar React. -Press Play/Pause a few times and see how the video player stays synchronized to the `isPlaying` prop value: +Menekan tombol *Play*/*Pause* beberapa kali dan lihat bagaimana pemutar video tetep disinkronkan dengan nilai prop `isPlaying`: @@ -145,7 +145,7 @@ video { width: 250px; } -Many Effects also "clean up" after themselves. For example, an Effect that sets up a connection to a chat server should return a *cleanup function* that tells React how to disconnect your component from that server: +Banyak *Effects* juga melakukan "pemberishan" setelah mereka selesai. Misalkan, sebuah *Effect* yang mengatur koneksi ke *chat server* harus mengembalikan fungsi pembersih (*cleanup function*) yang memberi tahu React bagaimana cara memutuskan koneksi komponen Anda dari *server* tersebut: @@ -183,11 +183,11 @@ input { display: block; margin-bottom: 20px; } -In development, React will immediately run and clean up your Effect one extra time. This is why you see `"✅ Connecting..."` printed twice. This ensures that you don't forget to implement the cleanup function. +Di mode pengembangan (*development*), React akan segera menjalankan dan membersihkan *Effect* Anda dengan satu kali tambahan. Inilah mengapa Anda melihat `"✅ Connecting..."` tercetak dua kali. Ini memastikan Anda tidak lupa untuk mengimplementasikan fungsi pembersih. -Read **[Synchronizing with Effects](/learn/synchronizing-with-effects)** to learn how to synchronize components with external systems. +Baca **[Menyinkronkan dengan *Effects*](/learn/synchronizing-with-effects)** untuk mempelajari bagaimana menyinkronkan komponen dengan sistem eksternal. From 8bfcddfc7aecd55a507c00be85eec601ff76f5cb Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Sat, 15 Jul 2023 12:57:36 +0700 Subject: [PATCH 07/18] doc: translate You Might Not Need An Effect section --- src/content/learn/escape-hatches.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index f0e539b72..d27e8fd36 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -4,7 +4,7 @@ title: Escape Hatches -Beberapa komponen-komponen Anda mungkin membutuhkan kendali dan sinkronisasi dengan sistem di luar React. Misalkan, Anda mungkin ingin memfokuskan sebuah input dengan menggunakan API peramban, memutar dan menjeda sebuah pemutar video yang diimplementasi tanpa React, atau menghubungkan dan mendengarkan pesan-pesan dari sebuah *remote server*. Pada bab ini, Anda akan mempelajari *escape hatches* yang membiarkan Anda "melangkah keluar" dari aturan React dan menghubungkannya ke sistem luar. Sebagian besar logika aplikasi dan aliran data Anda sebaiknya tidak bergantung pada fitur-fitur ini. +Beberapa komponen-komponen Anda mungkin membutuhkan kendali dan sinkronisasi dengan sistem di luar React. Misalkan, Anda mungkin ingin memfokuskan sebuah input dengan menggunakan API peramban, memutar dan menjeda sebuah pemutar video yang diimplementasi tanpa React, atau menghubungkan dan mendengarkan pesan-pesan dari sebuah *remote server*. Pada bab ini, Anda akan mempelajari jalan keluar (*escape hatches*) yang membiarkan Anda "melangkah keluar" dari aturan React dan menghubungkannya ke sistem luar. Sebagian besar logika aplikasi dan aliran data Anda sebaiknya tidak bergantung pada fitur-fitur ini. @@ -191,15 +191,15 @@ Baca **[Menyinkronkan dengan *Effects*](/learn/synchronizing-with-effects)** unt -## You Might Not Need An Effect {/*you-might-not-need-an-effect*/} +## Anda mungkin tidak membutuhkan *Effect* {/*you-might-not-need-an-effect*/} -Effects are an escape hatch from the React paradigm. They let you "step outside" of React and synchronize your components with some external system. If there is no external system involved (for example, if you want to update a component's state when some props or state change), you shouldn't need an Effect. Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone. +*Effects* adalah sebuah jalan keluar dari paradigma React. Mereka membiarkan Anda untuk "keluar" dari React dan menyinkronkan komponen Anda dengan beberapa sistem eksternal. Jika tidak ada sistem eksternal yang terlibat (misalkan, jika Anda ingin memperbarui *state* komponen dengan beberapa *props* atau perubahan *state*), Anda seharusnya tidak perlu menggunakan sebuah *Effect*. Hilangkan *Effects* yang tidak pelu akan membuat kode Anda lebih mudah untuk diikuti, lebih cepat untuk dijalankan, dan lebih sedikit berpotensi galat. -There are two common cases in which you don't need Effects: -- **You don't need Effects to transform data for rendering.** -- **You don't need Effects to handle user events.** +Ada dua kasus umum di mana Anda tidak memerlukan *Effects*: +- **Anda tidak perlu menggunakan *Effects* untuk mengubah data saat pe-*render*-an.** +- **Anda tidak perlu menggunakan *Effects* untuk menangani *events* pengguna.** -For example, you don't need an Effect to adjust some state based on other state: +Sebagai contoh, Anda tidak perlu menggunakan *Effect* untuk menyesuaikan beberapa *state* berdasarkan *state* lainnya: ```js {5-9} function Form() { @@ -215,23 +215,23 @@ function Form() { } ``` -Instead, calculate as much as you can while rendering: +Sebaliknya, lakukan perhitungan sebanyak mungkin saat *render*: ```js {4-5} function Form() { const [firstName, setFirstName] = useState('Taylor'); const [lastName, setLastName] = useState('Swift'); - // ✅ Good: calculated during rendering + // ✅ Good: Melakukan perhitungan selama render const fullName = firstName + ' ' + lastName; // ... } ``` -However, you *do* need Effects to synchronize with external systems. +Namun, anda perlu menggunakan *Effects* untuk menyinkronkannya dengan sistem eksternal. -Read **[You Might Not Need an Effect](/learn/you-might-not-need-an-effect)** to learn how to remove unnecessary Effects. +Baca **[Anda mungkin tidak membutuhkan *Effect*](/learn/you-might-not-need-an-effect)** untuk memplejari bagaimana menghilangkan *Effects* yang tidak perlu. From fc89836c033494e9858b803b8a23e4f05044941a Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Sun, 16 Jul 2023 21:31:05 +0700 Subject: [PATCH 08/18] doc: Lifecycle of reactive effects section --- src/content/learn/escape-hatches.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index d27e8fd36..c136a78e6 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -235,11 +235,11 @@ Baca **[Anda mungkin tidak membutuhkan *Effect*](/learn/you-might-not-need-an-ef -## Lifecycle of reactive effects {/*lifecycle-of-reactive-effects*/} +## Siklus hidup *effects* yang reaktif {/*lifecycle-of-reactive-effects*/} -Effects have a different lifecycle from components. Components may mount, update, or unmount. An Effect can only do two things: to start synchronizing something, and later to stop synchronizing it. This cycle can happen multiple times if your Effect depends on props and state that change over time. +*Effects* mempunyai siklus hidup yang berbeda dari komponen. Komponen dapat *mount*, memperbarui (*update), or *unmount*. Sebuah *Effect* hanya dapat melakukan dua hal: memulai menyinkronkan sesuatu, dan kemudian berhenti menyinkronkannya. Siklus ini dapat terjadi berkali-kali jika *Effect* anda bergantung pada *props* dan *state* yang berubah setiap saat. -This Effect depends on the value of the `roomId` prop. Props are *reactive values,* which means they can change on a re-render. Notice that the Effect *re-synchronizes* (and re-connects to the server) if `roomId` changes: +*Effect* ini bergantung pada nilai prop `roomId`. *Props* adalah *nilai yang reaktif,* yang artinya mereka dapat berubah saat pe-*render*-an ulang. Perhatikan bahwa *Effect* *menyinkronkan ulang* (dan menghubungkan kembali ke *server*) jika `roomId` berubah: @@ -283,7 +283,7 @@ export default function App() { ```js chat.js export function createConnection(serverUrl, roomId) { - // A real implementation would actually connect to the server + // Implementasi yang sebenarnya akan benar-benar terhubung ke server. return { connect() { console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...'); @@ -302,11 +302,11 @@ button { margin-left: 10px; } -React provides a linter rule to check that you've specified your Effect's dependencies correctly. If you forget to specify `roomId` in the list of dependencies in the above example, the linter will find that bug automatically. +*React* menyediakan aturan *linter* untuk memeriksa apakah Anda telah menetapkan dependensi *Effect* dengan benar. Jika anda lupa untuk menyantumkan `roomId` dalam daftar dependensi dalam contoh di atas, *linter* akan menemukan *bug* secara otomatis. -Read **[Lifecycle of Reactive Events](/learn/lifecycle-of-reactive-effects)** to learn how an Effect's lifecycle is different from a component's. +Baca **[Siklus hidup *effects* yang reaktif](/learn/lifecycle-of-reactive-effects)** untuk mempelajari bagaimana siklus hidup *Effect* berbeda dari komponen. From ab563a6b05744e75ca36413f6cc56dfa48d09502 Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Sat, 21 Oct 2023 21:39:10 +0700 Subject: [PATCH 09/18] doc: translate Separating events from Effects --- src/content/learn/escape-hatches.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index c136a78e6..a9484ca3d 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -310,17 +310,17 @@ Baca **[Siklus hidup *effects* yang reaktif](/learn/lifecycle-of-reactive-effect -## Separating events from Effects {/*separating-events-from-effects*/} +## Memisahkan *events* dari *Effects* {/*separating-events-from-effects*/} -This section describes an **experimental API that has not yet been released** in a stable version of React. +Bagian ini mendeskripsikan sebuah **eksperimen API yang belum dirilis** di versi stabil React. -Event handlers only re-run when you perform the same interaction again. Unlike event handlers, Effects re-synchronize if any of the values they read, like props or state, are different than during last render. Sometimes, you want a mix of both behaviors: an Effect that re-runs in response to some values but not others. +*Event handlers* hanya berjalan ulang ketika Anda melakukan interaksi yang sama lagi. Tidak seperti *event handlers*, *Effects* menyinkronkan ulang jika nilai apapun yang mereka baca, seperti *props* atau *state*, berbeda dari saat *render* terakhir. Kadang, Anda ingin campuran kedua perilaku tersebut: sebuah *Effect* yang berjalan ulang sebagai respon terhadap beberapa nilai tetapi tidak pada nilai lainnya. -All code inside Effects is *reactive.* It will run again if some reactive value it reads has changed due to a re-render. For example, this Effect will re-connect to the chat if either `roomId` or `theme` have changed: +Semua kode di dalam *Effects* adalah *reactive.* *Effects* tersebut akan berjalan lagi jika beberapa nilai *reactive* yang dibacanya telah berubah karena *render* ulang. Misalkan, *Effect* ini akan menghubungkan kembali ke *chat* jika `roomId` atau `theme` telah berubah: @@ -448,7 +448,7 @@ label { display: block; margin-top: 10px; } -This is not ideal. You want to re-connect to the chat only if the `roomId` has changed. Switching the `theme` shouldn't re-connect to the chat! Move the code reading `theme` out of your Effect into an *Effect Event*: +Ini tidak ideal. Anda ingin menghubungkan kembali ke *chat* jika hanya `roomId` yang berubah. Mengganti `theme` seharusnya tidak menghubungkan kembali ke *chat*! Pindahkan pembacaan kode `theme` dari *Effect* anda ke dalam *Effect Event*: @@ -581,11 +581,11 @@ label { display: block; margin-top: 10px; } -Code inside Effect Events isn't reactive, so changing the `theme` no longer makes your Effect re-connect. +Kode di dalam *Effect Events* tidak bersifat *reactive*, sehingga mengubah `theme` tidak lagi membuat *Effect* Anda terhubung kembali. -Read **[Separating Events from Effects](/learn/separating-events-from-effects)** to learn how to prevent some values from re-triggering Effects. +Baca **[Memisahkan *Events* dari *Effects*](/learn/separating-events-from-effects)** untuk mempelajari bagaimana mencegah beberapa nilai dari memicu ulang *Effects*. From 2139e17f4d5e20e63ba5d4dd34a125a10e677e5a Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Sat, 21 Oct 2023 22:03:08 +0700 Subject: [PATCH 10/18] doc: translate Removing Effect dependencies --- src/content/learn/escape-hatches.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index a9484ca3d..1d4dfae70 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -589,11 +589,11 @@ Baca **[Memisahkan *Events* dari *Effects*](/learn/separating-events-from-effect -## Removing Effect dependencies {/*removing-effect-dependencies*/} +## Menghapus *Effect dependencies* {/*removing-effect-dependencies*/} -When you write an Effect, the linter will verify that you've included every reactive value (like props and state) that the Effect reads in the list of your Effect's dependencies. This ensures that your Effect remains synchronized with the latest props and state of your component. Unnecessary dependencies may cause your Effect to run too often, or even create an infinite loop. The way you remove them depends on the case. +Ketika Anda menulis sebuah *Effect*, linter akan memverifikasi bahwa Anda telah menyertakan setiap nilai *reactive* (seperti *props* dan *state*) yang *Effect* baca di daftar *Effect dependencies* Anda. Ini memastikan bahwa *Effect* Anda tetap selaras dengan *props* dan *state* terbaru dari komponen Anda. *Dependencies* yang tidak perlu dapat menyebabkan *Effect* Anda berjalan terlalu sering, atau bahkan membuat perulangan tak terhingga. Cara Anda menghapusnya tergantung pada kasusnya. -For example, this Effect depends on the `options` object which gets re-created every time you edit the input: +Sebagai contoh, *Effect* ini bergantung pada objek `options` yang dibuat ulang setiap kali Anda mengedit input: @@ -668,7 +668,7 @@ button { margin-left: 10px; } -You don't want the chat to re-connect every time you start typing a message in that chat. To fix this problem, move creation of the `options` object inside the Effect so that the Effect only depends on the `roomId` string: +Anda tidak ingin *chat* terhubung kembali setiap kali Anda memulai mengetik sebuah pesan di dalam *chat*. Untuk memperbaiki masalah ini, pindahkan pembuatan objek `options` ke dalam *Effect* sehingga *Effect* hanya bergantung pada string `roomId`: @@ -742,11 +742,11 @@ button { margin-left: 10px; } -Notice that you didn't start by editing the dependency list to remove the `options` dependency. That would be wrong. Instead, you changed the surrounding code so that the dependency became *unnecessary.* Think of the dependency list as a list of all the reactive values used by your Effect's code. You don't intentionally choose what to put on that list. The list describes your code. To change the dependency list, change the code. +Perhatikan bahwa Anda tidak memulai dengan mengedit daftar *dependency* untuk menghapus `options` *dependency*. Itu akan salah. Sebaliknya, Anda mengubah kode sekitarnya sehingga *dependency*-nya menjadi *tidak perlu.* Anggaplah daftar *dependency* sebagai daftar semua nilai *reactive* yang digunakan oleh kode *Effect* Anda. Anda tidak memilih dengan sengaja apa yang harus dimasukan dalam daftar. Daftar tersebut menjelaskan kode Anda. Untuk mengubah daftar *dependency*, ubahlah kode. -Read **[Removing Effect Dependencies](/learn/removing-effect-dependencies)** to learn how to make your Effect re-run less often. +Baca **[Menghapus *Effect Dependencies*](/learn/removing-effect-dependencies)** untuk mempelajari bagaimana membuat *Effect* Anda berjalan ulang lebih jarang. From fe6973e5785d2e4176148901a824a3eef4593c32 Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Sat, 21 Oct 2023 22:24:09 +0700 Subject: [PATCH 11/18] doc: translate Reusing logic with custom Hooks --- src/content/learn/escape-hatches.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 1d4dfae70..ae3cd358e 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -750,11 +750,11 @@ Baca **[Menghapus *Effect Dependencies*](/learn/removing-effect-dependencies)** -## Reusing logic with custom Hooks {/*reusing-logic-with-custom-hooks*/} +## Menggunakan kembali logika dengan *Hooks* kustom {/*reusing-logic-with-custom-hooks*/} -React comes with 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. To do this, you can create your own Hooks for your application's needs. +Aplikasi React dibangun dengan *Hooks* bawaan seperti `useState`, `useContext`, dan `useEffect`. Kadang, Anda akan berharap ada *Hook* untuk tujuan yang lebih spesifik: Misalkan, mengambil data, melacak apakah pengguna sedang online, atau menghubungkan ke ruang *chat*. Untuk melakukannya, anda dapat membuat *Hooks* sendiri untuk kebutuhan aplikasi Anda. -In this example, the `usePointerPosition` custom Hook tracks the cursor position, while `useDelayedValue` custom Hook returns a value that's "lagging behind" the value you passed by a certain number of milliseconds. Move the cursor over the sandbox preview area to see a moving trail of dots following the cursor: +Pada contoh ini, *hook* kustom `usePointerPosition` melacak posisi kursor, sementara *hook* kustom `useDelayedValue` mengembalikan nilai yang "tertinggal" dari nilai yang Anda lewatkan selama beberapa milidetik. Geser kursor di atas area pratinjau *sandbox* untuk melihat jejak titik yang bergerak mengikuti kursor: @@ -835,14 +835,14 @@ body { min-height: 300px; } -You can create custom Hooks, compose them together, pass data between them, and reuse them between components. As your app grows, you will write fewer Effects by hand because you'll be able to reuse custom Hooks you already wrote. There are also many excellent custom Hooks maintained by the React community. +Anda dapat membuat *Hooks* kustom, menggabungkannya bersama, mengirim data di antara keduanya, dan menggunakan kembali di antara komponen. Seiring dengan perkembangan aplikasi Anda, Anda akan menulis lebih sedikit *Effects* dengan tangan karena Anda akan mampu menggunakan kembali *Hooks* kustom yang Anda sudah tulis. There are also many excellent custom Hooks maintained by the React community. -Read **[Reusing Logic with Custom Hooks](/learn/reusing-logic-with-custom-hooks)** to learn how to share logic between components. +Baca **[Menggunakan kembali logika dengan *Hooks* kustom](/learn/reusing-logic-with-custom-hooks)** untuk mempelajari bagaimana membagi logika antara komponen. -## What's next? {/*whats-next*/} +## Apa selanjutnya? {/*whats-next*/} -Head over to [Referencing Values with Refs](/learn/referencing-values-with-refs) to start reading this chapter page by page! +Pergi ke [Mereferensikan nilai menggunakan refs](/learn/referencing-values-with-refs) untuk memulai membaca bab ini halaman demi halaman! From b5cfffe3c4a672fd7c9a29991e16fc4061a261b2 Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Sat, 21 Oct 2023 22:26:12 +0700 Subject: [PATCH 12/18] docs: fix typo on escape-hatches --- src/content/learn/escape-hatches.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index ae3cd358e..ce58ece3b 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -13,10 +13,10 @@ Beberapa komponen-komponen Anda mungkin membutuhkan kendali dan sinkronisasi den * [Bagaimana cara "mengingat" informasi tanpa harus melakukan rendering kembali](/learn/referencing-values-with-refs) * [Bagaimana cara mengakses elemen DOM yang dikelola oleh React](/learn/manipulating-the-dom-with-refs) * [Bagaimana cara menyinkronkan komponen dengan sistem eksternal](/learn/synchronizing-with-effects) -* [Bagaimana cara menghapus efek yang tidak perlu dari komponen Anda](/learn/you-might-not-need-an-effect) -* [Bagaimana sebuah siklus hidup efek berbeda dari komponen](/learn/lifecycle-of-reactive-effects) +* [Bagaimana cara menghapus *Effect* yang tidak perlu dari komponen Anda](/learn/you-might-not-need-an-effect) +* [Bagaimana sebuah siklus hidup *Effect* berbeda dari komponen](/learn/lifecycle-of-reactive-effects) * [Bagaimana mencegah beberapa nilai dari pemanggilan *Effects* kembali](/learn/separating-events-from-effects) -* [Bagaiaman membuat efek Anda berjalan kembali lebih sering](/learn/removing-effect-dependencies) +* [Bagaimana membuat *Effect* Anda berjalan kembali lebih sering](/learn/removing-effect-dependencies) * [Bagaimana membagi logika antara komponen](/learn/reusing-logic-with-custom-hooks) From 84934173853c7a7f4909183cf79883a3d4f46b6e Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Sat, 21 Oct 2023 22:33:18 +0700 Subject: [PATCH 13/18] docs: translate footer and sidebar title --- src/components/Layout/Footer.tsx | 2 +- src/sidebarHome.json | 2 +- src/sidebarLearn.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index b065fb44b..4c24c9fc9 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -299,7 +299,7 @@ export function Footer() { Menambahkan Interaktivitas Mengelola State - Escape Hatches + Jalan Keluar
diff --git a/src/sidebarHome.json b/src/sidebarHome.json index 8fa12dbc6..4a68d88fb 100644 --- a/src/sidebarHome.json +++ b/src/sidebarHome.json @@ -31,7 +31,7 @@ "path": "/learn/managing-state" }, { - "title": "Escape Hatches", + "title": "Jalan Keluar", "path": "/learn/escape-hatches" }, { diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index 3d1d0db46..0744caa74 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -160,7 +160,7 @@ ] }, { - "title": "Escape Hatches", + "title": "Jalan Keluar", "path": "/learn/escape-hatches", "tags": ["advanced"], "routes": [ From cecad42b329f4ce502b2e8834be809f2690085de Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Sat, 21 Oct 2023 22:35:12 +0700 Subject: [PATCH 14/18] docs: translate missing sentence --- src/content/learn/escape-hatches.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index ce58ece3b..d7e298ce0 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -835,7 +835,7 @@ body { min-height: 300px; } -Anda dapat membuat *Hooks* kustom, menggabungkannya bersama, mengirim data di antara keduanya, dan menggunakan kembali di antara komponen. Seiring dengan perkembangan aplikasi Anda, Anda akan menulis lebih sedikit *Effects* dengan tangan karena Anda akan mampu menggunakan kembali *Hooks* kustom yang Anda sudah tulis. There are also many excellent custom Hooks maintained by the React community. +Anda dapat membuat *Hooks* kustom, menggabungkannya bersama, mengirim data di antara keduanya, dan menggunakan kembali di antara komponen. Seiring dengan perkembangan aplikasi Anda, Anda akan menulis lebih sedikit *Effects* dengan tangan karena Anda akan mampu menggunakan kembali *Hooks* kustom yang Anda sudah tulis. Terdapat banyak *Hook* kustom yang luar biasa yang dikelola oleh komunitas React. From a33ff8022396ba7fce0698861304455caf5c0657 Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Tue, 24 Oct 2023 21:13:15 +0700 Subject: [PATCH 15/18] doc: Change 'menekan' to 'tekan' Co-authored-by: Resi Respati --- src/content/learn/escape-hatches.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index d7e298ce0..bad1d2a5b 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -101,7 +101,7 @@ Baca **[Manipulasi DOM dengan Refs](/learn/manipulating-the-dom-with-refs)** unt Beberapa komponen perlu menyinkronkan dengan sistem eksternal. Misalkan, Anda mungkin ingin mengontrol komponen *non-React* berdasarkan *state* React, mengatur koneksi server, atau mengirim log analitik ketika sebuah komponen muncul di layar. Tidak seperti *event handlers*, yang memungkinkan Anda menangani *events* tertentu, *Effects* memungkinkan Anda menjalankan beberapa kode setelah *render*. Gunakan *Effects* ini untuk menyinkronkan komponen Anda dengan sistem di luar React. -Menekan tombol *Play*/*Pause* beberapa kali dan lihat bagaimana pemutar video tetep disinkronkan dengan nilai prop `isPlaying`: +Tekan tombol *Play*/*Pause* beberapa kali dan lihat bagaimana pemutar video tetep disinkronkan dengan nilai prop `isPlaying`: From 8a38389e318e3dce15e3511a2e6c9c0fad7334ed Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Sat, 4 Nov 2023 00:10:30 +0700 Subject: [PATCH 16/18] fix: italicized english translation on link Co-authored-by: M Haidar Hanif --- src/content/learn/escape-hatches.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index bad1d2a5b..34ce9b3e9 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -10,7 +10,7 @@ Beberapa komponen-komponen Anda mungkin membutuhkan kendali dan sinkronisasi den -* [Bagaimana cara "mengingat" informasi tanpa harus melakukan rendering kembali](/learn/referencing-values-with-refs) +* [Bagaimana cara "mengingat" informasi tanpa harus melakukan *rendering* kembali](/learn/referencing-values-with-refs) * [Bagaimana cara mengakses elemen DOM yang dikelola oleh React](/learn/manipulating-the-dom-with-refs) * [Bagaimana cara menyinkronkan komponen dengan sistem eksternal](/learn/synchronizing-with-effects) * [Bagaimana cara menghapus *Effect* yang tidak perlu dari komponen Anda](/learn/you-might-not-need-an-effect) From 5b86a3306b9ab495620625659d92e394abc41486 Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Sat, 4 Nov 2023 00:11:22 +0700 Subject: [PATCH 17/18] docs: adapt translation with origin phrase Co-authored-by: M Haidar Hanif --- src/content/learn/escape-hatches.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 34ce9b3e9..ce48a1dc4 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -29,7 +29,7 @@ Ketika Anda ingin sebuah komponen "mengingat" beberapa informasi, tapi Anda tida const ref = useRef(0); ``` -Sama seperti *state*, *refs* disimpan oleh React diantara pe-*render*-an ulang. Namun, mengatur *state* menyebabkan komponen di-*render* ulang. Mengganti sebuah *ref* tidak! Anda dapat mengakses nilai saat ini dari *ref* tersebut melalui properti `ref.current`. +Sama seperti *state*, *refs* disimpan oleh React diantara pe-*render*-an ulang. Namun, mengatur *state* menyebabkan komponen di-*render* ulang. Mengganti sebuah *ref* tidak menyebabkan itu! Anda dapat mengakses nilai saat ini dari *ref* tersebut melalui properti `ref.current`. From 153e4aa8a3696a985d1bd2a68df944e74be24707 Mon Sep 17 00:00:00 2001 From: Ivan Putra Eriansya Date: Sat, 4 Nov 2023 00:11:45 +0700 Subject: [PATCH 18/18] fix: typo 'pembersihan' Co-authored-by: M Haidar Hanif --- src/content/learn/escape-hatches.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index ce48a1dc4..ec428c6c6 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -145,7 +145,7 @@ video { width: 250px; } -Banyak *Effects* juga melakukan "pemberishan" setelah mereka selesai. Misalkan, sebuah *Effect* yang mengatur koneksi ke *chat server* harus mengembalikan fungsi pembersih (*cleanup function*) yang memberi tahu React bagaimana cara memutuskan koneksi komponen Anda dari *server* tersebut: +Banyak *Effects* juga melakukan "pembersihan" setelah mereka selesai. Misalkan, sebuah *Effect* yang mengatur koneksi ke *chat server* harus mengembalikan fungsi pembersih (*cleanup function*) yang memberi tahu React bagaimana cara memutuskan koneksi komponen Anda dari *server* tersebut: