Translate Using the Effect Hook by RiskyFeryansyahP · Pull Request #38 · reactjs/id.react.dev

RiskyFeryansyahP · 2019-02-20T09:08:55Z

Finally i finished this 😃 , please helps review this

netlify · 2019-02-20T09:12:52Z

Deploy preview for idreactjs ready!

Built with commit 3b7a5bf

https://deploy-preview-38--idreactjs.netlify.com

regalius

Hi @RiskyFeryansyahP , Thanks for your contribution! 🎉 So sorry that I hadn't been able to review your PR this past week, there's several terms that I think need adjustment and there also some typos, italicization, wrong capital letters, and diction that needs to be revised. If you're not sure about some of the diction, please check out some of the accepted and merged PRs and try to sync your pr with them.

Thank you!

RiskyFeryansyahP · 2019-02-25T13:50:02Z

@regalius thanks for review, i will update soon

netlify · 2019-03-04T16:12:36Z

Deploy preview for id-reactjs ready!

Built with commit 3b7a5bf

https://deploy-preview-38--id-reactjs.netlify.com

resir014

Hi @RiskyFeryansyahP! Ada cukup banyak review item yang saya tambahkan disini, tapi jangan khawatir, sebagian besar hanya masalah konsistensi.

resir014 · 2019-09-03T10:56:04Z

+*Hooks* adalah tambahan baru di React 16.8. *Hooks* memungkinkan Anda dapat menggunakan *state* dan fitur lain di *React* tanpa menulis *class*.

-The *Effect Hook* lets you perform side effects in function components:
+*Effect Hook* memungkinkan Anda melakukan efek samping (*side effects*) didalam *function components*:


Suggested change
*Effect Hook* memungkinkan Anda melakukan efek samping (*side effects*) didalam *function components*:
*Effect Hook* memungkinkan Anda melakukan efek samping (*side effects*) didalam *function component*:

resir014 · 2019-09-03T10:56:15Z

+Potongan code diatas berdasarkan pada [contoh *counter* dari halaman sebelumnya](/docs/hooks-state.html), tetapi kita menambahkan fitur baru didalamnya: kita akan mengisi judul dokumen dengan pesan kustom termasuk dari jumlah klik.

-Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. Whether or not you're used to calling these operations "side effects" (or just "effects"), you've likely performed them in your components before.
+Pengambilan data, pengaturan berlangganan(*subscription*) , dan perubahan manual DOM di dalam komponen React adalah beberapa contoh dari efek samping. Apakah Anda terbiasa menyebut memanggil operasi ini dengan sebutan efek samping (atau hanya "efek (*effects*)") atau tidak, Anda mungkin pernah melakukannya di dalam komponen Anda sebelumnya.


Suggested change
Pengambilan data, pengaturan berlangganan(*subscription*) , dan perubahan manual DOM di dalam komponen React adalah beberapa contoh dari efek samping. Apakah Anda terbiasa menyebut memanggil operasi ini dengan sebutan efek samping (atau hanya "efek (*effects*)") atau tidak, Anda mungkin pernah melakukannya di dalam komponen Anda sebelumnya.
Pengambilan data, pengaturan berlangganan(*subscription*) , dan perubahan manual DOM di dalam komponen React adalah beberapa contoh dari efek samping. Apakah Anda terbiasa menyebut memanggil operasi ini dengan sebutan efek samping (atau hanya "efek (*effects*)") atau tidak, Anda mungkin pernah melakukannya di dalam komponen Anda sebelumnya.

resir014 · 2019-09-03T10:57:15Z

+### Contoh Menggunakan Classes {#example-using-classes}

-In React class components, the `render` method itself shouldn't cause side effects. It would be too early -- we typically want to perform our effects *after* React has updated the DOM.
+Di dalam sebuah *class components* React, *method* *`render`* itu sendiri tidak seharusnya menyebabkan efek samping. Efek samping akan dijalankan terlalu awal -- kita biasanya ingin melakukan sebuah efek setelah React memperbarui DOM.


Suggested change
Di dalam sebuah *class components* React, *method**`render`* itu sendiri tidak seharusnya menyebabkan efek samping. Efek samping akan dijalankan terlalu awal -- kita biasanya ingin melakukan sebuah efek setelah React memperbarui DOM.
Di dalam sebuah *class components* React, *method*`render` itu sendiri tidak seharusnya menyebabkan efek samping. Efek samping akan dijalankan terlalu awal -- kita biasanya ingin melakukan sebuah efek setelah React memperbarui DOM.
Code block jangan dijadikan italic, nanti tidak te-render dengan benar.

resir014 · 2019-09-03T10:58:20Z

+**Apa yang dilakukan `useEffect`?** dengan menggunakan Hook ini, anda mengatakan kepada *React* bahwa komponen anda butuh menjalankan sestuatu setelah *render*. React akan mengingat fungsi yang anda berikan (kita akan menyebutnya sebagai "*effect*"), dan panggil itu nanti setelah DOM melakukan pembaruan. Di dalam *effect*, kita menentukan *document title*, tapi kita bisa juga melakukan pengambilan data atau memanggil beberapa API imperatif lainnya.

-**Why is `useEffect` called inside a component?** Placing `useEffect` inside the component lets us access the `count` state variable (or any props) right from the effect. We don't need a special API to read it -- it's already in the function scope. Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution.
+**Kenapa `useEffect` dipanggil didalam komponen?** Meletakkan `useEffect` di dalam komponen memberikan kita akses *`count` state variable* (atau props apapun) langsung dari *effect*. Kita tidak membutuhkan API khusus untuk membacanya -- itu sudah dalam lingkup *function*. Hooks merangkul penutup JavaScript dan menghindari memperkenalkan APIs React-khusus dimana JavaScript sudah menyediakan solusinya.


Suggested change
**Kenapa `useEffect` dipanggil didalam komponen?** Meletakkan `useEffect` di dalam komponen memberikan kita akses *`count`state variable*(atau props apapun) langsung dari *effect*. Kita tidak membutuhkan API khusus untuk membacanya -- itu sudah dalam lingkup *function*. Hooks merangkul penutup JavaScript dan menghindari memperkenalkan APIs React-khusus dimana JavaScript sudah menyediakan solusinya.
**Kenapa `useEffect` dipanggil didalam komponen?** Meletakkan `useEffect` di dalam komponen memberikan kita akses kepada variabel *state*`count` (atau *props* apapun) langsung dari *effect*. Kita tidak membutuhkan API khusus untuk membacanya -- itu sudah dalam lingkup *function*. Hooks merangkul penutup JavaScript dan menghindari memperkenalkan APIs React-khusus dimana JavaScript sudah menyediakan solusinya.

resir014 · 2019-09-03T10:59:28Z

+**Kenapa `useEffect` dipanggil didalam komponen?** Meletakkan `useEffect` di dalam komponen memberikan kita akses *`count` state variable* (atau props apapun) langsung dari *effect*. Kita tidak membutuhkan API khusus untuk membacanya -- itu sudah dalam lingkup *function*. Hooks merangkul penutup JavaScript dan menghindari memperkenalkan APIs React-khusus dimana JavaScript sudah menyediakan solusinya.

-**Does `useEffect` run after every render?** Yes! By default, it runs both after the first render *and* after every update. (We will later talk about [how to customize this](#tip-optimizing-performance-by-skipping-effects).) Instead of thinking in terms of "mounting" and "updating", you might find it easier to think that effects happen "after render". React guarantees the DOM has been updated by the time it runs the effects.
+**Apakah `useEffect` berjalan setiap setelah render?** Ya! Secara standar, itu berjalan baik setelah pertama kali render *dan* setiap setelah pembaruan. (Kita akan bicarakan nanti tentang [bagimana cara menyesuaikannya](#tip-optimizing-performance-by-skipping-effects).) alih-alih berpikir dalam hal "pemasangan" dan "pembaruan", anda mungkin lebih mudah berpikir bawah *effects* terjadi "setelah *render*". React menjamin bahwa DOM telah diperbarui pada saat menjalankan *effects*.


Suggested change
**Apakah `useEffect` berjalan setiap setelah render?** Ya! Secara standar, itu berjalan baik setelah pertama kali render *dan* setiap setelah pembaruan. (Kita akan bicarakan nanti tentang [bagimana cara menyesuaikannya](#tip-optimizing-performance-by-skipping-effects).) alih-alih berpikir dalam hal "pemasangan" dan "pembaruan", anda mungkin lebih mudah berpikir bawah *effects* terjadi "setelah *render*". React menjamin bahwa DOM telah diperbarui pada saat menjalankan *effects*.
**Apakah `useEffect` berjalan setiap setelah render?** Ya! Secara standar, `useEffect` berjalan setelah pertama kali render *dan* setiap setelah pembaruan. (Kita akan bicarakan nanti tentang [bagimana cara menyesuaikannya](#tip-optimizing-performance-by-skipping-effects).) alih-alih berpikir dalam hal "pemasangan" dan "pembaruan", anda mungkin lebih mudah berpikir bawah *effects* terjadi "setelah *render*". React menjamin bahwa DOM telah diperbarui pada saat menjalankan *effects*.
Ambiguous "itu". It refers to the useEffect method, right?

resir014 · 2019-09-03T11:10:29Z

+### Penjelasan: Mengapa *Effects* Berjalan di Setiap Pembaruan {#explanation-why-effects-run-on-each-update}

-If you're used to classes, you might be wondering why the effect cleanup phase happens after every re-render, and not just once during unmounting. Let's look at a practical example to see why this design helps us create components with fewer bugs.
+Jika anda terbiasa menggunakan *classes*, anda mungkin bertanya-tanya mengapa fase pembersihan *effect* cleaup terjadi setelah setiap render ulang, dan tidak hanya sekali selama pelepasan. Mari kita lihat contoh praktis kenapa desain ini membatu kita membuat komponen dengan bug lebih sedikit.


Suggested change
Jika anda terbiasa menggunakan *classes*, anda mungkin bertanya-tanya mengapa fase pembersihan *effect* cleaup terjadi setelah setiap render ulang, dan tidak hanya sekali selama pelepasan. Mari kita lihat contoh praktis kenapa desain ini membatu kita membuat komponen dengan bug lebih sedikit.
Jika anda terbiasa menggunakan *classes*, anda mungkin bertanya-tanya mengapa fase pembersihan *effect* cleaup terjadi setelah setiap *render* ulang, dan tidak hanya sekali selama pelepasan. Mari kita lihat contoh praktis kenapa desain ini membatu kita membuat komponen dengan *bug* lebih sedikit.
Some missing italics here.

resir014 · 2019-09-03T11:10:55Z

 ```

-**But what happens if the `friend` prop changes** while the component is on the screen? Our component would continue displaying the online status of a different friend. This is a bug. We would also cause a memory leak or crash when unmounting since the unsubscribe call would use the wrong friend ID.
+**Tapi apa yang terjadi jika `friend` prop berubah** saat komponen sudah ada di layar? Komponen kita akan terus menampilkan status online teman yang berbeda. Ini adalah bug. Kita juga akan menyebabkan kebocoran memory atau kerusakan saat pelepasan karena pemanggilan unsubscribe akan menggunakan *ID* teman yang salah.


Suggested change
**Tapi apa yang terjadi jika `friend` prop berubah** saat komponen sudah ada di layar? Komponen kita akan terus menampilkan status online teman yang berbeda. Ini adalah bug. Kita juga akan menyebabkan kebocoran memory atau kerusakan saat pelepasan karena pemanggilan unsubscribe akan menggunakan *ID* teman yang salah.
**Tapi apa yang terjadi jika *props*`friend` berubah** saat komponen sudah ada di layar? Komponen kita akan terus menampilkan status online teman yang berbeda. Ini adalah bug. Kita juga akan menyebabkan kebocoran memory atau kerusakan saat pelepasan karena pemanggilan unsubscribe akan menggunakan *ID* teman yang salah.

resir014 · 2019-09-03T11:12:36Z

 ```

-Forgetting to handle `componentDidUpdate` properly is a common source of bugs in React applications.
+Lupa untuk menangani `componentDidUpdate` dengan benar adalah sumber bug yang umum di applikasi *React*.


Suggested change
Lupa untuk menangani `componentDidUpdate` dengan benar adalah sumber bug yang umum di applikasi *React*.
Lupa untuk menangani `componentDidUpdate` dengan benar adalah sumber bug yang umum di applikasi React.
No need to italicise React.

resir014 · 2019-09-03T11:13:19Z

 ```

-It doesn't suffer from this bug. (But we also didn't make any changes to it.)
+Itu tidak memmbiarkan dari bug ini. (Tapi kita juga tidak melakukan perubahan apapun terhadapnya.)


Suggested change
Itu tidak memmbiarkan dari bug ini. (Tapi kita juga tidak melakukan perubahan apapun terhadapnya.)
Komponen ini tidak akan mengalami *bug* ini. (Tapi kita juga tidak melakukan perubahan apapun terhadapnya.)

resir014 · 2019-09-03T11:14:52Z

->If you pass an empty array (`[]`), the props and state inside the effect will always have their initial values. While passing `[]` as the second argument is closer to the familiar `componentDidMount` and `componentWillUnmount` mental model, there are usually [better](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [solutions](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) to avoid re-running effects too often. Also, don't forget that React defers running `useEffect` until after the browser has painted, so doing extra work is less of a problem.
->
->We recommend using the [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) rule as part of our [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package. It warns when dependencies are specified incorrectly and suggests a fix.
+>Kita merekomendasikan menggunakan [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) sebagai aturan dari package [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Akan diperingatkan ketika depedensi ditentukan dengan cara yang salah dan menyarankan perbaikan.


Suggested change
>Kita merekomendasikan menggunakan [`exhaustive-deps`](https://github.com/facebook/react/issues/14920)sebagai aturan dari package [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Akan diperingatkan ketika depedensi ditentukan dengan cara yang salah dan menyarankan perbaikan.
>Kita merekomendasikan menggunakan aturan [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) dari package [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Ini akan memperingatkan ketika depedensi ditentukan dengan cara yang salah dan menyarankan perbaikan.

Translation Hook-Effect
f0e3d77

regalius suggested changes Feb 24, 2019
View reviewed changes

regalius requested review from arfianadam and gedeagas February 24, 2019 13:41

tesseralis mentioned this pull request Mar 3, 2019
[OLD] Legacy Indonesian Translation Progress #1
Closed
96 tasks

request change regalius
9b8952c

grikomsn changed the title ~~Translation Hook-Effect~~Translate Using the Effect HookJul 10, 2019

grikomsn mentioned this pull request Jul 10, 2019
Translate Rules of Hooks #53
Merged

Merge branch 'master' into master
c2e41e0

resir014 requested changes Sep 3, 2019
View reviewed changes

RiskyFeryansyahP added 3 commits October 6, 2019 10:35

request change@resir014
02cbb17

request change resir014
1607ecb

request change resir014
3b7a5bf

resir014 approved these changes Oct 11, 2019
View reviewed changes

resir014 merged commit a5f3ccd into reactjs:masterOct 11, 2019

resir014 mentioned this pull request Oct 25, 2019
[OLD] Style Guide & Common Terms #2
Closed

	Effect Hook memungkinkan Anda melakukan efek samping (side effects) didalam function components:
	Effect Hook memungkinkan Anda melakukan efek samping (side effects) didalam function component:

	Pengambilan data, pengaturan berlangganan(subscription) , dan perubahan manual DOM di dalam komponen React adalah beberapa contoh dari efek samping. Apakah Anda terbiasa menyebut memanggil operasi ini dengan sebutan efek samping (atau hanya "efek (effects)") atau tidak, Anda mungkin pernah melakukannya di dalam komponen Anda sebelumnya.
	Pengambilan data, pengaturan berlangganan(subscription) , dan perubahan manual DOM di dalam komponen React adalah beberapa contoh dari efek samping. Apakah Anda terbiasa menyebut memanggil operasi ini dengan sebutan efek samping (atau hanya "efek (effects)") atau tidak, Anda mungkin pernah melakukannya di dalam komponen Anda sebelumnya.

	Di dalam sebuah class components React, method`render` itu sendiri tidak seharusnya menyebabkan efek samping. Efek samping akan dijalankan terlalu awal -- kita biasanya ingin melakukan sebuah efek setelah React memperbarui DOM.
	Di dalam sebuah class components React, method`render` itu sendiri tidak seharusnya menyebabkan efek samping. Efek samping akan dijalankan terlalu awal -- kita biasanya ingin melakukan sebuah efek setelah React memperbarui DOM.

	Jika anda terbiasa menggunakan classes, anda mungkin bertanya-tanya mengapa fase pembersihan effect cleaup terjadi setelah setiap render ulang, dan tidak hanya sekali selama pelepasan. Mari kita lihat contoh praktis kenapa desain ini membatu kita membuat komponen dengan bug lebih sedikit.
	Jika anda terbiasa menggunakan classes, anda mungkin bertanya-tanya mengapa fase pembersihan effect cleaup terjadi setelah setiap render ulang, dan tidak hanya sekali selama pelepasan. Mari kita lihat contoh praktis kenapa desain ini membatu kita membuat komponen dengan bug lebih sedikit.

	Tapi apa yang terjadi jika `friend` prop berubah saat komponen sudah ada di layar? Komponen kita akan terus menampilkan status online teman yang berbeda. Ini adalah bug. Kita juga akan menyebabkan kebocoran memory atau kerusakan saat pelepasan karena pemanggilan unsubscribe akan menggunakan ID teman yang salah.
	*Tapi apa yang terjadi jika props`friend` berubah* saat komponen sudah ada di layar? Komponen kita akan terus menampilkan status online teman yang berbeda. Ini adalah bug. Kita juga akan menyebabkan kebocoran memory atau kerusakan saat pelepasan karena pemanggilan unsubscribe akan menggunakan ID teman yang salah.

	Lupa untuk menangani `componentDidUpdate` dengan benar adalah sumber bug yang umum di applikasi React.
	Lupa untuk menangani `componentDidUpdate` dengan benar adalah sumber bug yang umum di applikasi React.

	Itu tidak memmbiarkan dari bug ini. (Tapi kita juga tidak melakukan perubahan apapun terhadapnya.)
	Komponen ini tidak akan mengalami bug ini. (Tapi kita juga tidak melakukan perubahan apapun terhadapnya.)

	>Kita merekomendasikan menggunakan [`exhaustive-deps`](https://github.com/facebook/react/issues/14920)sebagai aturan dari package [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Akan diperingatkan ketika depedensi ditentukan dengan cara yang salah dan menyarankan perbaikan.
	>Kita merekomendasikan menggunakan aturan [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) dari package [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Ini akan memperingatkan ketika depedensi ditentukan dengan cara yang salah dan menyarankan perbaikan.

Uh oh!

Conversation

RiskyFeryansyahP commented Feb 20, 2019

Uh oh!

netlifyBot commented Feb 20, 2019• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

regalius left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

RiskyFeryansyahP commented Feb 25, 2019

Uh oh!

netlifyBot commented Mar 4, 2019• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

resir014 left a comment

Choose a reason for hiding this comment

Uh oh!

resir014Sep 3, 2019• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlifyBot commented Feb 20, 2019•
edited
Loading

netlifyBot commented Mar 4, 2019•
edited
Loading

resir014Sep 3, 2019•
edited
Loading