From e8ce0f2e2c52ad805ead42531099c35fe4d50be5 Mon Sep 17 00:00:00 2001 From: adityaharist Date: Mon, 1 May 2023 14:06:28 +0700 Subject: [PATCH 01/13] Draft Terjemahan Sinkronisasi dengan Effect --- src/content/learn/synchronizing-with-effects.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 24b9f9eb1c..037801e1ba 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -1,10 +1,10 @@ --- -title: 'Synchronizing with Effects' +title: 'Sinkronisasi dengan Efek' --- -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. *Effects* let you run some code after rendering so that you can synchronize your component with some system outside of React. +Beberapa komponen diperlukan untuk disinkronkan dengan sistem eksternal. Misalnya, kamu mungkin ingin mengontrol sebuah komponen non-React berdasarkan status React, menyiapkan sebuah koneksi server, atau mengirimkan sebuah log analitik ketika komponen muncul di layar komputer. *Effects* memungkinkanmu untuk bisa menjalankan beberapa kode setelah me-render sehingga kamu bisa menyinkronkan komponen yang telah kamu buat dengan beberapa sistem di luar React. From 7aa5229b87c89df727c6ef9991a40bbc391a688c Mon Sep 17 00:00:00 2001 From: heko <91366057+hkohko@users.noreply.github.com> Date: Thu, 8 Jun 2023 08:14:59 +0700 Subject: [PATCH 02/13] Draft #1 synchronizing-with-effects.md --- .../learn/synchronizing-with-effects.md | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 24b9f9eb1c..d8efc34ea8 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -1,45 +1,45 @@ ---- -title: 'Synchronizing with Effects' +---klik +title: 'Sinkronisasi dengan Effect' --- -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. *Effects* let you run some code after rendering so that you can synchronize your component with some system outside of React. +Beberapa komponen membutuhkan sinkronisasi dengan sistem eksternal. Contohnya, mungkin anda ingin mengendalikan komponen non-React berdasarkan *state* React, menyetel koneksi *server*, atau mengirim *log* analitik saat komponen muncul di layar. *Effect* memperbolehkan anda menjalankan sebuah *code* setelah me-*render* sehingga anda bisa menyinkronkan komponen anda dengan suatu sistem diluar React. -- What Effects are -- How Effects are different from events -- How to declare an Effect in your component -- How to skip re-running an Effect unnecessarily -- Why Effects run twice in development and how to fix them +- Apa itu Effect +- Perbedaan Effect dari *events* +- Bagaimana cara mendeklarasikan sebuah Effect pada komponen anda +- Bagaimana cara memintas menjalankan sebuah Effect berulang kali +- Mengapa Effect berjalan dua kali dalam pengembangan dan bagaimana cara memperbaikinya -## What are Effects and how are they different from events? {/*what-are-effects-and-how-are-they-different-from-events*/} +## Apa itu Effect dan apa perbedaan mereka dengan event? {/*what-are-effects-and-how-are-they-different-from-events*/} -Before getting to Effects, you need to be familiar with two types of logic inside React components: +Sebelum menulusuri Effect, anda harus terbiasa dengan dua tipe logika dalam komponen React: -- **Rendering code** (introduced in [Describing the UI](/learn/describing-the-ui)) lives at the top level of your component. This is where you take the props and state, transform them, and return the JSX you want to see on the screen. [Rendering code must be pure.](/learn/keeping-components-pure) Like a math formula, it should only _calculate_ the result, but not do anything else. +- **Pe-*render*-an code** (dikenalkan dalam [Mendeskripsikan UI](/learn/describing-the-ui)) ada di puncak komponen anda. Ini adalah tempat dimana anda mengambil *props* dan *state*, mentransformasikannya, dan mengembalikan JSX yang ingin anda lihat di layar. [Pe-*render*-an kode harus murni](/learn/keeping-components-pure) Seperti rumus matematika; per-*render*-an kode hanya menghitung hasil; dan tidak melakukan hal lain. -- **Event handlers** (introduced in [Adding Interactivity](/learn/adding-interactivity)) are nested functions inside your components that *do* things rather than just calculate them. An event handler might update an input field, submit an HTTP POST request to buy a product, or navigate the user to another screen. Event handlers contain ["side effects"](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) (they change the program's state) caused by a specific user action (for example, a button click or typing). +- **Event handlers** (dikenalkan dalam [Menambahkan Interaktifitas](/learn/adding-interactivity)) adalah fungsi bersarang di dalam komponen anda yang tidak hanya menghitung, tetapi juga *melakukan* sesuatu. Sebuah *event handler* mungkin memperbarui sebuah *field* masukan, mengirimkan permintaan HTTP POST untuk membeli produk, atau mengarahkan pengguna ke layar lain. *Event handler* memiliki ["efek samping"](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) (mereka merubah *state* program) yang disebabkan oleh tindakan pengguna (contohnya seperti klik tombol atau pengetikan). -Sometimes this isn't enough. Consider a `ChatRoom` component that must connect to the chat server whenever it's visible on the screen. Connecting to a server is not a pure calculation (it's a side effect) so it can't happen during rendering. However, there is no single particular event like a click that causes `ChatRoom` to be displayed. +Terkadang ini tidak cukup. Sebutlah sebuah komponen `ChatRoom` yang harus terkoneksi dengan peladen obrolan setiap kali komponen ini tampil di layar. Penyambungan ke peladen tidak murni perhitungan (ini adalah efek samping) sehingga tidak dapat terjadi saat pe-*render*an. Namun, tidak ada sebuah *event* tertentu seperti sebuah klik yang menampilkan `ChatRoom`. -***Effects* let you specify side effects that are caused by rendering itself, rather than by a particular event.** Sending a message in the chat is an *event* because it is directly caused by the user clicking a specific button. However, setting up a server connection is an *Effect* because it should happen no matter which interaction caused the component to appear. Effects run at the end of a [commit](/learn/render-and-commit) after the screen updates. This is a good time to synchronize the React components with some external system (like network or a third-party library). +***Effect* memungkinkan anda untuk menentukan efek samping yang bukan disebabkan oleh *event*, melainkan oleh per-*render*-an itu sendiri.** Mengirimkan pesan dalam obrolan adalah tindakan yang disebabkan oleh pengguna menekan tombol tertentu. Oleh karena itu, hal ini adalah sebuah *event*. Namun, penyetelan koneksi ke peladen adalah sebuah *Effect* karena koneksi tersebut tetap harus terjadi terlepas dari interaksi yang menyebabkan komponen tersebut tampil. Effect berjalan di akhir sebuah [*commit*](/learn/render-and-commit) setelah layar diperbarui. Ini adalah waktu yang tepat untuk menyinkronkan komponen React dengan suatu sistem eksternal (seperti jaringan atau *library* pihak ketiga). -Here and later in this text, capitalized "Effect" refers to the React-specific definition above, i.e. a side effect caused by rendering. To refer to the broader programming concept, we'll say "side effect". +Mulai dari sini dan seterusnya, kata "Effect" kapital merujuk pada definisi "Effect" dalam React, yakni efek samping yang disebabkan oleh pe-*render*-an. Saat merujuk pada konsep pemrograman, kami akan menyebut "efek samping". -## You might not need an Effect {/*you-might-not-need-an-effect*/} +## Anda mungkin tidak membutuhkan Effect {/*you-might-not-need-an-effect*/} -**Don't rush to add Effects to your components.** Keep in mind that Effects are typically used to "step out" of your React code and synchronize with some *external* system. This includes browser APIs, third-party widgets, network, and so on. If your Effect only adjusts some state based on other state, [you might not need an Effect.](/learn/you-might-not-need-an-effect) +**Jangan tergesa-gesa untuk menambahkan Effect pada komponen anda.** Perlu diingat bahwa Effect digunakan saat anda ingin "keluar" dari kode React anda untuk sinkronisasi dengan suatu sistem eksternal. Sistem eksternal disini meliputi API peramban, *widget* pihak ketiga, jaringan, dan lainnya. Jika Effect yang anda miliki hanya digunakan untuk menyesuaikan sebuah *state* berdasarkan *state* yang lain, [anda mungkin tidak membutuhkan Effect.](/learn/you-might-not-need-an-effect) ## How to write an Effect {/*how-to-write-an-effect*/} From 3a8148ab40673f96e4500a7aa6dfcc3e2fe502e0 Mon Sep 17 00:00:00 2001 From: heko <91366057+hkohko@users.noreply.github.com> Date: Thu, 8 Jun 2023 08:17:26 +0700 Subject: [PATCH 03/13] Draft #1 (edit) synchronizing-with-effects.md --- src/content/learn/synchronizing-with-effects.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index d8efc34ea8..9da07c83fb 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -1,4 +1,4 @@ ----klik +--- title: 'Sinkronisasi dengan Effect' --- From 000a3114d96d4ec225b9a704526d7b0e0139108a Mon Sep 17 00:00:00 2001 From: heko <91366057+hkohko@users.noreply.github.com> Date: Thu, 8 Jun 2023 08:33:46 +0700 Subject: [PATCH 04/13] doc: translation src/content/learn/synchronizing-with-effects.md --- src/content/learn/synchronizing-with-effects.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 9da07c83fb..bc8d3424e4 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -22,7 +22,7 @@ Beberapa komponen membutuhkan sinkronisasi dengan sistem eksternal. Contohnya, m Sebelum menulusuri Effect, anda harus terbiasa dengan dua tipe logika dalam komponen React: -- **Pe-*render*-an code** (dikenalkan dalam [Mendeskripsikan UI](/learn/describing-the-ui)) ada di puncak komponen anda. Ini adalah tempat dimana anda mengambil *props* dan *state*, mentransformasikannya, dan mengembalikan JSX yang ingin anda lihat di layar. [Pe-*render*-an kode harus murni](/learn/keeping-components-pure) Seperti rumus matematika; per-*render*-an kode hanya menghitung hasil; dan tidak melakukan hal lain. +- **Pe-*render*-an code** (dikenalkan dalam [Mendeskripsikan UI](/learn/describing-the-ui)) ada di puncak komponen anda. Ini adalah tempat dimana anda mengambil *props* dan *state*, mentransformasikannya, dan mengembalikan JSX yang ingin anda lihat di layar. [Pe-*render*-an kode harus murni.](/learn/keeping-components-pure) Seperti rumus matematika; per-*render*-an kode hanya menghitung hasil; dan tidak melakukan hal lain. - **Event handlers** (dikenalkan dalam [Menambahkan Interaktifitas](/learn/adding-interactivity)) adalah fungsi bersarang di dalam komponen anda yang tidak hanya menghitung, tetapi juga *melakukan* sesuatu. Sebuah *event handler* mungkin memperbarui sebuah *field* masukan, mengirimkan permintaan HTTP POST untuk membeli produk, atau mengarahkan pengguna ke layar lain. *Event handler* memiliki ["efek samping"](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) (mereka merubah *state* program) yang disebabkan oleh tindakan pengguna (contohnya seperti klik tombol atau pengetikan). From b7cce4a5d267bb1865b6ccc7a9f89931a4d7dcf4 Mon Sep 17 00:00:00 2001 From: Resi Respati Date: Mon, 8 Apr 2024 11:44:37 +0700 Subject: [PATCH 05/13] translate up to "What is Effect" --- src/content/learn/escape-hatches.md | 6 ++--- .../learn/synchronizing-with-effects.md | 26 +++++++++---------- src/sidebarLearn.json | 2 +- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 2637fadc60..0bd368b91d 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -97,9 +97,9 @@ Baca **[Manipulasi DOM dengan Refs](/learn/manipulating-the-dom-with-refs)** unt -## Menyinkronkan dengan *Effects* {/*synchronizing-with-effects*/} +## Sinkronisasi dengan *Effects* {/*synchronizing-with-effects*/} -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. +Beberapa komponen perlu melakukan sinkronisasi sistem eksternal. Misalkan, Anda mungkin ingin mengontrol komponen di luar 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 melakukan sinkronisasi dengan sistem di luar React. Tekan tombol *Play*/*Pause* beberapa kali dan lihat bagaimana pemutar video tetep disinkronkan dengan nilai prop `isPlaying`: @@ -187,7 +187,7 @@ Di mode pengembangan (*development*), React akan segera menjalankan dan membersi -Baca **[Menyinkronkan dengan *Effects*](/learn/synchronizing-with-effects)** untuk mempelajari bagaimana menyinkronkan komponen dengan sistem eksternal. +Baca **[Sinkronisasi dengan *Effects*](/learn/synchronizing-with-effects)** untuk mempelajari bagaimana menyinkronkan komponen dengan sistem eksternal. diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 9cc0cadb2d..f811489baa 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -1,38 +1,38 @@ --- -title: 'Sinkronisasi dengan Efek' +title: 'Sinkronisasi dengan Effects' --- -Beberapa komponen diperlukan untuk disinkronkan dengan sistem eksternal. Misalnya, kamu mungkin ingin mengontrol sebuah komponen non-React berdasarkan status React, menyiapkan sebuah koneksi server, atau mengirimkan sebuah log analitik ketika komponen muncul di layar komputer. *Effects* memungkinkanmu untuk bisa menjalankan beberapa kode setelah me-render sehingga kamu bisa menyinkronkan komponen yang telah kamu buat dengan beberapa sistem di luar React. +Beberapa komponen perlu melakukan sinkronisasi dengan sistem eksternal. Misalkan, Anda mungkin ingin mengontrol komponen di luar React berdasarkan *state* React, mengatur koneksi server, atau mengirim log analitik ketika sebuah komponen muncul di layar. *Effects* memungkinkan Anda menjalankan kode setelah *render* sehingga Anda bisa melakukan sinkronisasi dengan sistem di luar React. -- What Effects are -- How Effects are different from events -- How to declare an Effect in your component +- Apa itu *Effect* +- Perbedaan *Effect* dengan *event* +- Cara mendeklarasikan *Effect* di dalam komponen - How to skip re-running an Effect unnecessarily -- Why Effects run twice in development and how to fix them +- Mengapa *Effect* berjalan dua kali di pengembangan (*development*) dan cara memperbaikinya -## What are Effects and how are they different from events? {/*what-are-effects-and-how-are-they-different-from-events*/} +## Apa itu *Effect* dan apa perbedaanya dengan *event*? {/*what-are-effects-and-how-are-they-different-from-events*/} -Before getting to Effects, you need to be familiar with two types of logic inside React components: +Sebelum kita membahas *Effect*, Anda perlu mengenal dua tipe logika di dalam komponen React: -- **Rendering code** (introduced in [Describing the UI](/learn/describing-the-ui)) lives at the top level of your component. This is where you take the props and state, transform them, and return the JSX you want to see on the screen. [Rendering code must be pure.](/learn/keeping-components-pure) Like a math formula, it should only _calculate_ the result, but not do anything else. +- **Kode pe-*render*-an** (diperkenalkan di [Menggambarkan Antarmuka Pengguna](/learn/describing-the-ui)) berada di tingkat atas komponen Anda. Inilah di mana Anda mengambil *props* dan *state*, mentransformasinya, dan mengembalikan JSX yang diinginkan di layar. [Kode pe-*render*-an haruslah murni.](/learn/keeping-components-pure) Seperti rumus matematika, ia harus _menghitung_ hasilnya saja, tapi tidak melakukan hal lainnya. -- **Event handlers** (introduced in [Adding Interactivity](/learn/adding-interactivity)) are nested functions inside your components that *do* things rather than just calculate them. An event handler might update an input field, submit an HTTP POST request to buy a product, or navigate the user to another screen. Event handlers contain ["side effects"](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) (they change the program's state) caused by a specific user action (for example, a button click or typing). +- ***Event handlers*** (diperkenalkan di [Menambahkan Interaktivitas](/learn/adding-interactivity)) adalah fungsi bersarang di dalam komponen yang *melakukan* berbagai hal dan bukan hanya menghitungnya. Sebuah *event handler* dapat memperbarui bidang input, mengirimkan permintaan HTTP POST untuk membeli produk, atau menavigasi pengguna ke layar lain. *Event handlers* memiliki ["efek samping"](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) (yaitu mengubah *state* program) yang dihasilkan dari aksi pengguna tertentu (misalnya, tekanan tombol atau ketikan). -Sometimes this isn't enough. Consider a `ChatRoom` component that must connect to the chat server whenever it's visible on the screen. Connecting to a server is not a pure calculation (it's a side effect) so it can't happen during rendering. However, there is no single particular event like a click that causes `ChatRoom` to be displayed. +Terkadang hal-hal ini tidak cukup. Bayangkan sebuah komponen `ChatRoom` yang harus melakukan koneksi ke server obrolan (*chat*) ketika ditampilkan di layar. Melakukan koneksi ke server bukanlah penghitungan murni (melainkan efek samping) jadi tidak dapat dilakukan saat proses *render*. Meskipun itu, tidak ada *event* tertentu seperti klik yang akan menampilkan `ChatRoom`. -***Effects* let you specify side effects that are caused by rendering itself, rather than by a particular event.** Sending a message in the chat is an *event* because it is directly caused by the user clicking a specific button. However, setting up a server connection is an *Effect* because it should happen no matter which interaction caused the component to appear. Effects run at the end of a [commit](/learn/render-and-commit) after the screen updates. This is a good time to synchronize the React components with some external system (like network or a third-party library). +***Effects* memungkinkan Anda menentukan efek samping yang disebabkan oleh pe-*render*-an itu sendiri, dan bukan oleh *event* tertentu.** Mengirim pesan di ruang obrolan merupakan *event* karena disebabkan secara langsung oleh pengguna yang mengeklik tombol tertentu. Namun, melakukan koneksi server merupakan *Effect* karena harus terjadi tanpa peduli interaksi apapun yang menyebabkan komponen ditampilkan. *Effects* berjalan di akhir [*commit*](/learn/render-and-commit) setelah layar diperbarui. Ini merupakan waktu yang tepat untuk menyinkronkan komponen React dengan sistem eksternal (seperti jaringan atau pustaka pihak ketiga). -Here and later in this text, capitalized "Effect" refers to the React-specific definition above, i.e. a side effect caused by rendering. To refer to the broader programming concept, we'll say "side effect". +Di sini dan selanjutnya dalam teks ini, kata "Effect" yang dikapitalisasi mengacu kepada definisi khusus React yang dijelaskan di atas, seperti efek samping yang disebabkan oleh proses *render*. Untuk mengacu kepada konsep pemrograman secara keseluruhan, kami akan menggunakan kata "efek samping". diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index 338eba3852..3d7cf12c14 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -177,7 +177,7 @@ "path": "/learn/manipulating-the-dom-with-refs" }, { - "title": "Synchronizing with Effects", + "title": "Sinkronisasi dengan Efek", "path": "/learn/synchronizing-with-effects" }, { From 8d53bd5fa1d11b39c24c92dccc06625d16ac4ad9 Mon Sep 17 00:00:00 2001 From: Resi Respati Date: Mon, 8 Apr 2024 12:47:33 +0700 Subject: [PATCH 06/13] translate up to How to Write Effects: Step 1 --- .../learn/synchronizing-with-effects.md | 74 ++++++++++--------- 1 file changed, 38 insertions(+), 36 deletions(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index f811489baa..a140b00e23 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -32,66 +32,66 @@ Terkadang hal-hal ini tidak cukup. Bayangkan sebuah komponen `ChatRoom` yang har -Di sini dan selanjutnya dalam teks ini, kata "Effect" yang dikapitalisasi mengacu kepada definisi khusus React yang dijelaskan di atas, seperti efek samping yang disebabkan oleh proses *render*. Untuk mengacu kepada konsep pemrograman secara keseluruhan, kami akan menggunakan kata "efek samping". +Di sini dan selanjutnya dalam teks ini, kata "*Effect*" yang dikapitalisasi mengacu kepada definisi khusus React yang dijelaskan di atas, seperti efek samping yang disebabkan oleh proses *render*. Untuk mengacu kepada konsep pemrograman secara keseluruhan, kita akan menggunakan kata "efek samping". -## You might not need an Effect {/*you-might-not-need-an-effect*/} +## Anda mungkin tidak membutuhkan *Effect* {/*you-might-not-need-an-effect*/} -**Don't rush to add Effects to your components.** Keep in mind that Effects are typically used to "step out" of your React code and synchronize with some *external* system. This includes browser APIs, third-party widgets, network, and so on. If your Effect only adjusts some state based on other state, [you might not need an Effect.](/learn/you-might-not-need-an-effect) +**Jangan terburu-buru menambahkan *Effects* ke dalam komponen Anda.** Perlu diingat bahwa *Effects* umumnya digunakan untuk "melangkah ke luar" dari kode React Anda dan menyinkronkan dengan sistem *eksternal*. Hal ini termasuk API peramban (*browser*), *widget* pihak ketiga, jaringan, dan lainnya. Apabila *Effect* Anda hanya mengatur *state* berdasarkan *state* lain, [Anda mungkin tidak membutuhkan *Effect*.](/learn/you-might-not-need-an-effect) -## How to write an Effect {/*how-to-write-an-effect*/} +## Cara menulis *Effect* {/*how-to-write-an-effect*/} -To write an Effect, follow these three steps: +Untuk menulis *Effect*, ikuti tiga langkah berikut: -1. **Declare an Effect.** By default, your Effect will run after every render. -2. **Specify the Effect dependencies.** Most Effects should only re-run *when needed* rather than after every render. For example, a fade-in animation should only trigger when a component appears. Connecting and disconnecting to a chat room should only happen when the component appears and disappears, or when the chat room changes. You will learn how to control this by specifying *dependencies.* -3. **Add cleanup if needed.** Some Effects need to specify how to stop, undo, or clean up whatever they were doing. For example, "connect" needs "disconnect", "subscribe" needs "unsubscribe", and "fetch" needs either "cancel" or "ignore". You will learn how to do this by returning a *cleanup function*. +1. **Deklarasikan Effect.** Secara bawaan, *Effect* Anda akan berjalan setiap *render*. +2. **Tentukan dependensi dari Effect.** Kebanyakan *Effect* hanya perlu dijalankan ulang *ketika diperlukan*, bukan setiap render. Misalnya, animasi *fade-in* seharusnya hanya dijalankan ketika sebuah komponen muncul. Menghubungkan dan memutuskan koneksi ke ruang obrolan seharusnya hanya terjadi ketika komponen muncul dan menghilang, atau ketika ruang obrolan berubah. Anda akan belajar cara mengontrolnya dengan menentukan *dependensi.* +3. **Tambahkan pembersihan (*cleanup*) jika diperlukan.** Beberapa *Effect* perlu menentukan cara menghentikan, membatalkan, atau membersihkan apa pun yang sedang dilakukan. Misalnya, "sambungkan koneksi" membutuhkan "lepaskan koneksi", "berlangganan" memerlukan "hentikan langganan", dan "*fetch*" membutuhkan "batal" atau "abaikan". Anda akan belajar cara melakukan hal tersebut dengan mengembalikan *fungsi pembersihan*. -Let's look at each of these steps in detail. +Mari kita lihat langkah-langkah berikut secara detil. -### Step 1: Declare an Effect {/*step-1-declare-an-effect*/} +### Langkah 1: Deklarasikan Effect {/*step-1-declare-an-effect*/} -To declare an Effect in your component, import the [`useEffect` Hook](/reference/react/useEffect) from React: +Untuk mendeklarasikan *Effect* di dalam komponen, impor [Hook `useEffect`](/reference/react/useEffect) dari React: ```js import { useEffect } from 'react'; ``` -Then, call it at the top level of your component and put some code inside your Effect: +Kemudian, panggil Hook tersebut di atas komponen Anda dan isikan *Effect* tersebut dengan kode: ```js {2-4} function MyComponent() { useEffect(() => { - // Code here will run after *every* render + // Kode di dalam blok ini akan dijalankan setelah *setiap* render }); return
; } ``` -Every time your component renders, React will update the screen *and then* run the code inside `useEffect`. In other words, **`useEffect` "delays" a piece of code from running until that render is reflected on the screen.** +Setiap kali setelah komponen Anda di-*render*, React akan memperbarui layar *kemudian* menjalankan kode di dalam `useEffect`. Dengan kata lain, **`useEffect` "menunda" sepotong kode agar tidak berjalan sampai *render* tersebut ditampilkan di layar.** -Let's see how you can use an Effect to synchronize with an external system. Consider a `` React component. It would be nice to control whether it's playing or paused by passing an `isPlaying` prop to it: +Mari kita lihat bagaimana Anda dapat menggunakan *Effect* untuk melakukan sinkronisasi dengan sistem eksternal. Bayangkan sebuah komponen React ``. Akan lebih baik jika kita dapat mengontrol apakah video sedang diputar atau dijeda dengan mengoper *prop* `isPlaying` ke dalamnya: ```js ; ``` -Your custom `VideoPlayer` component renders the built-in browser [`