From 6329e846b15071f993bf1b6f4c30a03b66ada4df Mon Sep 17 00:00:00 2001
From: dummyeuy <ghalib12.euy16@gmail.com>
Date: Fri, 25 Oct 2019 03:07:34 +0700
Subject: [PATCH 01/14] hasil terjemahan content/docs/HOOKS-FAQ.md dari
 dummyeuy

---
 content/docs/hooks-faq.md | 617 +++++++++++++++++++-------------------
 1 file changed, 308 insertions(+), 309 deletions(-)

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index 851d136df..7d34d2a8e 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -1,16 +1,16 @@
 ---
 id: hooks-faq
-title: Hooks FAQ
+title: *Hooks* FAQ
 permalink: docs/hooks-faq.html
 prev: hooks-reference.html
 ---
+<!-- docs/hooks-faq.md ini diterjemahkan oleh dummyeuy (Muhammad Ghalib) -->
+*Hooks* adalah tambahan baru dalam React 16.8. React memungkikan anda untuk menggunakan *state* dan fitur-fitur React lainnya tanpa perlu menuliskan sebuah kelas. 
 
-*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
-
-This page answers some of the frequently asked questions about [Hooks](/docs/hooks-overview.html).
+Laman ini menjawab beberapa pertanyaan yang sering diajukan (*frequently asked questions*) tentang [Hooks](/docs/hooks-overview.html).
 
 <!--
-  if you ever need to regenerate this, this snippet in the devtools console might help:
+  jika Anda perlu me-egenerate ini, snippet dalam konsol devtools ini bisa membantu:
 
   $$('.anchor').map(a =>
     `${' '.repeat(2 * +a.parentNode.nodeName.slice(1))}` +
@@ -18,135 +18,134 @@ This page answers some of the frequently asked questions about [Hooks](/docs/hoo
   ).join('\n')
 -->
 
-* **[Adoption Strategy](#adoption-strategy)**
-  * [Which versions of React include Hooks?](#which-versions-of-react-include-hooks)
-  * [Do I need to rewrite all my class components?](#do-i-need-to-rewrite-all-my-class-components)
-  * [What can I do with Hooks that I couldn't with classes?](#what-can-i-do-with-hooks-that-i-couldnt-with-classes)
-  * [How much of my React knowledge stays relevant?](#how-much-of-my-react-knowledge-stays-relevant)
-  * [Should I use Hooks, classes, or a mix of both?](#should-i-use-hooks-classes-or-a-mix-of-both)
-  * [Do Hooks cover all use cases for classes?](#do-hooks-cover-all-use-cases-for-classes)
-  * [Do Hooks replace render props and higher-order components?](#do-hooks-replace-render-props-and-higher-order-components)
-  * [What do Hooks mean for popular APIs like Redux connect() and React Router?](#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router)
-  * [Do Hooks work with static typing?](#do-hooks-work-with-static-typing)
-  * [How to test components that use Hooks?](#how-to-test-components-that-use-hooks)
-  * [What exactly do the lint rules enforce?](#what-exactly-do-the-lint-rules-enforce)
-* **[From Classes to Hooks](#from-classes-to-hooks)**
-  * [How do lifecycle methods correspond to Hooks?](#how-do-lifecycle-methods-correspond-to-hooks)
-  * [How can I do data fetching with Hooks?](#how-can-i-do-data-fetching-with-hooks)
-  * [Is there something like instance variables?](#is-there-something-like-instance-variables)
-  * [Should I use one or many state variables?](#should-i-use-one-or-many-state-variables)
-  * [Can I run an effect only on updates?](#can-i-run-an-effect-only-on-updates)
-  * [How to get the previous props or state?](#how-to-get-the-previous-props-or-state)
-  * [Why am I seeing stale props or state inside my function?](#why-am-i-seeing-stale-props-or-state-inside-my-function)
-  * [How do I implement getDerivedStateFromProps?](#how-do-i-implement-getderivedstatefromprops)
-  * [Is there something like forceUpdate?](#is-there-something-like-forceupdate)
-  * [Can I make a ref to a function component?](#can-i-make-a-ref-to-a-function-component)
-  * [How can I measure a DOM node?](#how-can-i-measure-a-dom-node)
-  * [What does const [thing, setThing] = useState() mean?](#what-does-const-thing-setthing--usestate-mean)
-* **[Performance Optimizations](#performance-optimizations)**
-  * [Can I skip an effect on updates?](#can-i-skip-an-effect-on-updates)
-  * [Is it safe to omit functions from the list of dependencies?](#is-it-safe-to-omit-functions-from-the-list-of-dependencies)
-  * [What can I do if my effect dependencies change too often?](#what-can-i-do-if-my-effect-dependencies-change-too-often)
-  * [How do I implement shouldComponentUpdate?](#how-do-i-implement-shouldcomponentupdate)
-  * [How to memoize calculations?](#how-to-memoize-calculations)
-  * [How to create expensive objects lazily?](#how-to-create-expensive-objects-lazily)
-  * [Are Hooks slow because of creating functions in render?](#are-hooks-slow-because-of-creating-functions-in-render)
-  * [How to avoid passing callbacks down?](#how-to-avoid-passing-callbacks-down)
-  * [How to read an often-changing value from useCallback?](#how-to-read-an-often-changing-value-from-usecallback)
-* **[Under the Hood](#under-the-hood)**
-  * [How does React associate Hook calls with components?](#how-does-react-associate-hook-calls-with-components)
-  * [What is the prior art for Hooks?](#what-is-the-prior-art-for-hooks)
+* **[Strategi Adopsi](#adoption-strategy)**
+  * [Versi React mana yang termasuk *Hooks* di dalamnya?](#which-versions-of-react-include-hooks)
+  * [Apakah perlu menulis ulang semua kelas komponen saya?](#do-i-need-to-rewrite-all-my-class-components)
+  * [Apa yang dapat saya lakukan dengn *Hooks* namun tidak bisa saya lakukan dengan kelas-kelas?](#what-can-i-do-with-hooks-that-i-couldnt-with-classes)
+  * [Seberapa banyak pengetahuan saya tentang React yang tetap relevan?](#how-much-of-my-react-knowledge-stays-relevant)
+  * [Haruskan saya menggunakan Hooks, kelas atau gabungan keduanya?](#should-i-use-hooks-classes-or-a-mix-of-both)
+  * [Apakah *Hooks* mencakup seluruh kasus yang digunakan untuk kelas?](#do-hooks-cover-all-use-cases-for-classes)
+  * [Apakah *Hooks* menggantikan *render props* dan *higher-order components*?](#do-hooks-replace-render-props-and-higher-order-components)
+  * [Apa yang *Hooks* peruntukan untuk API populer seperti *Redux connect()* dan *React router*?](#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router)
+  * [Apakah *Hooks* dapat berjalan dengan *static typing*?](#do-hooks-work-with-static-typing)
+  * [Bagaimana cara menguji komponen-komponen yang menggunakan Hooks?](#how-to-test-components-that-use-hooks)
+  * [Apa yang sebenarnya aturan-aturan *lint* terapkan?](#what-exactly-do-the-lint-rules-enforce)
+* **[Dari Kelas ke Hooks](#from-classes-to-hooks)**
+  * [Bagaimana cara *lifecycle method* dapat sesuai dengan Hooks?](#how-do-lifecycle-methods-correspond-to-hooks)
+  * [Bagaimana cara saya dapat memperoleh data dengan Hooks?](#how-can-i-do-data-fetching-with-hooks)
+  * [Apakah ada hal seperti *instance variable*?](#is-there-something-like-instance-variables)
+  * [Apa saya harus menggunakan satu atau beberapa *state variable*?](#should-i-use-one-or-many-state-variables)
+  * [Bisakah saya menjalakan sebuah efek hanya pada pembaruan?](#can-i-run-an-effect-only-on-updates)
+  * [Bagimana cara untuk mendapatkan kembali *prop* atau *state* sebelumnya?](#how-to-get-the-previous-props-or-state)
+  * [Mengapa saya melihat *stale prop* atau *state* dalam fungsi yang saya buat?](#why-am-i-seeing-stale-props-or-state-inside-my-function)
+  * [Bagaimana cara mengimplementasikan *getDerivedStateFromProps*?](#how-do-i-implement-getderivedstatefromprops)
+  * [Apakah ada suatu hal seperti *forceUpdate*?](#is-there-something-like-forceupdate)
+  * [Bisakah saya membuat sebuah *ref* pada sebuah komponen fungsi?](#can-i-make-a-ref-to-a-function-component)
+  * [Bagaimana cara mengukur sebuah node *DOM*](#how-can-i-measure-a-dom-node)
+  * [Apa yang dimaksud dengan *const [thing, setThing] = useState()*?](#what-does-const-thing-setthing--usestate-mean)
+* **[Optimasi Performa](#performance-optimizations)**
+  * [Bisakah saya melewatkan sebuah efek pada pembaruan?](#can-i-skip-an-effect-on-updates)
+  * [Apakah aman untuk menghilangkan fungsi dari daftar *dependency*?](#is-it-safe-to-omit-functions-from-the-list-of-dependencies)
+  * [Apa yang bisa saya lakukan jika efek *dependency* berganti terlalu sering?](#what-can-i-do-if-my-effect-dependencies-change-too-often)
+  * [Bagaimana cara mengimplementasikan *shouldComponentUpdate*?](#how-do-i-implement-shouldcomponentupdate)
+  * [Bagaimana cara *memoize* perhitungan?](#how-to-memoize-calculations)
+  * [Bagaimana cara membuat objek *expensive* secara *lazy*?](#how-to-create-expensive-objects-lazily)
+  * [Apakah *Hooks* lamban karena membuat fungsi di saat *render*?](#are-hooks-slow-because-of-creating-functions-in-render)
+  * [Bagaimana cara menghindari pengoperan *callback* menjadi *down*?](#how-to-avoid-passing-callbacks-down)
+  * [Bagimana cara membaca sebuah nilai yang sering berubah dari *useCallback*?](#how-to-read-an-often-changing-value-from-usecallback)
+* **[*Under the Hood*](#under-the-hood)**
+  * [Bagaimana React menghubungkan panggilan *Hook* dengan komponen?](#how-does-react-associate-hook-calls-with-components)
+  * [Bagaimana *seni awal*-nya *Hooks*?](#what-is-the-prior-art-for-hooks)
 
-## Adoption Strategy {#adoption-strategy}
+## Strategi Adopsi {#adoption-strategy}
 
-### Which versions of React include Hooks? {#which-versions-of-react-include-hooks}
+### Versi React mana yang termasuk *Hooks* di dalamnya? {#which-versions-of-react-include-hooks}
 
-Starting with 16.8.0, React includes a stable implementation of React Hooks for:
+Mulai dari 16.8.0, dalam React sudah termasuk *stable implementation* dari React *Hooks* untuk:
 
-* React DOM
-* React Native
-* React DOM Server
-* React Test Renderer
-* React Shallow Renderer
+* React *DOM*
+* React *Native*
+* React *DOM Server*
+* React *Test Renderer*
+* React *Shallow Renderer*
 
-Note that **to enable Hooks, all React packages need to be 16.8.0 or higher**. Hooks won't work if you forget to update, for example, React DOM.
+Perhatikan bahwa **untuk menjalankan Hooks, semua *package* React perlu setidaknya pada versi 16.8.0 atau lebih tinggi**. *Hooks* tidak akan bekerja jika Anda lupa melakukan pembaruan, sebagai contohnya, React *DOM*.
 
-[React Native 0.59](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059) and above support Hooks.
+[React Native 0.59](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059) dan versi di atasnya sudah mendukung Hooks.
 
-### Do I need to rewrite all my class components? {#do-i-need-to-rewrite-all-my-class-components}
+### Apakah perlu menulis ulang semua kelas komponen saya?{#do-i-need-to-rewrite-all-my-class-components}
 
-No. There are [no plans](/docs/hooks-intro.html#gradual-adoption-strategy) to remove classes from React -- we all need to keep shipping products and can't afford rewrites. We recommend trying Hooks in new code.
+Tidak. [Tidak ada rencana](/docs/hooks-intro.html#gradual-adoption-strategy) untuk menghilangkan kelas dari React -- kami perlu terus mengirimkan produk dan tidak akan melakukan penulisan ulang. Kami rekomendasikan untuk mencoba *Hooks* dalam kode baru.
 
-### What can I do with Hooks that I couldn't with classes? {#what-can-i-do-with-hooks-that-i-couldnt-with-classes}
+### Apa yang dapat saya lakukan dengn *Hooks* namun tidak bisa saya lakukan dengan kelas-kelas? {#what-can-i-do-with-hooks-that-i-couldnt-with-classes}
 
-Hooks offer a powerful and expressive new way to reuse functionality between components. ["Building Your Own Hooks"](/docs/hooks-custom.html) provides a glimpse of what's possible. [This article](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) by a React core team member dives deeper into the new capabilities unlocked by Hooks.
+Hooks menawarkan sebuah cara baru yang kuat dan ekpresif untuk menggunakan kembali fungsionalitas antara komponen. ["Buat Hooks-mu Sendiri"](/docs/hooks-custom.html) menyajikan sekialas apa saja yang mungkin dilakukan. [Artikel ini](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889), oleh seorang anggota inti tim React, menyelam lebih dalam lagi ke kemampuan-kemampuan baru yang dibuka oleh Hooks.
 
-### How much of my React knowledge stays relevant? {#how-much-of-my-react-knowledge-stays-relevant}
+### Seberapa banyak pengetahuan saya tentang React yang tetap relevan? {#how-much-of-my-react-knowledge-stays-relevant}
 
-Hooks are a more direct way to use the React features you already know -- such as state, lifecycle, context, and refs. They don't fundamentally change how React works, and your knowledge of components, props, and top-down data flow is just as relevant.
+Hooks adalah cara yang lebih langsung untuk menggunakan fitur-fitur React yang sudah Anda ketahui -- seperti *state, lifecycle, context,* dan *ref*. Hal-hal tersebut tidak secara mendasar merubah bagaimana React bekerja, dan pengetahuan Anda tentang komponen, *props*, dan *top-down data flow* tetaplah relevan.
 
-Hooks do have a learning curve of their own. If there's something missing in this documentation, [raise an issue](https://github.com/reactjs/reactjs.org/issues/new) and we'll try to help.
+Hooks memiliki sebuah alur kurva pembelajarannya sendiri. Jika terdapat sesuatu yang hilang dalam dokumentasi ini, [ajukan isu](https://github.com/reactjs/reactjs.org/issues/new) dan kami akan coba membantu.
 
-### Should I use Hooks, classes, or a mix of both? {#should-i-use-hooks-classes-or-a-mix-of-both}
+### Haruskan saya menggunakan Hooks, kelas atau gabungan keduanya?{#should-i-use-hooks-classes-or-a-mix-of-both}
 
-When you're ready, we'd encourage you to start trying Hooks in new components you write. Make sure everyone on your team is on board with using them and familiar with this documentation. We don't recommend rewriting your existing classes to Hooks unless you planned to rewrite them anyway (e.g. to fix bugs).
+Ketika Anda siap, kami menganjurkan Anda untuk mulai mencoba *Hooks* dalam komponen-komponen baru yang Anda tulis. Pastikan setiap orang dalam tim Anda siap dan tidak asing dengan dokumentasi ini. Kami tidak merekomendasikan menulis ulang kelas-kelas Anda yang sudah ada ke *Hooks* kecuali Anda sudah berencana menulis ulang (seperti, memperbaiki *bug*).
 
-You can't use Hooks *inside* of a class component, but you can definitely mix classes and function components with Hooks in a single tree. Whether a component is a class or a function that uses Hooks is an implementation detail of that component. In the longer term, we expect Hooks to be the primary way people write React components.
+Anda tidak bisa menggunakan *Hooks* *di dalam* sebuah komponen kelas, tetapi Anda bisa mencampurkan komponen kelas dan fungsi dengan *Hooks* dalam sebuah tatanan. Tak peduli apakah sebuah komponen adalah kelas atau fungsi yang menggunakan Hooks, itu semua adalah implementasi rinci dari komponen tersebut. Dalam jangka waktu panjang, kami harap *Hooks* menjadi cara utama semua orang untuk menulis komponen React.
 
-### Do Hooks cover all use cases for classes? {#do-hooks-cover-all-use-cases-for-classes}
+### Apakah *Hooks* mencakup seluruh kasus yang digunakan untuk kelas? {#do-hooks-cover-all-use-cases-for-classes}
 
-Our goal is for Hooks to cover all use cases for classes as soon as possible. There are no Hook equivalents to the uncommon `getSnapshotBeforeUpdate` and `componentDidCatch` lifecycles yet, but we plan to add them soon.
+Tujuan kami untuk *Hooks* yakni mencakup seluruh kasus yang digunakan untuk kelas sesegera mungkin. Tidak ada persamaan (*equivalent*) *Hooks* untuk *lifecyle* yang tidak umum seperti *`getSnapshotBeforeUpdate`* dan *`componentDidCatch`* sementara ini, namun kami berencana untuk menambahkannya segera.
 
-It is an early time for Hooks, and some third-party libraries might not be compatible with Hooks at the moment.
+Sekarang adalah masa-masa awal untuk Hooks, dan *library* pihak ketiga bisa jadi tidak kompatibel dengan *Hooks* saat ini.
 
-### Do Hooks replace render props and higher-order components? {#do-hooks-replace-render-props-and-higher-order-components}
+### Apakah *Hooks* menggantikan *render props* dan *higher-order components*? {#do-hooks-replace-render-props-and-higher-order-components}
 
-Often, render props and higher-order components render only a single child. We think Hooks are a simpler way to serve this use case. There is still a place for both patterns (for example, a virtual scroller component might have a `renderItem` prop, or a visual container component might have its own DOM structure). But in most cases, Hooks will be sufficient and can help reduce nesting in your tree.
+Seringkali, *render props* dan *higher-order components* hanya (me)*render* sebuah turunan. Kami pikir *Hooks* adalah cara yang lebih sederhana untuk menyajikan kasus penggunaan ini. Masih ada tempat untuk kedua pola (contohnya, sebuah *virtual scroller component* bisa saja memiliki sebuah *`renderItem` prop*, atau sebuah *visual container component* bisa saja memiliki struktur *DOM*-nya sendiri). Namun dalam banyak kasus, *Hooks* sudahlah cukup dan akan membantu mengurangi *nesting* dalam tatanan Anda.
 
-### What do Hooks mean for popular APIs like Redux `connect()` and React Router? {#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router}
+### Apa yang *Hooks* peruntukan untuk API populer seperti *Redux `connect()`* dan *React router*? {#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router}
 
-You can continue to use the exact same APIs as you always have; they'll continue to work.
+Anda dapat terus menggunakan *API* yang sama seperti yang selama ini dilakukan; *API* tersebut akan tetap bekerja.
 
-React Redux since v7.1.0 [supports Hooks API](https://react-redux.js.org/api/hooks) and exposes hooks like `useDispatch` or `useSelector`.
+*React Redux* sejak versi v7.1.0 [mendukung API Hooks](https://react-redux.js.org/api/hooks) dan memaparkan *Hooks* seperti *`useDispatch`* atau *`useSelector`*.
 
-Libraries like React Router might support hooks in the future.
+*Library* seperti *React Router* akan mendukung *Hooks* di masa yang akan datang.
 
-### Do Hooks work with static typing? {#do-hooks-work-with-static-typing}
+### Apakah *Hooks* dapat berjalan dengan *static typing*?{#do-hooks-work-with-static-typing}
 
-Hooks were designed with static typing in mind. Because they're functions, they are easier to type correctly than patterns like higher-order components. The latest Flow and TypeScript React definitions include support for React Hooks.
+Hooks didesain dengan *static typing* pada dasarnya. Karena hal-hal tersebut adalah fungsi, *static typing* lebih mudah ditulis dengan benar daripada pola-pola seperti *higher-order components*. Definisi *Flow* dan *TypeScript React* sudah termasuk *support* untuk React *Hooks* di dalamnya.
 
-Importantly, custom Hooks give you the power to constrain React API if you'd like to type them more strictly in some way. React gives you the primitives, but you can combine them in different ways than what we provide out of the box.
+Penting untuk diingat, *custom Hooks* memberikan Anda kewenangan untuk memaksa *React API* jika Anda ingin menuliskannya dengan lebih ketat dalam beberapa hal. React memberikan Anda *primitives*, tapi Anda bisa menggabungkannya dengan cara-cara lain yang unik selain dari yang kami sediakan untuk Anda.
 
-### How to test components that use Hooks? {#how-to-test-components-that-use-hooks}
+### Bagaimana cara menguji komponen-komponen yang menggunakan Hooks? {#how-to-test-components-that-use-hooks}
 
-From React's point of view, a component using Hooks is just a regular component. If your testing solution doesn't rely on React internals, testing components with Hooks shouldn't be different from how you normally test components.
+Dari sudut pandang React, sebuah komponen yang menggunakan *Hooks* hanyalah sekedar komponen biasa. Jika solusi *testing* Anda tidak bergantung pada fitur-fitur di dalam React, menguji komponen dengan *Hooks* tidak akan berbeda halnya dengan uji komponen yang normalnya Anda lakukan.
 
->Note
+>Catatan
 >
->[Testing Recipes](/docs/testing-recipes.html) include many examples that you can copy and paste.
+>[Testing Recipes](/docs/testing-recipes.html) memuat banyak contoh yang bisa Anda salin dan terapkan.
 
-For example, let's say we have this counter component:
+Sebagai contoh, umpamakan kita memiliki komponen penghitung (*counter*) berikut:
 
 ```js
 function Example() {
   const [count, setCount] = useState(0);
   useEffect(() => {
-    document.title = `You clicked ${count} times`;
+    document.title = `Anda meng-klik sebanyak ${count} kali`;
   });
   return (
     <div>
-      <p>You clicked {count} times</p>
+      <p>Anda meng-klik sebanyak {count} kali</p>
       <button onClick={() => setCount(count + 1)}>
-        Click me
+        Klik sayaS
       </button>
     </div>
   );
 }
 ```
+Kami akan mengujinya dengan React *DOM*. Pastikan bahwa perilakunya dengan yang terjadi di peramban, kami akan mengemas proses *rendering* kode dan memperbaruinya ke dalam [`ReactTestUtils.act()`](/docs/test-utils.html#act) beberapa pemanggilan:
 
-We'll test it using React DOM. To make sure that the behavior matches what happens in the browser, we'll wrap the code rendering and updating it into [`ReactTestUtils.act()`](/docs/test-utils.html#act) calls:
-
-```js{3,20-22,29-31}
+```js {3,20-22,29-31}
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
@@ -164,71 +163,71 @@ afterEach(() => {
   container = null;
 });
 
-it('can render and update a counter', () => {
-  // Test first render and effect
+it('bisa me-render dan memperbarui sebuah counter', () => {
+  // Uji render dan efek pertama
   act(() => {
     ReactDOM.render(<Counter />, container);
   });
   const button = container.querySelector('button');
   const label = container.querySelector('p');
-  expect(label.textContent).toBe('You clicked 0 times');
-  expect(document.title).toBe('You clicked 0 times');
+  expect(label.textContent).toBe('Anda meng-klik 0 kali');
+  expect(document.title).toBe('Anda meng-klik 0 kali');
 
-  // Test second render and effect
+  // Uji render dan efek kedua
   act(() => {
     button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
   });
-  expect(label.textContent).toBe('You clicked 1 times');
-  expect(document.title).toBe('You clicked 1 times');
+  expect(label.textContent).toBe('Anda meng-klik 1 kali');
+  expect(document.title).toBe('Anda meng-klik 1 kali');
 });
 ```
 
-The calls to `act()` will also flush the effects inside of them.
+Pemanggilan `act()` juga akan menghilangkan efek di dalamnya.
 
-If you need to test a custom Hook, you can do so by creating a component in your test, and using your Hook from it. Then you can test the component you wrote.
+Jika perlu menguji sebuah *custom Hook*, Anda bisa melakukannya dengan cara membuat sebuah komponen dalam pengujian Anda, dan gunakan Hook dari situ. Kemudian Anda bisa menguji komponen yang Anda tulis.
 
-To reduce the boilerplate, we recommend using [React Testing Library](https://testing-library.com/react) which is designed to encourage writing tests that use your components as the end users do.
+Untuk mengurangi terjadinya *boilerplate*, kami rekomendasikan menggunakan [React Testing Library](https://testing-library.com/react) yang mana didesain untuk mendorong menulis pengujian-pengujian yang menggunakan komponen Anda selayaknya yang dilakukan *end user*.
 
-For more information, check out [Testing Recipes](/docs/testing-recipes.html).
+Untuk informasi lebih lanjut, cek [Testing Recipes](/docs/testing-recipes.html).
 
-### What exactly do the [lint rules](https://www.npmjs.com/package/eslint-plugin-react-hooks) enforce? {#what-exactly-do-the-lint-rules-enforce}
+### Apa yang sebenarnya [aturan lint](https://www.npmjs.com/package/eslint-plugin-react-hooks) terapkan? {#what-exactly-do-the-lint-rules-enforce}
 
-We provide an [ESLint plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) that enforces [rules of Hooks](/docs/hooks-rules.html) to avoid bugs. It assumes that any function starting with "`use`" and a capital letter right after it is a Hook. We recognize this heuristic isn't perfect and there may be some false positives, but without an ecosystem-wide convention there is just no way to make Hooks work well -- and longer names will discourage people from either adopting Hooks or following the convention.
+Kami menyediakan sebuah [*plugin* ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) yang menerapkan [aturan-aturan Hooks](/docs/hooks-rules.html) demi menghindari *bug*. *Plugin* tersebut mengasumsikan bahwa fungsi apapun yang diawali dengan "`use`" dan sebuah huruf kapital tepat setelahnya, adalah sebuah Hook. Kami menyadari pendekatan penemuan (heuristik) ini tidaklah sempurna dan bisa jadi masih ada beberapa *false positive*, akan tetapi tanpa sebuah perjanjian (konvensi) seluruh lingkup ekosistem tidak akan mungkin *Hooks* akan berjalan dengan baik -- dan nama-nama yang lebih panjang akan mengecilkan minat orang-orang baik untuk mengadopsi *Hooks* maupun mengikuti konvensinya.
 
-In particular, the rule enforces that:
+Khususnya, aturan tersebut menekankan bahwa:
 
-* Calls to Hooks are either inside a `PascalCase` function (assumed to be a component) or another `useSomething` function (assumed to be a custom Hook).
-* Hooks are called in the same order on every render.
+* Panggilan untuk *Hooks* bisa terdapat di dalam sebuah fungsi *`PascalCase`* (diasumsikan sebagai sebuah komponen) atau fungsi *`useSomething`* lainnya (diasumsikan sebagai sebuah *custom Hook*).
+* *Hooks* dipanggil dalam urutan yang sama pada setiap *render*.
 
-There are a few more heuristics, and they might change over time as we fine-tune the rule to balance finding bugs with avoiding false positives.
+Terdapat beberapa heuristik lagi, dan hal tersebut bisa saja berubah sepanjang waktu selama kita memperbaiki terus aturan yang ada demi menyeimbangkan temuan *bug* dengan menghindari *false positive*.
 
-## From Classes to Hooks {#from-classes-to-hooks}
+## Dari Kelas ke *Hooks* {#from-classes-to-hooks}
 
-### How do lifecycle methods correspond to Hooks? {#how-do-lifecycle-methods-correspond-to-hooks}
+### Bagaimana cara *lifecycle method* dapat sesuai dengan Hooks? {#how-do-lifecycle-methods-correspond-to-hooks}
 
-* `constructor`: Function components don't need a constructor. You can initialize the state in the [`useState`](/docs/hooks-reference.html#usestate) call. If computing the initial state is expensive, you can pass a function to `useState`.
+* *`constructor`*: Komponen fungsi tidak memerlukan sebuah *constructor*. Anda bisa menginisiasikan *state* di dalam panggilan [*`useState`*](/docs/hooks-reference.html#usestate). Jika komputasi *state* awal itu *expensive*, Anda bisa mengoper sebuah fungsi ke *`useState`*.
 
-* `getDerivedStateFromProps`: Schedule an update [while rendering](#how-do-i-implement-getderivedstatefromprops) instead.
+* *`getDerivedStateFromProps`*: Jadwalkan sebuah pembaruan [ketika proses *render*](#how-do-i-implement-getderivedstatefromprops).
 
-* `shouldComponentUpdate`: See `React.memo` [below](#how-do-i-implement-shouldcomponentupdate).
+* *`shouldComponentUpdate`*: Lihat `React.memo` [di bawah ini](#how-do-i-implement-shouldcomponentupdate).
 
-* `render`: This is the function component body itself.
+* *`render`*: Ini adalah komponen fungsi *body* itu sendiri.
 
-* `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`: The [`useEffect` Hook](/docs/hooks-reference.html#useeffect) can express all combinations of these (including [less](#can-i-skip-an-effect-on-updates) [common](#can-i-run-an-effect-only-on-updates) cases).
+* *`componentDidMount`, `componentDidUpdate`, `componentWillUnmount`*: [*`useEffect` Hook*](/docs/hooks-reference.html#useeffect) dapat mengekspresikan semua kombinasi ini (termasuk kasus-kasus yang [kurang](#can-i-skip-an-effect-on-updates) [awam](#can-i-run-an-effect-only-on-updates)).
 
-* `componentDidCatch` and `getDerivedStateFromError`: There are no Hook equivalents for these methods yet, but they will be added soon.
+* *`componentDidCatch`* dan *`getDerivedStateFromError`*: Tidak ada persamaan Hook untuk *method* ini sementara ini, tetapi akan segera ditambahkan.
 
-### How can I do data fetching with Hooks? {#how-can-i-do-data-fetching-with-hooks}
+### Bagaimana cara saya dapat memperoleh data dengan Hooks?{#how-can-i-do-data-fetching-with-hooks}
 
-Here is a [small demo](https://codesandbox.io/s/jvvkoo8pq3) to get you started. To learn more, check out [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) about data fetching with Hooks.
+Berikut ini sebuah [demo kecil](https://codesandbox.io/s/jvvkoo8pq3) untuk permulaan Anda. Untuk mempelajari lebih lanjut, lihat [attikel ini](https://www.robinwieruch.de/react-hooks-fetch-data/) tentang memperoleh (*fetching*) data dengan menggunakan Hooks.
 
-### Is there something like instance variables? {#is-there-something-like-instance-variables}
+### Apakah ada hal seperti *instance variable*? {#is-there-something-like-instance-variables}
 
-Yes! The [`useRef()`](/docs/hooks-reference.html#useref) Hook isn't just for DOM refs. The "ref" object is a generic container whose `current` property is mutable and can hold any value, similar to an instance property on a class.
+Ya! [`useRef()`](/docs/hooks-reference.html#useref) Hook tidak hanya untuk *DOM ref*. Objek *"ref"* adalah sebuah *container* umum yang mana memiliki properti *`current`* yang berubah-ubah serta dapat memegang nilai apapun, serupa dengan *instance property* pada sebuah kelas.
 
-You can write to it from inside `useEffect`:
+Anda dapat menuliskannya dari dalam *'useEffect'*:
 
-```js{2,8}
+```js {2,8}
 function Timer() {
   const intervalRef = useRef();
 
@@ -246,9 +245,9 @@ function Timer() {
 }
 ```
 
-If we just wanted to set an interval, we wouldn't need the ref (`id` could be local to the effect), but it's useful if we want to clear the interval from an event handler:
+Jika kita hanya ingin mengatur sebuah interval, kita tidak perlu *ref* (*'id'* bisa jadi lokal pada efek tersebut), tapi akan berguna jika kita ingin membersihkan interval dari sebuah *event handler*:
 
-```js{3}
+```js {3}
   // ...
   function handleCancelClick() {
     clearInterval(intervalRef.current);
@@ -256,11 +255,11 @@ If we just wanted to set an interval, we wouldn't need the ref (`id` could be lo
   // ...
 ```
 
-Conceptually, you can think of refs as similar to instance variables in a class. Unless you're doing [lazy initialization](#how-to-create-expensive-objects-lazily), avoid setting refs during rendering -- this can lead to surprising behavior. Instead, typically you want to modify refs in event handlers and effects.
+Secara konsep, Anda bisa pikirkan *ref* itu serupa dengan *instance variables* dalam sebuah kelas. Kecuali, Anda menerapkan [lazy initialization](#how-to-create-expensive-objects-lazily), hindari pengaturan ref selama proses *render* -- hal ini akan mengakibatkan *behavior* yang tidak terduga. Sebagai gantinya, biasanya Anda ingin untuk memodifikasi *ref* dalam *event handler* dan efek.
 
-### Should I use one or many state variables? {#should-i-use-one-or-many-state-variables}
+### Apa saya harus menggunakan satu atau beberapa *state variable*? {#should-i-use-one-or-many-state-variables}
 
-If you're coming from classes, you might be tempted to always call `useState()` once and put all state into a single object. You can do it if you'd like. Here is an example of a component that follows the mouse movement. We keep its position and size in the local state:
+Jika Anda memulai dari kelas, Anda mungkin ingin tetap memanggil *`useState()`* satu kali dan menempatkan semua *state* ke dalam sebuah objek tunggal. Anda bisa melakukan hal demikian jika suka. Berikut ini sebuah contoh sebuah komponen yang mengikuti pergerakan tetikus. Kita menetapkan posisi dan ukurannya dalam *local state*:
 
 ```js
 function Box() {
@@ -269,29 +268,29 @@ function Box() {
 }
 ```
 
-Now let's say we want to write some logic that changes `left` and `top` when the user moves their mouse. Note how we have to merge these fields into the previous state object manually:
+Sekarang umpamakan kita ingin menuliskan beberapa logika yang mana merubah *`left`* (sisi kiri) dan *`top`* (sisi atas) ketika pengguna menggerakan tetikusnya. Perhatikan bagaimana kita harus menggabungkan area-area inike dalam objek *state* sebelumnya secara manual:
 
-```js{4,5}
+```js {4,5}
   // ...
   useEffect(() => {
     function handleWindowMouseMove(e) {
-      // Spreading "...state" ensures we don't "lose" width and height
+      // Menyebarkan "...state" memastikan kita tidak "kehilangan" lebar dan tinggi
       setState(state => ({ ...state, left: e.pageX, top: e.pageY }));
     }
-    // Note: this implementation is a bit simplified
+    // Catatan: implementasi ini agak sedikit disederhanakan
     window.addEventListener('mousemove', handleWindowMouseMove);
     return () => window.removeEventListener('mousemove', handleWindowMouseMove);
   }, []);
   // ...
 ```
 
-This is because when we update a state variable, we *replace* its value. This is different from `this.setState` in a class, which *merges* the updated fields into the object.
+Ini karena ketika kita memperbarui sebuah *state variable*, kita merubah (*replace*) nilainya. Ini berbeda dari *`this.setState`* dalam sebuah kelas, yang mana menggabungkan (*merges*) area-area yang diperbarui ke dalam objek.
 
-If you miss automatic merging, you can write a custom `useLegacyState` Hook that merges object state updates. However, instead **we recommend to split state into multiple state variables based on which values tend to change together.**
+Jika Anda melihatkan penggabungan otomatis (*automatic merging*), Anda bisa menulis sebuah *custom `useLegacyState` Hook* yang menggabungkan pembaruan-pembaruan *state* objek.  Namun, sebagai gantinya **kami merekomendasikan untuk membagi *state* menjadi beberapa *state variable* berdasarkan nilai mana yang cenderung berubah bersamaan.**
 
-For example, we could split our component state into `position` and `size` objects, and always replace the `position` with no need for merging:
+Sebagai contohnya, kita bisa membagi *state* komponen menjadi *`position`* dan *`size`* objek, serta selalu merubah *`position`* tanpa harus proses penggabungan:
 
-```js{2,7}
+```js {2,7}
 function Box() {
   const [position, setPosition] = useState({ left: 0, top: 0 });
   const [size, setSize] = useState({ width: 100, height: 100 });
@@ -303,9 +302,9 @@ function Box() {
     // ...
 ```
 
-Separating independent state variables also has another benefit. It makes it easy to later extract some related logic into a custom Hook, for example:
+Memisahkan *state variable* independen juga memiliki keuntungan lain. Hal tersebut membuatnya mudah untuk mengekstrak beberapa logika ke dalam sebuah *custom Hook* nantinya, sebagai contoh:
 
-```js{2,7}
+```js {2,7}
 function Box() {
   const position = useWindowPosition();
   const [size, setSize] = useState({ width: 100, height: 100 });
@@ -321,19 +320,19 @@ function useWindowPosition() {
 }
 ```
 
-Note how we were able to move the `useState` call for the `position` state variable and the related effect into a custom Hook without changing their code. If all state was in a single object, extracting it would be more difficult.
+Perhatikan bagaimana kita dapat memindahkan panggilan *`useState`* untuk *state variable `position`* serta efek yang terhubung ke dalam sebuah *custom Hook* tanpa merubah kodenya. Jika semua *state* ada dalams sebuah objek, mengekstrak *state* tersebut akan jadi lebih sulit.
 
-Both putting all state in a single `useState` call, and having a `useState` call per each field can work. Components tend to be most readable when you find a balance between these two extremes, and group related state into a few independent state variables. If the state logic becomes complex, we recommend [managing it with a reducer](/docs/hooks-reference.html#usereducer) or a custom Hook.
+Baik memasang semua *state* ke dalam sebuah panggilan *`useState`*, serta memiliki sebuah panggilan *`useState`* pada setiap area, keduanya sama-sama berfungsi. Komponen-komponen cenderung paling mudah dibaca ketika Anda menemukan keseimbangan antara (penerapan) kedua cara tersebut, dan kelompok yang terhubung dengan *state* ke dalam beberapa *state variable* independen. Jika logika *state* tersebut menjadi kompleks, kami rekomendasikan [mengelolanya dengan sebuah *reducer*](/docs/hooks-reference.html#usereducer) atau sebuah *custom Hook*.
 
-### Can I run an effect only on updates? {#can-i-run-an-effect-only-on-updates}
+### Bisakah saya menjalakan sebuah efek hanya pada pembaruan? {#can-i-run-an-effect-only-on-updates}
 
-This is a rare use case. If you need it, you can [use a mutable ref](#is-there-something-like-instance-variables) to manually store a boolean value corresponding to whether you are on the first or a subsequent render, then check that flag in your effect. (If you find yourself doing this often, you could create a custom Hook for it.)
+Ini adalah kasus penggunaan yang langka. Jika butuh, Anda bisa [gunakan sebuah *ref* yang bisa diubah-ubah](#is-there-something-like-instance-variables) menjadi secara manual menyetorkan nilai *boolean* sesuai dengan apakah Anda berada pada *render* pertama atau selanjutnya, kemudia memeriksa penandanya (*flag*) pada efek yang Anda buat. (Jika sering melakukan hal ini, ada baiknya Anda membuat sebuah *custom Hook*.)
 
-### How to get the previous props or state? {#how-to-get-the-previous-props-or-state}
+### Bagimana cara untuk mendapatkan kembali *prop* atau *state* sebelumnya? {#how-to-get-the-previous-props-or-state}
 
-Currently, you can do it manually [with a ref](#is-there-something-like-instance-variables):
+Kini, Anda bisa melakukannya secara manual [dengan *ref*](#is-there-something-like-instance-variables):
 
-```js{6,8}
+```js {6,8}
 function Counter() {
   const [count, setCount] = useState(0);
 
@@ -347,9 +346,9 @@ function Counter() {
 }
 ```
 
-This might be a bit convoluted but you can extract it into a custom Hook:
+Ini bisa jadi agak berbelit tetapi Anda bisa mengekstraknya ke dalam sebuah *custom Hook*:
 
-```js{3,7}
+```js {3,7}
 function Counter() {
   const [count, setCount] = useState(0);
   const prevCount = usePrevious(count);
@@ -365,9 +364,9 @@ function usePrevious(value) {
 }
 ```
 
-Note how this would work for props, state, or any other calculated value.
+Perhatikan bagaimana hal ini dapat bekerja pada *props, state,* atau nilai apapun yang diperhitungkan.
 
-```js{5}
+```js {5}
 function Counter() {
   const [count, setCount] = useState(0);
 
@@ -376,13 +375,13 @@ function Counter() {
   // ...
 ```
 
-It's possible that in the future React will provide a `usePrevious` Hook out of the box since it's a relatively common use case.
+Di masa yang akan datang, React mungkin akan menyediakan sebuah *`usePrevious` Hook* yang unik mengingat hal tersebut adalah kasus yang cukup sering digunakan.
 
-See also [the recommended pattern for derived state](#how-do-i-implement-getderivedstatefromprops).
+Lihat juga [pola yang direkomendasikan untuk *derived state*](#how-do-i-implement-getderivedstatefromprops).
 
-### Why am I seeing stale props or state inside my function? {#why-am-i-seeing-stale-props-or-state-inside-my-function}
+### Mengapa saya melihat *stale prop* atau *state* dalam fungsi yang saya buat?  {#why-am-i-seeing-stale-props-or-state-inside-my-function}
 
-Any function inside a component, including event handlers and effects, "sees" the props and state from the render it was created in. For example, consider code like this:
+Fungsi apapun yang ada dalam sebuah komponen, termasuk *event handler* dan efek, "melihat" *prop* dan *state* dari dalam proses *render* mana fungsi tersebut diciptakan. Sebagai contohnya, pertimbangkan kode seperi berikut ini:
 
 ```js
 function Example() {
@@ -390,7 +389,7 @@ function Example() {
 
   function handleAlertClick() {
     setTimeout(() => {
-      alert('You clicked on: ' + count);
+      alert('Anda meng-klik: ' + count);
     }, 3000);
   }
 
@@ -408,21 +407,21 @@ function Example() {
 }
 ```
 
-If you first click "Show alert" and then increment the counter, the alert will show the `count` variable **at the time you clicked the "Show alert" button**. This prevents bugs caused by the code assuming props and state don't change.
+Jika Anda meng-klik "Show alert" dan kemudian memberi penambahan (*increment*) pada *counter*, penandanya akan menunjukkan variabel *`count`* **pada saat Anda meng-klik tombol "Show alert"**. Ini mencegah *bug* yang disebabkan oleh kode yang mengasumsikan *prop* dan *state* tidak berubah.
 
-If you intentionally want to read the *latest* state from some asynchronous callback, you could keep it in [a ref](/docs/hooks-faq.html#is-there-something-like-instance-variables), mutate it, and read from it.
+Jika ingin membaca *state* *terkini* dari beberapa *asynchronous callback*, baiknya Anda menyimpannya dalam [sebuah *ref*](/docs/hooks-faq.html#is-there-something-like-instance-variables), mengubahnya, dan membaca dari situ.
 
-Finally, another possible reason you're seeing stale props or state is if you use the "dependency array" optimization but didn't correctly specify all the dependencies. For example, if an effect specifies `[]` as the second argument but reads `someProp` inside, it will keep "seeing" the initial value of `someProp`. The solution is to either remove the dependency array, or to fix it. Here's [how you can deal with functions](#is-it-safe-to-omit-functions-from-the-list-of-dependencies), and here's [other common strategies](#what-can-i-do-if-my-effect-dependencies-change-too-often) to run effects less often without incorrectly skipping dependencies.
+Pada akhirnya, alasan lain Anda melihat *stale prop* atau *state* yakni jika Anda menggunakan optimasi *"dependency array"* tapi tidak secara benar dalam menspesifikasi semua *dependency*-nya. Sebagai contohnya, jika sebuah efek menspesifikasikan `[]` sebagai argumen kedua tetapi membaca *`someProp`* di dalamnya, efek tersebut akan tetap "melihat" nilai awal dari *`someProp`*. Solusinya yakni antara menghilangkan *dependency array*, atau memperbaikinya. Ini adalah cara [bagaimana Anda bisa memperlakukan fungsi](#is-it-safe-to-omit-functions-from-the-list-of-dependencies), dan ini adalah [strategi umum lainnya](#what-can-i-do-if-my-effect-dependencies-change-too-often) untuk menjalankan efek lebih jarang tanpa keliru melewatkan *dependency*.
 
->Note
+>Catatan
 >
->We provide an [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) ESLint rule as a part of the [`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.
+>Kami menyediakan sebuah aturan *ESLint* [*`exhaustive-deps`*](https://github.com/facebook/react/issues/14920) sebagai bagian dari *package*[*`eslint-plugin-react-hooks`*](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Itu akan memberi peringatakn ketika *dependency* keliru dispesifikasikan dan akan memberikan saran perbaikan.
 
-### How do I implement `getDerivedStateFromProps`? {#how-do-i-implement-getderivedstatefromprops}
+### Bagaimana cara mengimplementasikan *`getDerivedStateFromProps`*? {#how-do-i-implement-getderivedstatefromprops}
 
-While you probably [don't need it](/blog/2018/06/07/you-probably-dont-need-derived-state.html), in rare cases that you do (such as implementing a `<Transition>` component), you can update the state right during rendering. React will re-run the component with updated state immediately after exiting the first render so it wouldn't be expensive.
+Ketika Anda mungkin [tidak memerlukannya](/blog/2018/06/07/you-probably-dont-need-derived-state.html), dalam kasus-kasus yang jarang yang jarang Anda alami (seperti mengimplementasikan sebuah komponen *`<Transition>`*), Anda bisa memperbarui *state* tepat saat proses *render*. React akan menjalankan ulang komponen tersebut dengan *state* yang sudah diperbarui tepat setelah keluar dari *render* pertama sehingga tidak akan memakan banyak ruang (*expensive*).
 
-Here, we store the previous value of the `row` prop in a state variable so that we can compare:
+Berikut ini, kita menyetorkan nilai sebelumnya dari *prop `row`* dalam sebuah *state variable* sehingga kita bisa bandingkan:
 
 ```js
 function ScrollView({row}) {
@@ -430,7 +429,7 @@ function ScrollView({row}) {
   let [prevRow, setPrevRow] = useState(null);
 
   if (row !== prevRow) {
-    // Row changed since last render. Update isScrollingDown.
+    // Baris berubah karena render terakhir. Memperbarui isScrollingDown.
     setIsScrollingDown(prevRow !== null && row > prevRow);
     setPrevRow(row);
   }
@@ -439,13 +438,13 @@ function ScrollView({row}) {
 }
 ```
 
-This might look strange at first, but an update during rendering is exactly what `getDerivedStateFromProps` has always been like conceptually.
+Hal ini bisa jadi terlihat aneh pada awalnya, tetapi sebuah pembaruan selama proses *render* adalah hal yang persis secara konsep sejak *`getDerivedStateFromProps`* dibuat.
 
-### Is there something like forceUpdate? {#is-there-something-like-forceupdate}
+### Apakah ada suatu hal seperti *forceUpdate*? {#is-there-something-like-forceupdate}
 
-Both `useState` and `useReducer` Hooks [bail out of updates](/docs/hooks-reference.html#bailing-out-of-a-state-update) if the next value is the same as the previous one. Mutating state in place and calling `setState` will not cause a re-render.
+Baik *`useState` Hook* maupun *`useReducer` Hook* [akan keluar dari pembaruan](/docs/hooks-reference.html#bailing-out-of-a-state-update) jika nilai selanjutnya sama dengan nilai sebelumnya. Mengubah *state* saat itu juga dan memanggil *`setState`* tidak akan mengakibatkan *render* ulang.
 
-Normally, you shouldn't mutate local state in React. However, as an escape hatch, you can use an incrementing counter to force a re-render even if the state has not changed:
+Normalnya, Anda tidak akan mengubah *local state* dalam React. Meski demikian, sebagai sebuah solusi darurat, Anda bisa menggunakan sebuah *incrementing counter* untuk memaksa terjadinya *render* ulang walaupun jika *state*-nya tidak berubah:
 
 ```js
   const [ignored, forceUpdate] = useReducer(x => x + 1, 0);
@@ -455,17 +454,17 @@ Normally, you shouldn't mutate local state in React. However, as an escape hatch
   }
 ```
 
-Try to avoid this pattern if possible.
+Coba hindari pola berikut ini sebisa mungkin.
 
-### Can I make a ref to a function component? {#can-i-make-a-ref-to-a-function-component}
+### Bisakah saya membuat *ref* pada sebuah komponen fungsi? {#can-i-make-a-ref-to-a-function-component}
 
-While you shouldn't need this often, you may expose some imperative methods to a parent component with the [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle) Hook.
+Saat Anda seharusnya tidak sering memerlukan hal ini, Anda bisa saja mengekspos beberapa metode perintahpada sebuah *parent component* dengan menggunakan [*`useImperativeHandle`*](/docs/hooks-reference.html#useimperativehandle) *Hook*.
 
-### How can I measure a DOM node? {#how-can-i-measure-a-dom-node}
+### Bagaimana cara mengukur *DOM node*? {#how-can-i-measure-a-dom-node}
 
-In order to measure the position or size of a DOM node, you can use a [callback ref](/docs/refs-and-the-dom.html#callback-refs). React will call that callback whenever the ref gets attached to a different node. Here is a [small demo](https://codesandbox.io/s/l7m0v5x4v9):
+Untuk mengukur posisi atau ukuran dari sebuah *DOM node*, Anda bisa gunakan [*callback ref*](/docs/refs-and-the-dom.html#callback-refs). React akan memanggil *callback* itu kapanpun *ref* terikat pada sebuah *node* yang berbeda. Berikut ini [demo kecil](https://codesandbox.io/s/l7m0v5x4v9):
 
-```js{4-8,12}
+```js {4-8,12}
 function MeasureExample() {
   const [height, setHeight] = useState(0);
 
@@ -478,26 +477,26 @@ function MeasureExample() {
   return (
     <>
       <h1 ref={measuredRef}>Hello, world</h1>
-      <h2>The above header is {Math.round(height)}px tall</h2>
+      <h2>Header di atas memiliki tinggi {Math.round(height)}px</h2>
     </>
   );
 }
 ```
 
-We didn't choose `useRef` in this example because an object ref doesn't notify us about *changes* to the current ref value. Using a callback ref ensures that [even if a child component displays the measured node later](https://codesandbox.io/s/818zzk8m78) (e.g. in response to a click), we still get notified about it in the parent component and can update the measurements.
+Kita tidak memilih *`useRef`* dalam contoh ini karena sebuah objek *ref* tidak memberitahukan kita tentang *perubahan* pada nilai *ref* yang sekarang. Menggunakan sebuah *callback ref* akan memastikan bahwa [walaupun jika sebuah *child component* menampilkan *node* yang diukur setelah ini](https://codesandbox.io/s/818zzk8m78) (sebagai contoh, dalam respon pada sebuah klik), kita masih akan dapat pemberitahuan tentang hal itu dalam *parent component* dan bisa memperbarui pengukurannya.
 
-Note that we pass `[]` as a dependency array to `useCallback`. This ensures that our ref callback doesn't change between the re-renders, and so React won't call it unnecessarily.
+Perhatikan bahwa kita mengoper `[]` sebagai sebuah *dependency array* untuk *`useCallback`*. Ini memastikan bahwa *ref callback* tidak berubah di antara *render* ulang, serta agar React tidak akan memanggilkan tanpa sebab.
 
-If you want, you can [extract this logic](https://codesandbox.io/s/m5o42082xy) into a reusable Hook:
+Jika mau, Anda bisa [mengekstrak logika ini](https://codesandbox.io/s/m5o42082xy) ke dalam sebuah Hook yang bisa digunakan ulang:
 
-```js{2}
+```js {2}
 function MeasureExample() {
   const [rect, ref] = useClientRect();
   return (
     <>
       <h1 ref={ref}>Hello, world</h1>
       {rect !== null &&
-        <h2>The above header is {Math.round(rect.height)}px tall</h2>
+        <h2>Header di atas memiliki tinggi {Math.round(rect.height)}px</h2>
       }
     </>
   );
@@ -515,22 +514,22 @@ function useClientRect() {
 ```
 
 
-### What does `const [thing, setThing] = useState()` mean? {#what-does-const-thing-setthing--usestate-mean}
+### Apa yang dimaksud dengan *`const [thing, setThing] = useState()`*? {#what-does-const-thing-setthing--usestate-mean}
 
-If you're not familiar with this syntax, check out the [explanation](/docs/hooks-state.html#tip-what-do-square-brackets-mean) in the State Hook documentation.
+Jika Anda asing dengan *syntax* ini, cek [penjelasannya](/docs/hooks-state.html#tip-what-do-square-brackets-mean) dalam dokumentasi *State Hook*.
 
 
-## Performance Optimizations {#performance-optimizations}
+## Optimasi Performa {#performance-optimizations}
 
-### Can I skip an effect on updates? {#can-i-skip-an-effect-on-updates}
+### Bisakah saya melewatkan sebuah efek pada pembaruan? {#can-i-skip-an-effect-on-updates}
 
-Yes. See [conditionally firing an effect](/docs/hooks-reference.html#conditionally-firing-an-effect). Note that forgetting to handle updates often [introduces bugs](/docs/hooks-effect.html#explanation-why-effects-run-on-each-update), which is why this isn't the default behavior.
+Ya. Lihat [pengaktifan efek secara kondisional](/docs/hooks-reference.html#conditionally-firing-an-effect). Perhatikan bahwa lupa menangani pembaruan seringkali [menimbulkan *bug*](/docs/hooks-effect.html#explanation-why-effects-run-on-each-update), yang mana  mengapa hal ini bukanlah *behavior* aslinya.
 
-### Is it safe to omit functions from the list of dependencies? {#is-it-safe-to-omit-functions-from-the-list-of-dependencies}
+### Apakah aman untuk menghilangkan fungsi dari daftar *dependency*? {#is-it-safe-to-omit-functions-from-the-list-of-dependencies}
 
-Generally speaking, no.
+Umumnya tidak aman.
 
-```js{3,8}
+```js {3,8}
 function Example({ someProp }) {
   function doSomething() {
     console.log(someProp);
@@ -538,13 +537,13 @@ function Example({ someProp }) {
 
   useEffect(() => {
     doSomething();
-  }, []); // 🔴 This is not safe (it calls `doSomething` which uses `someProp`)
+  }, []); // 🔴 Ini tidaklah aman (memanggil `doSomething` yang menggunakan `someProp`)
 }
 ```
 
-It's difficult to remember which props or state are used by functions outside of the effect. This is why **usually you'll want to declare functions needed by an effect *inside* of it.** Then it's easy to see what values from the component scope that effect depends on:
+Sulit untuk mengingat *prop* atau *state* yang digunakan oleh fungsi yang ada di luar efek. Inilah mengapa **biasanya Anda akan mendeklarasikan fungsi yang dibutuhkan dengan efek *di dalam*-nya.** Lalu kita bisa dengan mudah melihat nilai-nilai apa saja dari cakupan komponen yang jadi patokan efek tersebut:
 
-```js{4,8}
+```js {4,8}
 function Example({ someProp }) {
   useEffect(() => {
     function doSomething() {
@@ -552,59 +551,59 @@ function Example({ someProp }) {
     }
 
     doSomething();
-  }, [someProp]); // ✅ OK (our effect only uses `someProp`)
+  }, [someProp]); // ✅ OK (efek dari kita hanya menggunakan `someProp`)
 }
 ```
 
-If after that we still don't use any values from the component scope, it's safe to specify `[]`:
+Jika setelah itu kita masih tidak menggunakan nilai apapun dari cakupan komponen tersebut, sebaiknya spesifikasikan `[]` agar aman:
 
-```js{7}
+```js {7}
 useEffect(() => {
   function doSomething() {
     console.log('hello');
   }
 
   doSomething();
-}, []); // ✅ OK in this example because we don't use *any* values from component scope
+}, []); // ✅ OK dalam contoh ini karena kita tidak menggunakan nilai apapun dari cakupan komponen tersebut
 ```
 
-Depending on your use case, there are a few more options described below.
+Tergantung pada kasus penggunaan Anda, terdapat beberapa pilihan lainnya sebagaimana yang dideskripsikan di bawah ini.
 
->Note
+>Catatan
 >
->We provide the [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) ESLint rule as a part of the [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package. It helps you find components that don't handle updates consistently.
+>Kami menyediakan aturan *ESLint* [*`exhaustive-deps`*](https://github.com/facebook/react/issues/14920) sebagai bagian dari *package* [*`eslint-plugin-react-hooks`*](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Itu akan mambantu Anda menemukan komponen yang tidak konsisten menangani pembaruan.
 
-Let's see why this matters.
+Mari kita lihat mengapa hal ini penting.
 
-If you specify a [list of dependencies](/docs/hooks-reference.html#conditionally-firing-an-effect) as the last argument to `useEffect`, `useMemo`, `useCallback`, or `useImperativeHandle`, it must include all values used inside that participate in the React data flow. That includes props, state, and anything derived from them.
+Jika Anda menspesifikasikan sebuah [daftar *dependency*](/docs/hooks-reference.html#conditionally-firing-an-effect) sebagai sebuah argumen terakhir untuk *`useEffect`, `useMemo`, `useCallback`*, atau *`useImperativeHandle`*, haruslah termasuk semua nilai yang digunakan di dalamnya yang ikut andil dalam *data flow* React. Itu termasuk *prop, state,* dan apapun yang berasal dari keduanya.
 
-It is **only** safe to omit a function from the dependency list if nothing in it (or the functions called by it) references props, state, or values derived from them. This example has a bug:
+Hal tersebut **hanya akan** aman untuk menghilangkan sebuah fungsi dari daftar *dependency* jika tidak terjadi apa-apa di dalamnya (atau fungsi lain yang terpanggil) yang merujuk pada *prop, state,* atau nilai yang berasl dari keduanya. Contoh berikut memiliki *bug*:
 
-```js{5,12}
+```js {5,12}
 function ProductPage({ productId }) {
   const [product, setProduct] = useState(null);
 
   async function fetchProduct() {
-    const response = await fetch('http://myapi/product' + productId); // Uses productId prop
+    const response = await fetch('http://myapi/product' + productId); // Menggunakan productId prop
     const json = await response.json();
     setProduct(json);
   }
 
   useEffect(() => {
     fetchProduct();
-  }, []); // 🔴 Invalid because `fetchProduct` uses `productId`
+  }, []); // 🔴 Tidak valid karena `fetchProduct` menggunakan `productId`
   // ...
 }
 ```
 
-**The recommended fix is to move that function _inside_ of your effect**. That makes it easy to see which props or state your effect uses, and to ensure they're all declared:
+**Rekomendasi perbaikannya adalah denganc ara memindahkan fungsi itu _di dalam_ efek yang Anda buat**. Perbaikan tersebut akan memudahkan untuk melihat *prop* atau *state* mana yang efek Anda gunakan, serta memastikan semuanya terdeklarasikan:
 
-```js{5-10,13}
+```js {5-10,13}
 function ProductPage({ productId }) {
   const [product, setProduct] = useState(null);
 
   useEffect(() => {
-    // By moving this function inside the effect, we can clearly see the values it uses.
+    // Dengan memindahkan fungsi ini ke dalam efek, kita bisa dengan jelas melihat nilai-nilai yang digunakan.
     async function fetchProduct() {
       const response = await fetch('http://myapi/product' + productId);
       const json = await response.json();
@@ -612,14 +611,14 @@ function ProductPage({ productId }) {
     }
 
     fetchProduct();
-  }, [productId]); // ✅ Valid because our effect only uses productId
+  }, [productId]); // ✅ Valid karena efeknya hanya menggunakan productId
   // ...
 }
 ```
 
-This also allows you to handle out-of-order responses with a local variable inside the effect:
+Ini juga membebaskan Anda untuk menangani respon-respon yang tidak pada tempatnya (*out-of-order*) dengan sebuah *local variable* dalam efek tersebut:
 
-```js{2,6,10}
+```js {2,6,10}
   useEffect(() => {
     let ignore = false;
     async function fetchProduct() {
@@ -633,24 +632,24 @@ This also allows you to handle out-of-order responses with a local variable insi
   }, [productId]);
 ```
 
-We moved the function inside the effect so it doesn't need to be in its dependency list.
+Kita pindahkan fungsi dalam efek tersebut agar fungsi tersebut tidak perlu berada dalam daftar *dependency*-nya sendiri.
 
->Tip
+>Tips
 >
->Check out [this small demo](https://codesandbox.io/s/jvvkoo8pq3) and [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) to learn more about data fetching with Hooks.
+>Cek [demo kecil ini](https://codesandbox.io/s/jvvkoo8pq3) dan [artikel ini](https://www.robinwieruch.de/react-hooks-fetch-data/) untuk mempelajari lebih lanjut tentang data fetching menggunakan Hooks.
 
-**If for some reason you _can't_ move a function inside an effect, there are a few more options:**
+**Jika untuk beberapa alasan Anda _tidak bisa_ memindahkan sebuah fungsi ke dalam sebuah efek, terdapat beberapa pilihan lainnya:**
 
-* **You can try moving that function outside of your component**. In that case, the function is guaranteed to not reference any props or state, and also doesn't need to be in the list of dependencies.
-* If the function you're calling is a pure computation and is safe to call while rendering, you may **call it outside of the effect instead,** and make the effect depend on the returned value.
-* As a last resort, you can **add a function to effect dependencies but _wrap its definition_** into the [`useCallback`](/docs/hooks-reference.html#usecallback) Hook. This ensures it doesn't change on every render unless *its own* dependencies also change:
+* **Anda bisa mencoba menggeser fungsi tersebut keluar komponen**. Dalam kasus ini, fungsi dijamin tidak merujuk pada *prop* atau *state* apapun, dan juga tidak perlu berada dalam daftar *dependency*.
+* Jika fungsi yang Anda panggil adalah murni sebuah komputasi dan aman untuk dipanggil saat proses *render*, Anda boleh **memanggilnya di luar efek tersebut sebagai gantinya,** dan membuat efek tersebut bergantung pada nilai balikan (*return*).
+* Sebagai pilihan terakhir, Anda bisa**menambahkan sebuah fungsi ke _dependency_ efek tersebut namun _mengemas definisinya_** ke dalam [*`useCallback`*](/docs/hooks-reference.html#usecallback) *Hook*. Ini memastikan fungsi tersebut tidak berubah pada tiap *render* kecuali *dependency-nya sendiri* juga berubah:
 
-```js{2-5}
+```js {2-5}
 function ProductPage({ productId }) {
-  // ✅ Wrap with useCallback to avoid change on every render
+  // ✅ Dikemas dengan useCallback untuk menghindari berubah tiap kali render
   const fetchProduct = useCallback(() => {
-    // ... Does something with productId ...
-  }, [productId]); // ✅ All useCallback dependencies are specified
+    // ... Melakukan sesuati dengan productId ...
+  }, [productId]); // ✅ Semua useCallback dependency terspesifikasikan
 
   return <ProductDetails fetchProduct={fetchProduct} />;
 }
@@ -658,62 +657,62 @@ function ProductPage({ productId }) {
 function ProductDetails({ fetchProduct })
   useEffect(() => {
     fetchProduct();
-  }, [fetchProduct]); // ✅ All useEffect dependencies are specified
+  }, [fetchProduct]); // ✅ Semua useEffect dependency terspesifikasikan
   // ...
 }
 ```
 
-Note that in the above example we **need** to keep the function in the dependencies list. This ensures that a change in the `productId` prop of `ProductPage` automatically triggers a refetch in the `ProductDetails` component.
+Perhatikan bahwa pada contoh di atas kita **perlu** untuk menjaga fungsi agar tetap dalam daftar dependency. Ini memastikan bahwa setiap perubahan dalam *prop `productId`*  dari *`ProductPage`* secara otomatis memicu pengumpulan ulang (*refetch*) dalam komponen *`ProductDetails`*.
 
-### What can I do if my effect dependencies change too often? {#what-can-i-do-if-my-effect-dependencies-change-too-often}
+### Apa yang bisa saya lakukan jika *dependency* efek berganti terlalu sering berubah? {#what-can-i-do-if-my-effect-dependencies-change-too-often}
 
-Sometimes, your effect may be using state that changes too often. You might be tempted to omit that state from a list of dependencies, but that usually leads to bugs:
+Terkadang, efek Anda bisa jadi menggunakan *state* yang terlalu serung berubah. Anda mungkin berkeinginan untuk menghilangkan *state* itu dari daftar *dependency*, namun biasanya berujung pada *bug*:
 
-```js{6,9}
+```js {6,9}
 function Counter() {
   const [count, setCount] = useState(0);
 
   useEffect(() => {
     const id = setInterval(() => {
-      setCount(count + 1); // This effect depends on the `count` state
+      setCount(count + 1); // Efek ini bergantung pada `count` state
     }, 1000);
     return () => clearInterval(id);
-  }, []); // 🔴 Bug: `count` is not specified as a dependency
+  }, []); // 🔴 Bug: `count` tidak dispesifikasikan sebagai sebuah dependency
 
   return <h1>{count}</h1>;
 }
 ```
 
-The empty set of dependencies, `[]`, means that the effect will only run once when the component mounts, and not on every re-render. The problem is that inside the `setInterval` callback, the value of `count` does not change, because we've created a closure with the value of `count` set to `0` as it was when the effect callback ran. Every second, this callback then calls `setCount(0 + 1)`, so the count never goes above 1.
+Kumpulan *dependency* yang kosong, `[]`, berarti bahwa efek tersebut hanya akan berjalan satu kali ketika komponen dimuat, dan tidak pada setiap kali *render* ulang. Masalahnya adalah di dalam *`setInterval` callback*, nilai *`count`* tidaklah berubah, karena kita menciptakan sebuah pengakhiran dengan nilai *`count`* ditetapkan jadi `0` selayaknya ketika efek *callback* berjalan. Tiap detik, *callback* ini kemudian memanggil *`setCount(0 + 1)`*, jadi hitungan tersebut tidak pernah melebihi 1.
 
-Specifying `[count]` as a list of dependencies would fix the bug, but would cause the interval to be reset on every change. Effectively, each `setInterval` would get one chance to execute before being cleared (similar to a `setTimeout`.) That may not be desirable. To fix this, we can use the [functional update form of `setState`](/docs/hooks-reference.html#functional-updates). It lets us specify *how* the state needs to change without referencing the *current* state:
+Menspesifikasikan *`[count]`* sebagai sebauh daftar *dependency* dapat memperbaiki *bug*, tetapi juga bisa menyebabkan interval tersetel ulang (*reset*) pada setiap perubahan. Secara efektif, tiap *`setInterval`* akan mendapat satu kali kesempatan untuk mengeksekusi sebelum dikosongkan (mirip dengan *`setTimeout`*). Hal itu mungkin saja tidak diinginkan. Untuk memperbaikinya, kita bisa gunakan [bentuk pembaruan fungsional pada *`setState`*](/docs/hooks-reference.html#functional-updates). Hal tersebut membiarkan kita mespesifikasikan *bagaimana* *state* perlu berubah tanpa merujuk pada *state* yang *sekarang*:
 
-```js{6,9}
+```js {6,9}
 function Counter() {
   const [count, setCount] = useState(0);
 
   useEffect(() => {
     const id = setInterval(() => {
-      setCount(c => c + 1); // ✅ This doesn't depend on `count` variable outside
+      setCount(c => c + 1); // ✅ Ini tidak bergantung pada variabel `count` di luar,
     }, 1000);
     return () => clearInterval(id);
-  }, []); // ✅ Our effect doesn't use any variables in the component scope
+  }, []); // ✅ Efek kita tidak menggunakan *variabel* apapun dalam lingkup componentW in the component scope
 
   return <h1>{count}</h1>;
 }
 ```
 
-(The identity of the `setCount` function is guaranteed to be stable so it's safe to omit.)
+(Identitas fungsi *`setCount`* dijamin akan lebih stabil serta aman untuk dihapus.)
 
-Now, the `setInterval` callback executes once a second, but each time the inner call to `setCount` can use an up-to-date value for `count` (called `c` in the callback here.)
+Sekarang, *`setInterval` callback* mengeksekusi satu kali tiap detik, namun tiap yang ada di dalamnya memanggil *`setCount`* bisa menggunakan nilai yang terbaru untuk *`count`* (disebut `c` dalam *callback* disini.)
 
-In more complex cases (such as if one state depends on another state), try moving the state update logic outside the effect with the [`useReducer` Hook](/docs/hooks-reference.html#usereducer). [This article](https://adamrackis.dev/state-and-use-reducer/) offers an example of how you can do this. **The identity of the `dispatch` function from `useReducer` is always stable** — even if the reducer function is declared inside the component and reads its props.
+Dalam kasus-kasus yang lebih kompleks lagi (seperti halnya jika satu *state* bergantung pada *state*), cobalah untuk memindahkan logika pembaruan *state* keluar efek tersebut menggunakan [*`useReducer` Hook*](/docs/hooks-reference.html#usereducer). [Artikel ini](https://adamrackis.dev/state-and-use-reducer/) menawarkan sebuah contoh bagaimna Anda daoat melakukan hal berikut ini. **Indentitas fungsi _`dispatch`_ dari _`useReducer`_ itu selalu stabil** — meskipun jika fungsi pengurangan (*reducer*) dideklarasikan dalam komponen serta membaca *prop*-nya.
 
-As a last resort, if you want something like `this` in a class, you can [use a ref](/docs/hooks-faq.html#is-there-something-like-instance-variables) to hold a mutable variable. Then you can write and read to it. For example:
+Sebagai pilihan terakhir, jika Anda ingin sesuatu seperti *`this`* dalam sebuah, Anda bisa bisa [gunakan *ref*](/docs/hooks-faq.html#is-there-something-like-instance-variables) untuk menahan sebuah variabel yang berubah-ubah. Kemudian Anda bisa menulis dan membacanya. Contohny:
 
-```js{2-6,10-11,16}
+```js {2-6,10-11,16}
 function Example(props) {
-  // Keep latest props in a ref.
+  // Jaga prop terkini dalam sebuah ref.
   let latestProps = useRef(props);
   useEffect(() => {
     latestProps.current = props;
@@ -721,47 +720,47 @@ function Example(props) {
 
   useEffect(() => {
     function tick() {
-      // Read latest props at any time
+      // Membaca prop terkini kapanpun
       console.log(latestProps.current);
     }
 
     const id = setInterval(tick, 1000);
     return () => clearInterval(id);
-  }, []); // This effect never re-runs
+  }, []); // Efek ini tidak pernah berjalan ulang
 }
 ```
 
-Only do this if you couldn't find a better alternative, as relying on mutation makes components less predictable. If there's a specific pattern that doesn't translate well, [file an issue](https://github.com/facebook/react/issues/new) with a runnable example code and we can try to help.
+Lakukan ini jika hanya saat Anda tidak bisa menemukan alternatif yang lebih baik, sebagaimana mengandalkan pada perubahan (*mutation*) membuat komponen jadi kurang dapat diprediksi. Jika ada sebuah pola spesifik yang tidak menerjemahkan dengan baik, [layangkan *issue*](https://github.com/facebook/react/issues/new) dengan sebuah contoh kode yang dapat dijalankan dan kami akan coba bantu.
 
-### How do I implement `shouldComponentUpdate`? {#how-do-i-implement-shouldcomponentupdate}
+### Bagaimana cara mengimplementasikan *`shouldComponentUpdate`*? {#how-do-i-implement-shouldcomponentupdate}
 
-You can wrap a function component with `React.memo` to shallowly compare its props:
+Anda dapat mengemas sebuah komponen fungsi dengan *`React.memo`* untuk membandingkan secara tak mendalam *prop*-nya:
 
 ```js
 const Button = React.memo((props) => {
-  // your component
+  // komponen Anda
 });
 ```
 
-It's not a Hook because it doesn't compose like Hooks do. `React.memo` is equivalent to `PureComponent`, but it only compares props. (You can also add a second argument to specify a custom comparison function that takes the old and new props. If it returns true, the update is skipped.)
+Bukanlah sebuah *Hook* karena hal tersebut tidak melakukan penyusunan seperti yang *Hooks* lakukan. *`React.memo`* adalah persamaan untuk *`PureComponent`*, tapi hanya untuk membandingkan *prop*. (Anda juga bisa menambahkan argumen kedua untuk menspesifikasikan sebuah fungsi perbandingan yang menerima *prop* lama dan *prop* baru. Jika *return* dari fungsi tersebut adalah *true*, maka pembaruan akan dilewat.)
 
-`React.memo` doesn't compare state because there is no single state object to compare. But you can make children pure too, or even [optimize individual children with `useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations).
+*`React.memo`* tidak membandingkan *state* karena tidak ada satu pun objek *state* untuk dibandingkan. Tapi Anda dapat membuat *children* (turunan) murni pula, atau bahkan [mengoptimasi masing-masing *children* dengan menggunakan *`useMemo`*](/docs/hooks-faq.html#how-to-memoize-calculations).
 
-### How to memoize calculations? {#how-to-memoize-calculations}
+### Bagaimana cara *memoize* perhitungan? {#how-to-memoize-calculations}
 
-The [`useMemo`](/docs/hooks-reference.html#usememo) Hook lets you cache calculations between multiple renders by "remembering" the previous computation:
+*Hook* [*`useMemo`*](/docs/hooks-reference.html#usememo) mengizinkan Anda untuk menyimpan (*cache*) perhitungan-perhitungan di antara berbagai *render* dengan cara *"mengingat"* komputasi sebelumnya:
 
 ```js
 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
 ```
 
-This code calls `computeExpensiveValue(a, b)`. But if the dependencies `[a, b]` haven't changed since the last value, `useMemo` skips calling it a second time and simply reuses the last value it returned.
+Kode ini memanggil *`computeExpensiveValue(a, b)`*. Tapi jika *dependency* `[a, b]` tidak berubah semenjak nilai sebelumnya, *`useMemo`* tidak akan memanggil untuk kedua kalinya dan menggunakan kembali nilai terakhir yang di-*return*.
 
-Remember that the function passed to `useMemo` runs during rendering. Don't do anything there that you wouldn't normally do while rendering. For example, side effects belong in `useEffect`, not `useMemo`.
+Ingat bahwa fungsi tersebut dioper ke *`useMemo`* berjalan selama proses *render*. Jangan lakukan hal apapun yang tidak se-normalnya Anda lakukan ketika proses *render*. Sebagai contoh, efek samping *(side effect)* sudah seharusnya berada dalam *`useEffect`*, bukan *`useMemo`*.
 
-**You may rely on `useMemo` as a performance optimization, not as a semantic guarantee.** In the future, React may choose to "forget" some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without `useMemo` — and then add it to optimize performance. (For rare cases when a value must *never* be recomputed, you can [lazily initialize](#how-to-create-expensive-objects-lazily) a ref.)
+**Anda bisa jadi mengandalkan _`useMemo`_ sebagai salah satu optimasi performa, bukan sebagai jeminan _semantic_.** Di masa yang akan datang, React bisa saja memilih untuk *"forget"* beberapa nilai-nilai hasil *memoize* sebelumnya dan menghitung ulang pada *render* selanjutnya, contohnya untuk mengosongkan memori dari komponen-komponen *offscreen*. Tulis kode Anda agar kode tersebut dapat terus berjalan tanpa *`useMemo`* — dan menambahkannya ke performa yang teroptimasi. (Untuk kasus yang langka ketika sebuah nilai harus *tidak pernah* dikomputasi ulang, Anda bisa [menginisiasi secara *lazy* *(initialize lazily)*](#how-to-create-expensive-objects-lazily) sebuah *ref*.)
 
-Conveniently, `useMemo` also lets you skip an expensive re-render of a child:
+Dengan mudah, *`useMemo`* juga memperbolehkan Anda untuk melewatkan sebuah *render* ulang yang *expensive* pada sebuah turunan (*child*):
 
 ```js
 function Parent({ a, b }) {
@@ -778,51 +777,51 @@ function Parent({ a, b }) {
 }
 ```
 
-Note that this approach won't work in a loop because Hook calls [can't](/docs/hooks-rules.html) be placed inside loops. But you can extract a separate component for the list item, and call `useMemo` there.
+Perhatikan bahwa pendekatan ini tidak akan berhasil dalam sebuah pengulangan (*loop*) karena penggilan *Hook* [tidak bisa](/docs/hooks-rules.html) digantikan di dalam *loop*. Tapi Anda bisa mengekstrak komponen yang terpisah untuk daftar *item*, dan memanggil *`useMemo`* di sana.
 
-### How to create expensive objects lazily? {#how-to-create-expensive-objects-lazily}
+### Bagaimana cara membuat objek *expensive* secara *lazy*? {#how-to-create-expensive-objects-lazily}
 
-`useMemo` lets you [memoize an expensive calculation](#how-to-memoize-calculations) if the dependencies are the same. However, it only serves as a hint, and doesn't *guarantee* the computation won't re-run. But sometimes you need to be sure an object is only created once.
+*`useMemo`* mengizinkan Anda untuk [me-*memoize* sebuah perhitungan yang *expensive*](#how-to-memoize-calculations) jika *dependency*-nya sama. Bagiamanapun, itu hanya berfungsi sebagai sebuah penanda, dan tidak *menjamin* komputasi tersebut tidak akan diulang. Tapi terkadang Anda harus memastikan sebuah objek hanya diciptakan sekali.
 
-**The first common use case is when creating the initial state is expensive:**
+**Kasus penggunaan pertama yang umum yakni ketika menciptakan sebuah *initial state* itu *expensive*:**
 
 ```js
 function Table(props) {
-  // ⚠️ createRows() is called on every render
+  // ⚠️ createRows() dipanggil setiap render
   const [rows, setRows] = useState(createRows(props.count));
   // ...
 }
 ```
 
-To avoid re-creating the ignored initial state, we can pass a **function** to `useState`:
+Untuk menghindari pembuatan ulang *initial state* yang dibiarkan, kita bisa mengoper sebuah **function** ke *`useState`*:
 
 ```js
 function Table(props) {
-  // ✅ createRows() is only called once
+  // ✅ createRows() hanya dipanggil satu kali
   const [rows, setRows] = useState(() => createRows(props.count));
   // ...
 }
 ```
 
-React will only call this function during the first render. See the [`useState` API reference](/docs/hooks-reference.html#usestate).
+React hanya akan memanggil fungsi ini selama *render* pertama. Lihat [referensi *`useState` API*](/docs/hooks-reference.html#usestate).
 
-**You might also occasionally want to avoid re-creating the `useRef()` initial value.** For example, maybe you want to ensure some imperative class instance only gets created once:
+**Anda adakalanya juga ingin menghindari pembuatan ulang nilai awal *`useRef()`*.** Contohnya, mungkin Anda ingin memastikan beberapa contoh kelas penting hanya bisa dibuat satu kali:
 
 ```js
 function Image(props) {
-  // ⚠️ IntersectionObserver is created on every render
+  // ⚠️ IntersectionObserver dibuat di tiap render
   const ref = useRef(new IntersectionObserver(onIntersect));
   // ...
 }
 ```
 
-`useRef` **does not** accept a special function overload like `useState`. Instead, you can write your own function that creates and sets it lazily:
+*`useRef`* **tidak** menerima fungsi khusus yang berlebih seperti *`useState`*. Sebagai gantinya, Anda bisa menuliskan fungsi sendiri yang membuat dan mengaturnya secara *lazy*:
 
 ```js
 function Image(props) {
   const ref = useRef(null);
 
-  // ✅ IntersectionObserver is created lazily once
+  // ✅ IntersectionObserver dibuat satu kali secara lazy
   function getObserver() {
     if (ref.current === null) {
       ref.current = new IntersectionObserver(onIntersect);
@@ -830,50 +829,50 @@ function Image(props) {
     return ref.current;
   }
 
-  // When you need it, call getObserver()
+  // Ketika Anda butuh, panggil getObserver()
   // ...
 }
 ```
 
-This avoids creating an expensive object until it's truly needed for the first time. If you use Flow or TypeScript, you can also give `getObserver()` a non-nullable type for convenience.
+Ini menghindari pembuatan objek yang *expensive* hingga objek tersebut benar-benar dibutuhkan untuk pertama kalinya. Jika Anda menggunakan *Flow* atau *TypeScript*, Anda juga bisa memberikan *`getObserver()`* sebuah nilai yang tidak bisa dikosongkan (*non-nullable*) demi kenyamanan.
 
 
-### Are Hooks slow because of creating functions in render? {#are-hooks-slow-because-of-creating-functions-in-render}
+### Apakah *Hooks* lamban karena membuat fungsi di saat *render*? {#are-hooks-slow-because-of-creating-functions-in-render}
 
-No. In modern browsers, the raw performance of closures compared to classes doesn't differ significantly except in extreme scenarios.
+Tidak. Dalam peramban-peramban modern, performa kasar penutupan (*closure*) dibandingkan dengan kelas tidaklah berbeda secara signifikan kecuali dalam skenario-skenario ekstrim.
 
-In addition, consider that the design of Hooks is more efficient in a couple ways:
+Sebagai tambahan, pertimbangkan bahwa desain *Hooks* itu lebih efision dalam beberapa hal:
 
-* Hooks avoid a lot of the overhead that classes require, like the cost of creating class instances and binding event handlers in the constructor.
+* *Hooks* menghindari banyak awalan yang kelas butuhkan, seperti ongkos untuk membuat contoh kelas dan mengikat *event handler* di dalam konstruktor.
 
-* **Idiomatic code using Hooks doesn't need the deep component tree nesting** that is prevalent in codebases that use higher-order components, render props, and context. With smaller component trees, React has less work to do.
+* **Kode idiomatis yang menggunakan _Hooks_ tidak memerlukan _nesting_ pohon komponen mendalam** yang  lazim dalam basis kode yang mana menggunakan *higher-order component*, *render props*, dan *context*. Dengan pohon komponen yang lebih kecil, React jadi punya lebih sedikit tugas untuk dikerjakan.
 
-Traditionally, performance concerns around inline functions in React have been related to how passing new callbacks on each render breaks `shouldComponentUpdate` optimizations in child components. Hooks approach this problem from three sides.
+Secara tradisional, performa menyangkut seputarfugsi-fungsi *inline* React sudah dihubungkan dengan bagaimana cara untuk mengoper *callback* baru setiap *render* yang memotong optimasi *`shouldComponentUpdate`* dalam komponen turunan. *Hooks* mendekati masalah dari tiga sisi.
 
-* The [`useCallback`](/docs/hooks-reference.html#usecallback) Hook lets you keep the same callback reference between re-renders so that `shouldComponentUpdate` continues to work:
+* *Hook* [*`useCallback`*](/docs/hooks-reference.html#usecallback) mengizinkan Anda untuk tetap menggunakan rujukan *callback* yang samadi antara *render* ulang sehingga *`shouldComponentUpdate`* akan terus bekerja:
 
-    ```js{2}
-    // Will not change unless `a` or `b` changes
+    ```js {2}
+    // Tidak akan berubah kecuali `a` atau `b` berubah
     const memoizedCallback = useCallback(() => {
       doSomething(a, b);
     }, [a, b]);
     ```
 
-* The [`useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations) Hook makes it easier to control when individual children update, reducing the need for pure components.
+* *Hook* [*`useMemo`*](/docs/hooks-faq.html#how-to-memoize-calculations) membuat jadi lebih mudah untuk untuk mengontrol ketika ada satu-satu pembaruan turunan (*children*), mengurangi kebutuhan untuk komponen murni.
 
-* Finally, the [`useReducer`](/docs/hooks-reference.html#usereducer) Hook reduces the need to pass callbacks deeply, as explained below.
+* Pada akhirnya, *Hook* [*`useReducer`*](/docs/hooks-reference.html#usereducer) mengurangi kebutuhan untuk mengoper *callback* secara mendalam, seperti yang dijelaskan di bawah ini.
 
-### How to avoid passing callbacks down? {#how-to-avoid-passing-callbacks-down}
+### Bagaimana cara menghindari pengoperan *callback* jadi *down*? {#how-to-avoid-passing-callbacks-down}
 
-We've found that most people don't enjoy manually passing callbacks through every level of a component tree. Even though it is more explicit, it can feel like a lot of "plumbing".
+Kami menemukan bahwa kebanyakan orang tidak menikmati pengoperan *callback* secara manual di sepanjang tiap tingkatan sebuah pohon komponen. Walaupun hal tersebut lebih gamblang, pengoperan *callback* secara manual bisa terasa seperti pekerjaan yang menguras tenaga.
 
-In large component trees, an alternative we recommend is to pass down a `dispatch` function from [`useReducer`](/docs/hooks-reference.html#usereducer) via context:
+Dalam pohon komponen yang luas, sebuah alternatif yang kami rekomendasikan adalah untuk mengoper sebuah fungsi *`dispatch`* dari [*`useReducer`*](/docs/hooks-reference.html#usereducer) melalui *context*:
 
-```js{4,5}
+```js {4,5}
 const TodosDispatch = React.createContext(null);
 
 function TodosApp() {
-  // Note: `dispatch` won't change between re-renders
+  // Catatan: `dispatch` tidak akan berubah di anatra render ulang
   const [todos, dispatch] = useReducer(todosReducer);
 
   return (
@@ -884,11 +883,11 @@ function TodosApp() {
 }
 ```
 
-Any child in the tree inside `TodosApp` can use the `dispatch` function to pass actions up to `TodosApp`:
+Turunan apapun dalam pohon yang ada di dalam *`TodosApp`* bisa menggunakan fungsi *`dispatch`* untuk mengoper tindakan kepada *`TodosApp`*:
 
-```js{2,3}
+```js {2,3}
 function DeepChild(props) {
-  // If we want to perform an action, we can get dispatch from context.
+  // Jika kita ingin melakukan sebuah tindakan, kita bisa mendapatkan dispatch dari context.
   const dispatch = useContext(TodosDispatch);
 
   function handleClick() {
@@ -901,33 +900,33 @@ function DeepChild(props) {
 }
 ```
 
-This is both more convenient from the maintenance perspective (no need to keep forwarding callbacks), and avoids the callback problem altogether. Passing `dispatch` down like this is the recommended pattern for deep updates.
+Hal ini lebih memudahkan dari sudut pandang pemeliharaan (tidak perlu untuk terus meneruskan *callback*), dan juga menghindari masalah-masalah *callback*. Mengoper *`dispatch`* seperti ini merupakan rekomendasi pola untuk pembaruan-pembaruan mendalam.
 
-Note that you can still choose whether to pass the application *state* down as props (more explicit) or as context (more convenient for very deep updates). If you use context to pass down the state too, use two different context types -- the `dispatch` context never changes, so components that read it don't need to rerender unless they also need the application state.
+Perlu diingat bahawa Anda masih bisa memilih antara mengoper *state* aplikasi sebagai *prop* (lebih gamblang) atau sebagai *context* (lebih memudahkan untuk pembaruan yang sangat mendalam). Jika Anda menggunakan *context* untuk mengoper *state* juga, gunakan dua jenis *context* berbeda -- *`dispatch` context* tidak pernah berubah, jadi komponen yang membacanya tidak perlu melakukan *render* ulang kecuali juga membutuhkan *state* aplikasi.
 
-### How to read an often-changing value from `useCallback`? {#how-to-read-an-often-changing-value-from-usecallback}
+### Bagimana cara membaca sebuah nilai yang sering berubah dari *`useCallback`*? {#how-to-read-an-often-changing-value-from-usecallback}
 
->Note
+>Catatan
 >
->We recommend to [pass `dispatch` down in context](#how-to-avoid-passing-callbacks-down) rather than individual callbacks in props. The approach below is only mentioned here for completeness and as an escape hatch.
+>Kami rekomendasikan untuk [mengoper *`dispatch`* dalam *context*](#how-to-avoid-passing-callbacks-down) daripada satu-persatu *callback* dalam *prop*. Pendekatan di bawah hanya disebutkan di sini sebagai pelengkap dan juga cara darurat.
 >
->Also note that this pattern might cause problems in the [concurrent mode](/blog/2018/03/27/update-on-async-rendering.html). We plan to provide more ergonomic alternatives in the future, but the safest solution right now is to always invalidate the callback if some value it depends on changes.
+>PErhatikan juga bahwa pola ini bisa menyebabkan masalah dalam [mode *concurrent*](/blog/2018/03/27/update-on-async-rendering.html). Kami berencana untuk menyediakan alternatif yang lebih ergonomis di masa yang akan datang, tapi solusi teraman sekarang adalah untuk selalu meng-invalidasi callback jika beberapa nilai bergantung pada perubahan.
 
-In some rare cases you might need to memoize a callback with [`useCallback`](/docs/hooks-reference.html#usecallback) but the memoization doesn't work very well because the inner function has to be re-created too often. If the function you're memoizing is an event handler and isn't used during rendering, you can use [ref as an instance variable](#is-there-something-like-instance-variables), and save the last committed value into it manually:
+Dalam beberapa kasus langka Anda mungkin butuh untuk *memoize* sebuah *callback* dengan menggunakan [*`useCallback*`](/docs/hooks-reference.html#usecallback) tetapi proses *memoize* tidak berjalan dengan baik karena fungsi dalam harus dibuat ulang terlalu sering. Jika fungsi yang Anda *memoize* adalah sebuah *event handler* dan tidak digunakan selama proses *render*, Anda bisa gunakan [*ref* sebagai sebuah contoh variabel](#is-there-something-like-instance-variables), dan menyimpan nilai yang terakhir di-*commit* ke dalam *ref* tersebut secara manual:
 
-```js{6,10}
+```js {6,10}
 function Form() {
   const [text, updateText] = useState('');
   const textRef = useRef();
 
   useEffect(() => {
-    textRef.current = text; // Write it to the ref
+    textRef.current = text; // Tuliskan ke ref
   });
 
   const handleSubmit = useCallback(() => {
-    const currentText = textRef.current; // Read it from the ref
+    const currentText = textRef.current; // Membaca dari ref
     alert(currentText);
-  }, [textRef]); // Don't recreate handleSubmit like [text] would do
+  }, [textRef]); // Tidak membuat ulang handleSubmit seperti [text] 
 
   return (
     <>
@@ -938,12 +937,12 @@ function Form() {
 }
 ```
 
-This is a rather convoluted pattern but it shows that you can do this escape hatch optimization if you need it. It's more bearable if you extract it to a custom Hook:
+Ini bisa saja pola yang berbelit namun menunjukkan pada Anda bahwa Anda bisa melakukan optimasi darurat ini jika membutuhkannya. Bahkan lebih bisa ditangani jika Anda mengekstraknya ke dalam sebuah *custom Hook*:
 
-```js{4,16}
+```js {4,16}
 function Form() {
   const [text, updateText] = useState('');
-  // Will be memoized even if `text` changes:
+  // Akan di memoize bahkan jika `text` berubah:
   const handleSubmit = useEventCallback(() => {
     alert(text);
   }, [text]);
@@ -958,7 +957,7 @@ function Form() {
 
 function useEventCallback(fn, dependencies) {
   const ref = useRef(() => {
-    throw new Error('Cannot call an event handler while rendering.');
+    throw new Error('Tidak bisa memanggil event handler ketika proses render.');
   });
 
   useEffect(() => {
@@ -972,27 +971,27 @@ function useEventCallback(fn, dependencies) {
 }
 ```
 
-In either case, we **don't recommend this pattern** and only show it here for completeness. Instead, it is preferable to [avoid passing callbacks deep down](#how-to-avoid-passing-callbacks-down).
+Dalam kasus-kasus tersebut, kami **tidak merekomendasikan pola ini** dan hanya untuk menunjukannya sebagai pelengkap di sini. Sebagai gantinya, akan lebih baik untuk [meghindari pengoperan *callback* lebih mendalam](#how-to-avoid-passing-callbacks-down).
 
 
-## Under the Hood {#under-the-hood}
+## *Under the Hood* {#under-the-hood}
 
-### How does React associate Hook calls with components? {#how-does-react-associate-hook-calls-with-components}
+### Bagaimana React menghubungkan panggilan *Hook* dengan komponen? {#how-does-react-associate-hook-calls-with-components}
 
-React keeps track of the currently rendering component. Thanks to the [Rules of Hooks](/docs/hooks-rules.html), we know that Hooks are only called from React components (or custom Hooks -- which are also only called from React components).
+React merekam jejak komponen yang baru saja mulai di-*render*. Terima kasih pada [aturan *Hooks*](/docs/hooks-rules.html), kita tahu bahwa *Hooks* hanya dipanggil dari komponen React (atau *custom Hooks* -- yang mana juga dipanggil dari komponen React).
 
-There is an internal list of "memory cells" associated with each component. They're just JavaScript objects where we can put some data. When you call a Hook like `useState()`, it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple `useState()` calls each get independent local state.
+Terdapat daftar internal dari *"memory cells"* yang berhubungkan dengan tiap komponen. Itu semua hanyalah objek-objek JavaScript dimana kita bisa menaruh data. Ketika Anda memanggil sebuah *Hook* seperti *`useState()`*, ia membaca *cell* terkini (atau menginisialisasikannya selama *render* pertama), dan memindahkan *pointer* ke *cell* selanjutnya. Inilah bagaimana masing-masing panggilan *`useState()`* mendapat *local state* sendiri-sendiri.
 
-### What is the prior art for Hooks? {#what-is-the-prior-art-for-hooks}
+### Bagaimana *seni awal*-nya *Hooks*? {#what-is-the-prior-art-for-hooks}
 
-Hooks synthesize ideas from several different sources:
+*Hooks* mempersatukan ide-ide dari beberapa sumber berbeda:
 
-* Our old experiments with functional APIs in the [react-future](https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State) repository.
-* React community's experiments with render prop APIs, including [Ryan Florence](https://github.com/ryanflorence)'s [Reactions Component](https://github.com/reactions/component).
-* [Dominic Gannaway](https://github.com/trueadm)'s [`adopt` keyword](https://gist.github.com/trueadm/17beb64288e30192f3aa29cad0218067) proposal as a sugar syntax for render props.
-* State variables and state cells in [DisplayScript](http://displayscript.org/introduction.html).
-* [Reducer components](https://reasonml.github.io/reason-react/docs/en/state-actions-reducer.html) in ReasonReact.
-* [Subscriptions](http://reactivex.io/rxjs/class/es6/Subscription.js~Subscription.html) in Rx.
-* [Algebraic effects](https://github.com/ocamllabs/ocaml-effects-tutorial#2-effectful-computations-in-a-pure-setting) in Multicore OCaml.
+* Ekspirimen lama kami dengan API fungsional dalam repositori[*react-future*](https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State).
+* Eksperimen-eksperimen komunitas React dengan me-*render prop API*, termasuk [Reactions Component](https://github.com/reactions/component) dari [Ryan Florence](https://github.com/ryanflorence).
+* Pengajuan [kata kunci `adopt`](https://gist.github.com/trueadm/17beb64288e30192f3aa29cad0218067) dari [Dominic Gannaway](https://github.com/trueadm) sebagai *sugar syntax* untuk me-*render* *prop*.
+* *State variable* dan *state cell* dalam [DisplayScript](http://displayscript.org/introduction.html).
+* [Reducer components](https://reasonml.github.io/reason-react/docs/en/state-actions-reducer.html) dalam *ReasonReact*.
+* [Subscriptions](http://reactivex.io/rxjs/class/es6/Subscription.js~Subscription.html) dalam Rx.
+* [Algebraic effects](https://github.com/ocamllabs/ocaml-effects-tutorial#2-effectful-computations-in-a-pure-setting) dalam *Multicore OCaml*.
 
-[Sebastian Markbåge](https://github.com/sebmarkbage) came up with the original design for Hooks, later refined by [Andrew Clark](https://github.com/acdlite), [Sophie Alpert](https://github.com/sophiebits), [Dominic Gannaway](https://github.com/trueadm), and other members of the React team.
+[Sebastian Markbåge](https://github.com/sebmarkbage) muncul dengan desain orisinil untuk *Hooks*, yang nantinya akan disempurnakan oleh [Andrew Clark](https://github.com/acdlite), [Sophie Alpert](https://github.com/sophiebits), [Dominic Gannaway](https://github.com/trueadm), serta anggota-anggota lain tim React.

From ce2f15ab0e05fd311d880ea31b759dc47252523e Mon Sep 17 00:00:00 2001
From: dummyeuy <ghalib12.euy16@gmail.com>
Date: Fri, 25 Oct 2019 03:13:18 +0700
Subject: [PATCH 02/14] Translating content/docs/hooks-faq.md by dummyeuy with
 minor revisions

---
 content/docs/hooks-faq.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index 7d34d2a8e..9f69122e1 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -912,7 +912,7 @@ Perlu diingat bahawa Anda masih bisa memilih antara mengoper *state* aplikasi se
 >
 >PErhatikan juga bahwa pola ini bisa menyebabkan masalah dalam [mode *concurrent*](/blog/2018/03/27/update-on-async-rendering.html). Kami berencana untuk menyediakan alternatif yang lebih ergonomis di masa yang akan datang, tapi solusi teraman sekarang adalah untuk selalu meng-invalidasi callback jika beberapa nilai bergantung pada perubahan.
 
-Dalam beberapa kasus langka Anda mungkin butuh untuk *memoize* sebuah *callback* dengan menggunakan [*`useCallback*`](/docs/hooks-reference.html#usecallback) tetapi proses *memoize* tidak berjalan dengan baik karena fungsi dalam harus dibuat ulang terlalu sering. Jika fungsi yang Anda *memoize* adalah sebuah *event handler* dan tidak digunakan selama proses *render*, Anda bisa gunakan [*ref* sebagai sebuah contoh variabel](#is-there-something-like-instance-variables), dan menyimpan nilai yang terakhir di-*commit* ke dalam *ref* tersebut secara manual:
+Dalam beberapa kasus langka Anda mungkin butuh untuk *memoize* sebuah *callback* dengan menggunakan [*`useCallback*`](/docs/hooks-reference.html#usecallback) tetapi proses *memoize* tidak berjalan dengan baik karena fungsi dalam harus dibuat ulang terlalu sering. Jika fungsi yang Anda *memoize* adalah sebuah *event handler* dan tidak digunakan selama proses *render*, Anda bisa gunakan [*ref* sebagai sebuah *instance variable*](#is-there-something-like-instance-variables), dan menyimpan nilai yang terakhir di-*commit* ke dalam *ref* tersebut secara manual:
 
 ```js {6,10}
 function Form() {

From b293ec3a432e9bd035f16b07b719b873d108c2e0 Mon Sep 17 00:00:00 2001
From: dummyeuy <ghalib12.euy16@gmail.com>
Date: Fri, 25 Oct 2019 03:20:25 +0700
Subject: [PATCH 03/14] Translating content/docs/hooks-faq.md by dummyeuy with
 minor revisions

---
 content/docs/hooks-faq.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index 9f69122e1..e2eaafc78 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -1,6 +1,6 @@
 ---
 id: hooks-faq
-title: *Hooks* FAQ
+title: Hooks FAQ
 permalink: docs/hooks-faq.html
 prev: hooks-reference.html
 ---

From 594a1fc253892c8ed82e72079888628ed709196e Mon Sep 17 00:00:00 2001
From: dummyeuy <ghalib12.euy16@gmail.com>
Date: Fri, 25 Oct 2019 16:12:59 +0700
Subject: [PATCH 04/14] all suggested revisions are applied plus some minor
 revisions (from my own observation) according to
 https://github.com/reactjs/id.reactjs.org/pull/123/files/b293ec3a432e9bd035f16b07b719b873d108c2e0

---
 content/docs/hooks-faq.md | 182 +++++++++++++++++++-------------------
 1 file changed, 91 insertions(+), 91 deletions(-)

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index e2eaafc78..cdc0f6c33 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -7,7 +7,7 @@ prev: hooks-reference.html
 <!-- docs/hooks-faq.md ini diterjemahkan oleh dummyeuy (Muhammad Ghalib) -->
 *Hooks* adalah tambahan baru dalam React 16.8. React memungkikan anda untuk menggunakan *state* dan fitur-fitur React lainnya tanpa perlu menuliskan sebuah kelas. 
 
-Laman ini menjawab beberapa pertanyaan yang sering diajukan (*frequently asked questions*) tentang [Hooks](/docs/hooks-overview.html).
+Laman ini menjawab beberapa pertanyaan yang sering diajukan (*frequently asked questions*) tentang [*Hooks*](/docs/hooks-overview.html).
 
 <!--
   jika Anda perlu me-egenerate ini, snippet dalam konsol devtools ini bisa membantu:
@@ -20,8 +20,8 @@ Laman ini menjawab beberapa pertanyaan yang sering diajukan (*frequently asked q
 
 * **[Strategi Adopsi](#adoption-strategy)**
   * [Versi React mana yang termasuk *Hooks* di dalamnya?](#which-versions-of-react-include-hooks)
-  * [Apakah perlu menulis ulang semua kelas komponen saya?](#do-i-need-to-rewrite-all-my-class-components)
-  * [Apa yang dapat saya lakukan dengn *Hooks* namun tidak bisa saya lakukan dengan kelas-kelas?](#what-can-i-do-with-hooks-that-i-couldnt-with-classes)
+  * [Apakah perlu menulis ulang semua komponen kelas saya?](#do-i-need-to-rewrite-all-my-class-components)
+  * [Apa yang dapat saya lakukan dengn *Hooks* namun tidak bisa saya lakukan dengan kelas?](#what-can-i-do-with-hooks-that-i-couldnt-with-classes)
   * [Seberapa banyak pengetahuan saya tentang React yang tetap relevan?](#how-much-of-my-react-knowledge-stays-relevant)
   * [Haruskan saya menggunakan Hooks, kelas atau gabungan keduanya?](#should-i-use-hooks-classes-or-a-mix-of-both)
   * [Apakah *Hooks* mencakup seluruh kasus yang digunakan untuk kelas?](#do-hooks-cover-all-use-cases-for-classes)
@@ -61,25 +61,25 @@ Laman ini menjawab beberapa pertanyaan yang sering diajukan (*frequently asked q
 
 ### Versi React mana yang termasuk *Hooks* di dalamnya? {#which-versions-of-react-include-hooks}
 
-Mulai dari 16.8.0, dalam React sudah termasuk *stable implementation* dari React *Hooks* untuk:
+Mulai dari 16.8.0, implementasi stabil dari React Hooks sudah tersedia untuk:
 
-* React *DOM*
-* React *Native*
-* React *DOM Server*
-* React *Test Renderer*
-* React *Shallow Renderer*
+* React DOM
+* React Native
+* React DOM Server
+* React Test Renderer
+* React Shallow Renderer
 
 Perhatikan bahwa **untuk menjalankan Hooks, semua *package* React perlu setidaknya pada versi 16.8.0 atau lebih tinggi**. *Hooks* tidak akan bekerja jika Anda lupa melakukan pembaruan, sebagai contohnya, React *DOM*.
 
 [React Native 0.59](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059) dan versi di atasnya sudah mendukung Hooks.
 
-### Apakah perlu menulis ulang semua kelas komponen saya?{#do-i-need-to-rewrite-all-my-class-components}
+### Apakah perlu menulis ulang semua komponen kelas saya?{#do-i-need-to-rewrite-all-my-class-components}
 
-Tidak. [Tidak ada rencana](/docs/hooks-intro.html#gradual-adoption-strategy) untuk menghilangkan kelas dari React -- kami perlu terus mengirimkan produk dan tidak akan melakukan penulisan ulang. Kami rekomendasikan untuk mencoba *Hooks* dalam kode baru.
+Tidak. [Tidak ada rencana](/docs/hooks-intro.html#gradual-adoption-strategy) untuk menghilangkan kelas dari React -- kita semua perlu mengirimkan produk baru dan tidak memiliki waktu untuk penulisan ulang. Kami rekomendasikan untuk mencoba *Hooks* dalam kode baru.
 
-### Apa yang dapat saya lakukan dengn *Hooks* namun tidak bisa saya lakukan dengan kelas-kelas? {#what-can-i-do-with-hooks-that-i-couldnt-with-classes}
+### Apa yang dapat saya lakukan dengn *Hooks* namun tidak bisa saya lakukan dengan kelas? {#what-can-i-do-with-hooks-that-i-couldnt-with-classes}
 
-Hooks menawarkan sebuah cara baru yang kuat dan ekpresif untuk menggunakan kembali fungsionalitas antara komponen. ["Buat Hooks-mu Sendiri"](/docs/hooks-custom.html) menyajikan sekialas apa saja yang mungkin dilakukan. [Artikel ini](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889), oleh seorang anggota inti tim React, menyelam lebih dalam lagi ke kemampuan-kemampuan baru yang dibuka oleh Hooks.
+Hooks menawarkan sebuah cara baru yang kuat dan ekpresif untuk menggunakan kembali fungsionalitas antara komponen. ["Buat Hooks-mu Sendiri"](/docs/hooks-custom.html) menyajikan sekilas apa saja yang mungkin dilakukan. [Artikel ini](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889), oleh seorang anggota inti tim React, menyelam lebih dalam lagi kemampuan-kemampuan baru yang dibuka oleh Hooks.
 
 ### Seberapa banyak pengetahuan saya tentang React yang tetap relevan? {#how-much-of-my-react-knowledge-stays-relevant}
 
@@ -95,27 +95,27 @@ Anda tidak bisa menggunakan *Hooks* *di dalam* sebuah komponen kelas, tetapi And
 
 ### Apakah *Hooks* mencakup seluruh kasus yang digunakan untuk kelas? {#do-hooks-cover-all-use-cases-for-classes}
 
-Tujuan kami untuk *Hooks* yakni mencakup seluruh kasus yang digunakan untuk kelas sesegera mungkin. Tidak ada persamaan (*equivalent*) *Hooks* untuk *lifecyle* yang tidak umum seperti *`getSnapshotBeforeUpdate`* dan *`componentDidCatch`* sementara ini, namun kami berencana untuk menambahkannya segera.
+Tujuan kami untuk *Hooks* yakni mencakup seluruh kasus yang digunakan untuk kelas sesegera mungkin. Tidak ada persamaan (*equivalent*) *Hooks* untuk *lifecyle* yang tidak umum seperti `getSnapshotBeforeUpdate` dan `componentDidCatch` sementara ini, namun kami berencana untuk menambahkannya segera.
 
 Sekarang adalah masa-masa awal untuk Hooks, dan *library* pihak ketiga bisa jadi tidak kompatibel dengan *Hooks* saat ini.
 
 ### Apakah *Hooks* menggantikan *render props* dan *higher-order components*? {#do-hooks-replace-render-props-and-higher-order-components}
 
-Seringkali, *render props* dan *higher-order components* hanya (me)*render* sebuah turunan. Kami pikir *Hooks* adalah cara yang lebih sederhana untuk menyajikan kasus penggunaan ini. Masih ada tempat untuk kedua pola (contohnya, sebuah *virtual scroller component* bisa saja memiliki sebuah *`renderItem` prop*, atau sebuah *visual container component* bisa saja memiliki struktur *DOM*-nya sendiri). Namun dalam banyak kasus, *Hooks* sudahlah cukup dan akan membantu mengurangi *nesting* dalam tatanan Anda.
+Seringkali, *render props* dan *higher-order components* hanya (me)*render* sebuah turunan. Kami pikir *Hooks* adalah cara yang lebih sederhana untuk menyajikan kasus penggunaan ini. Masih ada tempat untuk kedua pola (contohnya, sebuah *virtual scroller component* bisa saja memiliki sebuah *prop* `renderItem`, atau sebuah *visual container component* bisa saja memiliki struktur *DOM*-nya sendiri). Namun dalam banyak kasus, *Hooks* sudahlah cukup dan akan membantu mengurangi *nesting* dalam tatanan Anda.
 
-### Apa yang *Hooks* peruntukan untuk API populer seperti *Redux `connect()`* dan *React router*? {#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router}
+### Apa yang *Hooks* peruntukan untuk API populer seperti *Redux `connect()` dan *React router*? {#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router}
 
 Anda dapat terus menggunakan *API* yang sama seperti yang selama ini dilakukan; *API* tersebut akan tetap bekerja.
 
-*React Redux* sejak versi v7.1.0 [mendukung API Hooks](https://react-redux.js.org/api/hooks) dan memaparkan *Hooks* seperti *`useDispatch`* atau *`useSelector`*.
+React Redux sejak versi v7.1.0 [mendukung API Hooks](https://react-redux.js.org/api/hooks) dan memaparkan *Hooks* seperti `useDispatch` atau `useSelector`.
 
-*Library* seperti *React Router* akan mendukung *Hooks* di masa yang akan datang.
+*Library* seperti React Router akan mendukung *Hooks* di masa yang akan datang.
 
 ### Apakah *Hooks* dapat berjalan dengan *static typing*?{#do-hooks-work-with-static-typing}
 
-Hooks didesain dengan *static typing* pada dasarnya. Karena hal-hal tersebut adalah fungsi, *static typing* lebih mudah ditulis dengan benar daripada pola-pola seperti *higher-order components*. Definisi *Flow* dan *TypeScript React* sudah termasuk *support* untuk React *Hooks* di dalamnya.
+*Hooks* didesain dengan *static typing* pada dasarnya. Karena hal-hal tersebut adalah fungsi, *static typing* lebih mudah ditulis dengan benar daripada pola-pola seperti *higher-order components*. Definisi *Flow* dan *TypeScript React* untuk React sudah mendukung untuk React Hooks di dalamnya.
 
-Penting untuk diingat, *custom Hooks* memberikan Anda kewenangan untuk memaksa *React API* jika Anda ingin menuliskannya dengan lebih ketat dalam beberapa hal. React memberikan Anda *primitives*, tapi Anda bisa menggabungkannya dengan cara-cara lain yang unik selain dari yang kami sediakan untuk Anda.
+Penting untuk diingat, *custom Hooks* memberikan Anda kewenangan untuk memaksa *API* React jika Anda ingin menuliskannya dengan lebih ketat dalam beberapa hal. React memberikan Anda *primitives*, tapi Anda bisa menggabungkannya dengan cara-cara lain yang unik selain dari yang kami sediakan untuk Anda.
 
 ### Bagaimana cara menguji komponen-komponen yang menggunakan Hooks? {#how-to-test-components-that-use-hooks}
 
@@ -143,7 +143,7 @@ function Example() {
   );
 }
 ```
-Kami akan mengujinya dengan React *DOM*. Pastikan bahwa perilakunya dengan yang terjadi di peramban, kami akan mengemas proses *rendering* kode dan memperbaruinya ke dalam [`ReactTestUtils.act()`](/docs/test-utils.html#act) beberapa pemanggilan:
+Kami akan mengujinya dengan React DOM. Pastikan bahwa perilakunya dengan yang terjadi di peramban, kami akan mengemas proses *rendering* kode dan memperbaruinya ke dalam [`ReactTestUtils.act()`](/docs/test-utils.html#act) beberapa pemanggilan:
 
 ```js {3,20-22,29-31}
 import React from 'react';
@@ -196,7 +196,7 @@ Kami menyediakan sebuah [*plugin* ESLint](https://www.npmjs.com/package/eslint-p
 
 Khususnya, aturan tersebut menekankan bahwa:
 
-* Panggilan untuk *Hooks* bisa terdapat di dalam sebuah fungsi *`PascalCase`* (diasumsikan sebagai sebuah komponen) atau fungsi *`useSomething`* lainnya (diasumsikan sebagai sebuah *custom Hook*).
+* Panggilan untuk *Hooks* bisa terdapat di dalam sebuah fungsi `PascalCase` (diasumsikan sebagai sebuah komponen) atau fungsi `useSomething` lainnya (diasumsikan sebagai sebuah *custom Hook*).
 * *Hooks* dipanggil dalam urutan yang sama pada setiap *render*.
 
 Terdapat beberapa heuristik lagi, dan hal tersebut bisa saja berubah sepanjang waktu selama kita memperbaiki terus aturan yang ada demi menyeimbangkan temuan *bug* dengan menghindari *false positive*.
@@ -205,17 +205,17 @@ Terdapat beberapa heuristik lagi, dan hal tersebut bisa saja berubah sepanjang w
 
 ### Bagaimana cara *lifecycle method* dapat sesuai dengan Hooks? {#how-do-lifecycle-methods-correspond-to-hooks}
 
-* *`constructor`*: Komponen fungsi tidak memerlukan sebuah *constructor*. Anda bisa menginisiasikan *state* di dalam panggilan [*`useState`*](/docs/hooks-reference.html#usestate). Jika komputasi *state* awal itu *expensive*, Anda bisa mengoper sebuah fungsi ke *`useState`*.
+* `constructor`: Komponen fungsi tidak memerlukan sebuah *constructor*. Anda bisa menginisiasikan *state* di dalam panggilan [`useState`](/docs/hooks-reference.html#usestate). Jika komputasi *state* awal itu *expensive*, Anda bisa mengoper sebuah fungsi ke `useState`.
 
-* *`getDerivedStateFromProps`*: Jadwalkan sebuah pembaruan [ketika proses *render*](#how-do-i-implement-getderivedstatefromprops).
+* `getDerivedStateFromProps`: Jadwalkan sebuah pembaruan [ketika proses *render*](#how-do-i-implement-getderivedstatefromprops).
 
-* *`shouldComponentUpdate`*: Lihat `React.memo` [di bawah ini](#how-do-i-implement-shouldcomponentupdate).
+* `shouldComponentUpdate`: Lihat `React.memo` [di bawah ini](#how-do-i-implement-shouldcomponentupdate).
 
-* *`render`*: Ini adalah komponen fungsi *body* itu sendiri.
+* `render`: Ini adalah komponen fungsi *body* itu sendiri.
 
-* *`componentDidMount`, `componentDidUpdate`, `componentWillUnmount`*: [*`useEffect` Hook*](/docs/hooks-reference.html#useeffect) dapat mengekspresikan semua kombinasi ini (termasuk kasus-kasus yang [kurang](#can-i-skip-an-effect-on-updates) [awam](#can-i-run-an-effect-only-on-updates)).
+* `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`: [`useEffect` *Hook*](/docs/hooks-reference.html#useeffect) dapat mengekspresikan semua kombinasi ini (termasuk kasus-kasus yang [kurang](#can-i-skip-an-effect-on-updates) [awam](#can-i-run-an-effect-only-on-updates)).
 
-* *`componentDidCatch`* dan *`getDerivedStateFromError`*: Tidak ada persamaan Hook untuk *method* ini sementara ini, tetapi akan segera ditambahkan.
+* `componentDidCatch` dan `getDerivedStateFromError`: Tidak ada persamaan Hook untuk *method* ini sementara ini, tetapi akan segera ditambahkan.
 
 ### Bagaimana cara saya dapat memperoleh data dengan Hooks?{#how-can-i-do-data-fetching-with-hooks}
 
@@ -223,9 +223,9 @@ Berikut ini sebuah [demo kecil](https://codesandbox.io/s/jvvkoo8pq3) untuk permu
 
 ### Apakah ada hal seperti *instance variable*? {#is-there-something-like-instance-variables}
 
-Ya! [`useRef()`](/docs/hooks-reference.html#useref) Hook tidak hanya untuk *DOM ref*. Objek *"ref"* adalah sebuah *container* umum yang mana memiliki properti *`current`* yang berubah-ubah serta dapat memegang nilai apapun, serupa dengan *instance property* pada sebuah kelas.
+Ya! [`useRef()`](/docs/hooks-reference.html#useref) Hook tidak hanya untuk *ref* DOM. Objek *"ref"* adalah sebuah *container* umum yang mana memiliki properti `current` yang berubah-ubah serta dapat memegang nilai apapun, serupa dengan *instance property* pada sebuah kelas.
 
-Anda dapat menuliskannya dari dalam *'useEffect'*:
+Anda dapat menuliskannya dari dalam 'useEffect':
 
 ```js {2,8}
 function Timer() {
@@ -245,7 +245,7 @@ function Timer() {
 }
 ```
 
-Jika kita hanya ingin mengatur sebuah interval, kita tidak perlu *ref* (*'id'* bisa jadi lokal pada efek tersebut), tapi akan berguna jika kita ingin membersihkan interval dari sebuah *event handler*:
+Jika kita hanya ingin mengatur sebuah interval, kita tidak perlu *ref* ('id' bisa jadi lokal pada efek tersebut), tapi akan berguna jika kita ingin membersihkan interval dari sebuah *event handler*:
 
 ```js {3}
   // ...
@@ -259,7 +259,7 @@ Secara konsep, Anda bisa pikirkan *ref* itu serupa dengan *instance variables* d
 
 ### Apa saya harus menggunakan satu atau beberapa *state variable*? {#should-i-use-one-or-many-state-variables}
 
-Jika Anda memulai dari kelas, Anda mungkin ingin tetap memanggil *`useState()`* satu kali dan menempatkan semua *state* ke dalam sebuah objek tunggal. Anda bisa melakukan hal demikian jika suka. Berikut ini sebuah contoh sebuah komponen yang mengikuti pergerakan tetikus. Kita menetapkan posisi dan ukurannya dalam *local state*:
+Jika Anda memulai dari kelas, Anda mungkin ingin tetap memanggil `useState()` satu kali dan menempatkan semua *state* ke dalam sebuah objek tunggal. Anda bisa melakukan hal demikian jika suka. Berikut ini sebuah contoh sebuah komponen yang mengikuti pergerakan tetikus. Kita menetapkan posisi dan ukurannya dalam *local state*:
 
 ```js
 function Box() {
@@ -268,7 +268,7 @@ function Box() {
 }
 ```
 
-Sekarang umpamakan kita ingin menuliskan beberapa logika yang mana merubah *`left`* (sisi kiri) dan *`top`* (sisi atas) ketika pengguna menggerakan tetikusnya. Perhatikan bagaimana kita harus menggabungkan area-area inike dalam objek *state* sebelumnya secara manual:
+Sekarang umpamakan kita ingin menuliskan beberapa logika yang mana merubah `left` (sisi kiri) dan `top` (sisi atas) ketika pengguna menggerakan tetikusnya. Perhatikan bagaimana kita harus menggabungkan area-area inike dalam objek *state* sebelumnya secara manual:
 
 ```js {4,5}
   // ...
@@ -284,11 +284,11 @@ Sekarang umpamakan kita ingin menuliskan beberapa logika yang mana merubah *`lef
   // ...
 ```
 
-Ini karena ketika kita memperbarui sebuah *state variable*, kita merubah (*replace*) nilainya. Ini berbeda dari *`this.setState`* dalam sebuah kelas, yang mana menggabungkan (*merges*) area-area yang diperbarui ke dalam objek.
+Ini karena ketika kita memperbarui sebuah *state variable*, kita merubah (*replace*) nilainya. Ini berbeda dari `this.setState` dalam sebuah kelas, yang mana menggabungkan (*merges*) area-area yang diperbarui ke dalam objek.
 
-Jika Anda melihatkan penggabungan otomatis (*automatic merging*), Anda bisa menulis sebuah *custom `useLegacyState` Hook* yang menggabungkan pembaruan-pembaruan *state* objek.  Namun, sebagai gantinya **kami merekomendasikan untuk membagi *state* menjadi beberapa *state variable* berdasarkan nilai mana yang cenderung berubah bersamaan.**
+Jika Anda melihatkan penggabungan otomatis (*automatic merging*), Anda bisa menulis sebuah *custom Hook* `useLegacyState` yang menggabungkan pembaruan-pembaruan *state* objek.  Namun, sebagai gantinya **kami merekomendasikan untuk membagi *state* menjadi beberapa _state variable_ berdasarkan nilai mana yang cenderung berubah bersamaan.**
 
-Sebagai contohnya, kita bisa membagi *state* komponen menjadi *`position`* dan *`size`* objek, serta selalu merubah *`position`* tanpa harus proses penggabungan:
+Sebagai contohnya, kita bisa membagi *state* komponen menjadi `position` dan `size` objek, serta selalu merubah `position` tanpa harus proses penggabungan:
 
 ```js {2,7}
 function Box() {
@@ -320,9 +320,9 @@ function useWindowPosition() {
 }
 ```
 
-Perhatikan bagaimana kita dapat memindahkan panggilan *`useState`* untuk *state variable `position`* serta efek yang terhubung ke dalam sebuah *custom Hook* tanpa merubah kodenya. Jika semua *state* ada dalams sebuah objek, mengekstrak *state* tersebut akan jadi lebih sulit.
+Perhatikan bagaimana kita dapat memindahkan panggilan `useState` untuk *state variable* `position` serta efek yang terhubung ke dalam sebuah *custom Hook* tanpa merubah kodenya. Jika semua *state* ada dalams sebuah objek, mengekstrak *state* tersebut akan jadi lebih sulit.
 
-Baik memasang semua *state* ke dalam sebuah panggilan *`useState`*, serta memiliki sebuah panggilan *`useState`* pada setiap area, keduanya sama-sama berfungsi. Komponen-komponen cenderung paling mudah dibaca ketika Anda menemukan keseimbangan antara (penerapan) kedua cara tersebut, dan kelompok yang terhubung dengan *state* ke dalam beberapa *state variable* independen. Jika logika *state* tersebut menjadi kompleks, kami rekomendasikan [mengelolanya dengan sebuah *reducer*](/docs/hooks-reference.html#usereducer) atau sebuah *custom Hook*.
+Baik memasang semua *state* ke dalam sebuah panggilan `useState`, serta memiliki sebuah panggilan `useState` pada setiap area, keduanya sama-sama berfungsi. Komponen-komponen cenderung paling mudah dibaca ketika Anda menemukan keseimbangan antara (penerapan) kedua cara tersebut, dan kelompok yang terhubung dengan *state* ke dalam beberapa *state variable* independen. Jika logika *state* tersebut menjadi kompleks, kami rekomendasikan [mengelolanya dengan sebuah *reducer*](/docs/hooks-reference.html#usereducer) atau sebuah *custom Hook*.
 
 ### Bisakah saya menjalakan sebuah efek hanya pada pembaruan? {#can-i-run-an-effect-only-on-updates}
 
@@ -375,7 +375,7 @@ function Counter() {
   // ...
 ```
 
-Di masa yang akan datang, React mungkin akan menyediakan sebuah *`usePrevious` Hook* yang unik mengingat hal tersebut adalah kasus yang cukup sering digunakan.
+Di masa yang akan datang, React mungkin akan menyediakan sebuah `usePrevious` Hook* yang unik mengingat hal tersebut adalah kasus yang cukup sering digunakan.
 
 Lihat juga [pola yang direkomendasikan untuk *derived state*](#how-do-i-implement-getderivedstatefromprops).
 
@@ -407,21 +407,21 @@ function Example() {
 }
 ```
 
-Jika Anda meng-klik "Show alert" dan kemudian memberi penambahan (*increment*) pada *counter*, penandanya akan menunjukkan variabel *`count`* **pada saat Anda meng-klik tombol "Show alert"**. Ini mencegah *bug* yang disebabkan oleh kode yang mengasumsikan *prop* dan *state* tidak berubah.
+Jika Anda meng-klik "Show alert" dan kemudian memberi penambahan (*increment*) pada *counter*, penandanya akan menunjukkan variabel `count` **pada saat Anda meng-klik tombol "Show alert"**. Ini mencegah *bug* yang disebabkan oleh kode yang mengasumsikan *prop* dan *state* tidak berubah.
 
 Jika ingin membaca *state* *terkini* dari beberapa *asynchronous callback*, baiknya Anda menyimpannya dalam [sebuah *ref*](/docs/hooks-faq.html#is-there-something-like-instance-variables), mengubahnya, dan membaca dari situ.
 
-Pada akhirnya, alasan lain Anda melihat *stale prop* atau *state* yakni jika Anda menggunakan optimasi *"dependency array"* tapi tidak secara benar dalam menspesifikasi semua *dependency*-nya. Sebagai contohnya, jika sebuah efek menspesifikasikan `[]` sebagai argumen kedua tetapi membaca *`someProp`* di dalamnya, efek tersebut akan tetap "melihat" nilai awal dari *`someProp`*. Solusinya yakni antara menghilangkan *dependency array*, atau memperbaikinya. Ini adalah cara [bagaimana Anda bisa memperlakukan fungsi](#is-it-safe-to-omit-functions-from-the-list-of-dependencies), dan ini adalah [strategi umum lainnya](#what-can-i-do-if-my-effect-dependencies-change-too-often) untuk menjalankan efek lebih jarang tanpa keliru melewatkan *dependency*.
+Pada akhirnya, alasan lain Anda melihat *stale prop* atau *state* yakni jika Anda menggunakan optimasi "dependency array" tapi tidak secara benar dalam menspesifikasi semua *dependency*-nya. Sebagai contohnya, jika sebuah efek menspesifikasikan `[]` sebagai argumen kedua tetapi membaca `someProp` di dalamnya, efek tersebut akan tetap "melihat" nilai awal dari `someProp`. Solusinya yakni antara menghilangkan *dependency array*, atau memperbaikinya. Ini adalah cara [bagaimana Anda bisa memperlakukan fungsi](#is-it-safe-to-omit-functions-from-the-list-of-dependencies), dan ini adalah [strategi umum lainnya](#what-can-i-do-if-my-effect-dependencies-change-too-often) untuk menjalankan efek lebih jarang tanpa keliru melewatkan *dependency*.
 
 >Catatan
 >
->Kami menyediakan sebuah aturan *ESLint* [*`exhaustive-deps`*](https://github.com/facebook/react/issues/14920) sebagai bagian dari *package*[*`eslint-plugin-react-hooks`*](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Itu akan memberi peringatakn ketika *dependency* keliru dispesifikasikan dan akan memberikan saran perbaikan.
+>Kami menyediakan sebuah aturan *ESLint* [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) sebagai bagian dari *package*[`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Itu akan memberi peringatakn ketika *dependency* keliru dispesifikasikan dan akan memberikan saran perbaikan.
 
-### Bagaimana cara mengimplementasikan *`getDerivedStateFromProps`*? {#how-do-i-implement-getderivedstatefromprops}
+### Bagaimana cara mengimplementasikan `getDerivedStateFromProps`? {#how-do-i-implement-getderivedstatefromprops}
 
-Ketika Anda mungkin [tidak memerlukannya](/blog/2018/06/07/you-probably-dont-need-derived-state.html), dalam kasus-kasus yang jarang yang jarang Anda alami (seperti mengimplementasikan sebuah komponen *`<Transition>`*), Anda bisa memperbarui *state* tepat saat proses *render*. React akan menjalankan ulang komponen tersebut dengan *state* yang sudah diperbarui tepat setelah keluar dari *render* pertama sehingga tidak akan memakan banyak ruang (*expensive*).
+Ketika Anda mungkin [tidak memerlukannya](/blog/2018/06/07/you-probably-dont-need-derived-state.html), dalam kasus-kasus yang jarang yang jarang Anda alami (seperti mengimplementasikan sebuah komponen `<Transition>`), Anda bisa memperbarui *state* tepat saat proses *render*. React akan menjalankan ulang komponen tersebut dengan *state* yang sudah diperbarui tepat setelah keluar dari *render* pertama sehingga tidak akan memakan banyak ruang (*expensive*).
 
-Berikut ini, kita menyetorkan nilai sebelumnya dari *prop `row`* dalam sebuah *state variable* sehingga kita bisa bandingkan:
+Berikut ini, kita menyetorkan nilai sebelumnya dari *prop* `row` dalam sebuah *state variable* sehingga kita bisa bandingkan:
 
 ```js
 function ScrollView({row}) {
@@ -438,11 +438,11 @@ function ScrollView({row}) {
 }
 ```
 
-Hal ini bisa jadi terlihat aneh pada awalnya, tetapi sebuah pembaruan selama proses *render* adalah hal yang persis secara konsep sejak *`getDerivedStateFromProps`* dibuat.
+Hal ini bisa jadi terlihat aneh pada awalnya, tetapi sebuah pembaruan selama proses *render* adalah hal yang persis secara konsep sejak `getDerivedStateFromProps` dibuat.
 
 ### Apakah ada suatu hal seperti *forceUpdate*? {#is-there-something-like-forceupdate}
 
-Baik *`useState` Hook* maupun *`useReducer` Hook* [akan keluar dari pembaruan](/docs/hooks-reference.html#bailing-out-of-a-state-update) jika nilai selanjutnya sama dengan nilai sebelumnya. Mengubah *state* saat itu juga dan memanggil *`setState`* tidak akan mengakibatkan *render* ulang.
+Baik `useState` *Hook* maupun `useReducer` *Hook* [akan keluar dari pembaruan](/docs/hooks-reference.html#bailing-out-of-a-state-update) jika nilai selanjutnya sama dengan nilai sebelumnya. Mengubah *state* saat itu juga dan memanggil `setState` tidak akan mengakibatkan *render* ulang.
 
 Normalnya, Anda tidak akan mengubah *local state* dalam React. Meski demikian, sebagai sebuah solusi darurat, Anda bisa menggunakan sebuah *incrementing counter* untuk memaksa terjadinya *render* ulang walaupun jika *state*-nya tidak berubah:
 
@@ -458,7 +458,7 @@ Coba hindari pola berikut ini sebisa mungkin.
 
 ### Bisakah saya membuat *ref* pada sebuah komponen fungsi? {#can-i-make-a-ref-to-a-function-component}
 
-Saat Anda seharusnya tidak sering memerlukan hal ini, Anda bisa saja mengekspos beberapa metode perintahpada sebuah *parent component* dengan menggunakan [*`useImperativeHandle`*](/docs/hooks-reference.html#useimperativehandle) *Hook*.
+Saat Anda seharusnya tidak sering memerlukan hal ini, Anda bisa saja mengekspos beberapa metode perintahpada sebuah *parent component* dengan menggunakan [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle) *Hook*.
 
 ### Bagaimana cara mengukur *DOM node*? {#how-can-i-measure-a-dom-node}
 
@@ -483,9 +483,9 @@ function MeasureExample() {
 }
 ```
 
-Kita tidak memilih *`useRef`* dalam contoh ini karena sebuah objek *ref* tidak memberitahukan kita tentang *perubahan* pada nilai *ref* yang sekarang. Menggunakan sebuah *callback ref* akan memastikan bahwa [walaupun jika sebuah *child component* menampilkan *node* yang diukur setelah ini](https://codesandbox.io/s/818zzk8m78) (sebagai contoh, dalam respon pada sebuah klik), kita masih akan dapat pemberitahuan tentang hal itu dalam *parent component* dan bisa memperbarui pengukurannya.
+Kita tidak memilih `useRef` dalam contoh ini karena sebuah objek *ref* tidak memberitahukan kita tentang *perubahan* pada nilai *ref* yang sekarang. Menggunakan sebuah *callback ref* akan memastikan bahwa [walaupun jika sebuah *child component* menampilkan *node* yang diukur setelah ini](https://codesandbox.io/s/818zzk8m78) (sebagai contoh, dalam respon pada sebuah klik), kita masih akan dapat pemberitahuan tentang hal itu dalam *parent component* dan bisa memperbarui pengukurannya.
 
-Perhatikan bahwa kita mengoper `[]` sebagai sebuah *dependency array* untuk *`useCallback`*. Ini memastikan bahwa *ref callback* tidak berubah di antara *render* ulang, serta agar React tidak akan memanggilkan tanpa sebab.
+Perhatikan bahwa kita mengoper `[]` sebagai sebuah *dependency array* untuk `useCallback`. Ini memastikan bahwa *ref callback* tidak berubah di antara *render* ulang, serta agar React tidak akan memanggilkan tanpa sebab.
 
 Jika mau, Anda bisa [mengekstrak logika ini](https://codesandbox.io/s/m5o42082xy) ke dalam sebuah Hook yang bisa digunakan ulang:
 
@@ -514,7 +514,7 @@ function useClientRect() {
 ```
 
 
-### Apa yang dimaksud dengan *`const [thing, setThing] = useState()`*? {#what-does-const-thing-setthing--usestate-mean}
+### Apa yang dimaksud dengan `const [thing, setThing] = useState()`? {#what-does-const-thing-setthing--usestate-mean}
 
 Jika Anda asing dengan *syntax* ini, cek [penjelasannya](/docs/hooks-state.html#tip-what-do-square-brackets-mean) dalam dokumentasi *State Hook*.
 
@@ -571,11 +571,11 @@ Tergantung pada kasus penggunaan Anda, terdapat beberapa pilihan lainnya sebagai
 
 >Catatan
 >
->Kami menyediakan aturan *ESLint* [*`exhaustive-deps`*](https://github.com/facebook/react/issues/14920) sebagai bagian dari *package* [*`eslint-plugin-react-hooks`*](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Itu akan mambantu Anda menemukan komponen yang tidak konsisten menangani pembaruan.
+>Kami menyediakan aturan *ESLint* [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) sebagai bagian dari *package* [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Itu akan mambantu Anda menemukan komponen yang tidak konsisten menangani pembaruan.
 
 Mari kita lihat mengapa hal ini penting.
 
-Jika Anda menspesifikasikan sebuah [daftar *dependency*](/docs/hooks-reference.html#conditionally-firing-an-effect) sebagai sebuah argumen terakhir untuk *`useEffect`, `useMemo`, `useCallback`*, atau *`useImperativeHandle`*, haruslah termasuk semua nilai yang digunakan di dalamnya yang ikut andil dalam *data flow* React. Itu termasuk *prop, state,* dan apapun yang berasal dari keduanya.
+Jika Anda menspesifikasikan sebuah [daftar *dependency*](/docs/hooks-reference.html#conditionally-firing-an-effect) sebagai sebuah argumen terakhir untuk `useEffect`, `useMemo`, `useCallback`, atau `useImperativeHandle`, haruslah termasuk semua nilai yang digunakan di dalamnya yang ikut andil dalam *data flow* React. Itu termasuk *prop, state,* dan apapun yang berasal dari keduanya.
 
 Hal tersebut **hanya akan** aman untuk menghilangkan sebuah fungsi dari daftar *dependency* jika tidak terjadi apa-apa di dalamnya (atau fungsi lain yang terpanggil) yang merujuk pada *prop, state,* atau nilai yang berasl dari keduanya. Contoh berikut memiliki *bug*:
 
@@ -642,7 +642,7 @@ Kita pindahkan fungsi dalam efek tersebut agar fungsi tersebut tidak perlu berad
 
 * **Anda bisa mencoba menggeser fungsi tersebut keluar komponen**. Dalam kasus ini, fungsi dijamin tidak merujuk pada *prop* atau *state* apapun, dan juga tidak perlu berada dalam daftar *dependency*.
 * Jika fungsi yang Anda panggil adalah murni sebuah komputasi dan aman untuk dipanggil saat proses *render*, Anda boleh **memanggilnya di luar efek tersebut sebagai gantinya,** dan membuat efek tersebut bergantung pada nilai balikan (*return*).
-* Sebagai pilihan terakhir, Anda bisa**menambahkan sebuah fungsi ke _dependency_ efek tersebut namun _mengemas definisinya_** ke dalam [*`useCallback`*](/docs/hooks-reference.html#usecallback) *Hook*. Ini memastikan fungsi tersebut tidak berubah pada tiap *render* kecuali *dependency-nya sendiri* juga berubah:
+* Sebagai pilihan terakhir, Anda bisa**menambahkan sebuah fungsi ke _dependency_ efek tersebut namun _mengemas definisinya_** ke dalam [`useCallback`](/docs/hooks-reference.html#usecallback) *Hook*. Ini memastikan fungsi tersebut tidak berubah pada tiap *render* kecuali *dependency-nya sendiri* juga berubah:
 
 ```js {2-5}
 function ProductPage({ productId }) {
@@ -662,7 +662,7 @@ function ProductDetails({ fetchProduct })
 }
 ```
 
-Perhatikan bahwa pada contoh di atas kita **perlu** untuk menjaga fungsi agar tetap dalam daftar dependency. Ini memastikan bahwa setiap perubahan dalam *prop `productId`*  dari *`ProductPage`* secara otomatis memicu pengumpulan ulang (*refetch*) dalam komponen *`ProductDetails`*.
+Perhatikan bahwa pada contoh di atas kita **perlu** untuk menjaga fungsi agar tetap dalam daftar dependency. Ini memastikan bahwa setiap perubahan dalam *prop* `productId`  dari `ProductPage` secara otomatis memicu pengumpulan ulang (*refetch*) dalam komponen `ProductDetails`.
 
 ### Apa yang bisa saya lakukan jika *dependency* efek berganti terlalu sering berubah? {#what-can-i-do-if-my-effect-dependencies-change-too-often}
 
@@ -683,9 +683,9 @@ function Counter() {
 }
 ```
 
-Kumpulan *dependency* yang kosong, `[]`, berarti bahwa efek tersebut hanya akan berjalan satu kali ketika komponen dimuat, dan tidak pada setiap kali *render* ulang. Masalahnya adalah di dalam *`setInterval` callback*, nilai *`count`* tidaklah berubah, karena kita menciptakan sebuah pengakhiran dengan nilai *`count`* ditetapkan jadi `0` selayaknya ketika efek *callback* berjalan. Tiap detik, *callback* ini kemudian memanggil *`setCount(0 + 1)`*, jadi hitungan tersebut tidak pernah melebihi 1.
+Kumpulan *dependency* yang kosong, `[]`, berarti bahwa efek tersebut hanya akan berjalan satu kali ketika komponen dimuat, dan tidak pada setiap kali *render* ulang. Masalahnya adalah di dalam `setInterval` callback*, nilai `count` tidaklah berubah, karena kita menciptakan sebuah pengakhiran dengan nilai `count` ditetapkan jadi `0` selayaknya ketika efek *callback* berjalan. Tiap detik, *callback* ini kemudian memanggil `setCount(0 + 1)`, jadi hitungan tersebut tidak pernah melebihi 1.
 
-Menspesifikasikan *`[count]`* sebagai sebauh daftar *dependency* dapat memperbaiki *bug*, tetapi juga bisa menyebabkan interval tersetel ulang (*reset*) pada setiap perubahan. Secara efektif, tiap *`setInterval`* akan mendapat satu kali kesempatan untuk mengeksekusi sebelum dikosongkan (mirip dengan *`setTimeout`*). Hal itu mungkin saja tidak diinginkan. Untuk memperbaikinya, kita bisa gunakan [bentuk pembaruan fungsional pada *`setState`*](/docs/hooks-reference.html#functional-updates). Hal tersebut membiarkan kita mespesifikasikan *bagaimana* *state* perlu berubah tanpa merujuk pada *state* yang *sekarang*:
+Menspesifikasikan `[count]` sebagai sebauh daftar *dependency* dapat memperbaiki *bug*, tetapi juga bisa menyebabkan interval tersetel ulang (*reset*) pada setiap perubahan. Secara efektif, tiap `setInterval` akan mendapat satu kali kesempatan untuk mengeksekusi sebelum dikosongkan (mirip dengan `setTimeout`). Hal itu mungkin saja tidak diinginkan. Untuk memperbaikinya, kita bisa gunakan [bentuk pembaruan fungsional pada `setState`](/docs/hooks-reference.html#functional-updates). Hal tersebut membiarkan kita mespesifikasikan *bagaimana* *state* perlu berubah tanpa merujuk pada *state* yang *sekarang*:
 
 ```js {6,9}
 function Counter() {
@@ -702,13 +702,13 @@ function Counter() {
 }
 ```
 
-(Identitas fungsi *`setCount`* dijamin akan lebih stabil serta aman untuk dihapus.)
+(Identitas fungsi `setCount` dijamin akan lebih stabil serta aman untuk dihapus.)
 
-Sekarang, *`setInterval` callback* mengeksekusi satu kali tiap detik, namun tiap yang ada di dalamnya memanggil *`setCount`* bisa menggunakan nilai yang terbaru untuk *`count`* (disebut `c` dalam *callback* disini.)
+Sekarang, `setInterval` callback* mengeksekusi satu kali tiap detik, namun tiap yang ada di dalamnya memanggil `setCount` bisa menggunakan nilai yang terbaru untuk `count` (disebut `c` dalam *callback* disini.)
 
-Dalam kasus-kasus yang lebih kompleks lagi (seperti halnya jika satu *state* bergantung pada *state*), cobalah untuk memindahkan logika pembaruan *state* keluar efek tersebut menggunakan [*`useReducer` Hook*](/docs/hooks-reference.html#usereducer). [Artikel ini](https://adamrackis.dev/state-and-use-reducer/) menawarkan sebuah contoh bagaimna Anda daoat melakukan hal berikut ini. **Indentitas fungsi _`dispatch`_ dari _`useReducer`_ itu selalu stabil** — meskipun jika fungsi pengurangan (*reducer*) dideklarasikan dalam komponen serta membaca *prop*-nya.
+Dalam kasus-kasus yang lebih kompleks lagi (seperti halnya jika satu *state* bergantung pada *state*), cobalah untuk memindahkan logika pembaruan *state* keluar efek tersebut menggunakan [`useReducer` Hook*](/docs/hooks-reference.html#usereducer). [Artikel ini](https://adamrackis.dev/state-and-use-reducer/) menawarkan sebuah contoh bagaimna Anda daoat melakukan hal berikut ini. **Indentitas fungsi _`dispatch`_ dari _`useReducer`_ itu selalu stabil** — meskipun jika fungsi pengurangan (*reducer*) dideklarasikan dalam komponen serta membaca *prop*-nya.
 
-Sebagai pilihan terakhir, jika Anda ingin sesuatu seperti *`this`* dalam sebuah, Anda bisa bisa [gunakan *ref*](/docs/hooks-faq.html#is-there-something-like-instance-variables) untuk menahan sebuah variabel yang berubah-ubah. Kemudian Anda bisa menulis dan membacanya. Contohny:
+Sebagai pilihan terakhir, jika Anda ingin sesuatu seperti `this` dalam sebuah, Anda bisa bisa [gunakan *ref*](/docs/hooks-faq.html#is-there-something-like-instance-variables) untuk menahan sebuah variabel yang berubah-ubah. Kemudian Anda bisa menulis dan membacanya. Contohny:
 
 ```js {2-6,10-11,16}
 function Example(props) {
@@ -732,9 +732,9 @@ function Example(props) {
 
 Lakukan ini jika hanya saat Anda tidak bisa menemukan alternatif yang lebih baik, sebagaimana mengandalkan pada perubahan (*mutation*) membuat komponen jadi kurang dapat diprediksi. Jika ada sebuah pola spesifik yang tidak menerjemahkan dengan baik, [layangkan *issue*](https://github.com/facebook/react/issues/new) dengan sebuah contoh kode yang dapat dijalankan dan kami akan coba bantu.
 
-### Bagaimana cara mengimplementasikan *`shouldComponentUpdate`*? {#how-do-i-implement-shouldcomponentupdate}
+### Bagaimana cara mengimplementasikan `shouldComponentUpdate`? {#how-do-i-implement-shouldcomponentupdate}
 
-Anda dapat mengemas sebuah komponen fungsi dengan *`React.memo`* untuk membandingkan secara tak mendalam *prop*-nya:
+Anda dapat mengemas sebuah komponen fungsi dengan `React.memo` untuk membandingkan secara tak mendalam *prop*-nya:
 
 ```js
 const Button = React.memo((props) => {
@@ -742,25 +742,25 @@ const Button = React.memo((props) => {
 });
 ```
 
-Bukanlah sebuah *Hook* karena hal tersebut tidak melakukan penyusunan seperti yang *Hooks* lakukan. *`React.memo`* adalah persamaan untuk *`PureComponent`*, tapi hanya untuk membandingkan *prop*. (Anda juga bisa menambahkan argumen kedua untuk menspesifikasikan sebuah fungsi perbandingan yang menerima *prop* lama dan *prop* baru. Jika *return* dari fungsi tersebut adalah *true*, maka pembaruan akan dilewat.)
+Bukanlah sebuah *Hook* karena hal tersebut tidak melakukan penyusunan seperti yang *Hooks* lakukan. `React.memo` adalah persamaan untuk `PureComponent`, tapi hanya untuk membandingkan *prop*. (Anda juga bisa menambahkan argumen kedua untuk menspesifikasikan sebuah fungsi perbandingan yang menerima *prop* lama dan *prop* baru. Jika *return* dari fungsi tersebut adalah *true*, maka pembaruan akan dilewat.)
 
-*`React.memo`* tidak membandingkan *state* karena tidak ada satu pun objek *state* untuk dibandingkan. Tapi Anda dapat membuat *children* (turunan) murni pula, atau bahkan [mengoptimasi masing-masing *children* dengan menggunakan *`useMemo`*](/docs/hooks-faq.html#how-to-memoize-calculations).
+`React.memo` tidak membandingkan *state* karena tidak ada satu pun objek *state* untuk dibandingkan. Tapi Anda dapat membuat *children* (turunan) murni pula, atau bahkan [mengoptimasi masing-masing *children* dengan menggunakan `useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations).
 
 ### Bagaimana cara *memoize* perhitungan? {#how-to-memoize-calculations}
 
-*Hook* [*`useMemo`*](/docs/hooks-reference.html#usememo) mengizinkan Anda untuk menyimpan (*cache*) perhitungan-perhitungan di antara berbagai *render* dengan cara *"mengingat"* komputasi sebelumnya:
+*Hook* [`useMemo`](/docs/hooks-reference.html#usememo) mengizinkan Anda untuk menyimpan (*cache*) perhitungan-perhitungan di antara berbagai *render* dengan cara *"mengingat"* komputasi sebelumnya:
 
 ```js
 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
 ```
 
-Kode ini memanggil *`computeExpensiveValue(a, b)`*. Tapi jika *dependency* `[a, b]` tidak berubah semenjak nilai sebelumnya, *`useMemo`* tidak akan memanggil untuk kedua kalinya dan menggunakan kembali nilai terakhir yang di-*return*.
+Kode ini memanggil `computeExpensiveValue(a, b)`. Tapi jika *dependency* `[a, b]` tidak berubah semenjak nilai sebelumnya, `useMemo` tidak akan memanggil untuk kedua kalinya dan menggunakan kembali nilai terakhir yang di-*return*.
 
-Ingat bahwa fungsi tersebut dioper ke *`useMemo`* berjalan selama proses *render*. Jangan lakukan hal apapun yang tidak se-normalnya Anda lakukan ketika proses *render*. Sebagai contoh, efek samping *(side effect)* sudah seharusnya berada dalam *`useEffect`*, bukan *`useMemo`*.
+Ingat bahwa fungsi tersebut dioper ke `useMemo` berjalan selama proses *render*. Jangan lakukan hal apapun yang tidak se-normalnya Anda lakukan ketika proses *render*. Sebagai contoh, efek samping (*side effect*) sudah seharusnya berada dalam `useEffect`, bukan `useMemo`.
 
-**Anda bisa jadi mengandalkan _`useMemo`_ sebagai salah satu optimasi performa, bukan sebagai jeminan _semantic_.** Di masa yang akan datang, React bisa saja memilih untuk *"forget"* beberapa nilai-nilai hasil *memoize* sebelumnya dan menghitung ulang pada *render* selanjutnya, contohnya untuk mengosongkan memori dari komponen-komponen *offscreen*. Tulis kode Anda agar kode tersebut dapat terus berjalan tanpa *`useMemo`* — dan menambahkannya ke performa yang teroptimasi. (Untuk kasus yang langka ketika sebuah nilai harus *tidak pernah* dikomputasi ulang, Anda bisa [menginisiasi secara *lazy* *(initialize lazily)*](#how-to-create-expensive-objects-lazily) sebuah *ref*.)
+**Anda bisa jadi mengandalkan _`useMemo`_ sebagai salah satu optimasi performa, bukan sebagai jeminan _semantic_.** Di masa yang akan datang, React bisa saja memilih untuk *"forget"* beberapa nilai-nilai hasil *memoize* sebelumnya dan menghitung ulang pada *render* selanjutnya, contohnya untuk mengosongkan memori dari komponen-komponen *offscreen*. Tulis kode Anda agar kode tersebut dapat terus berjalan tanpa `useMemo` — dan menambahkannya ke performa yang teroptimasi. (Untuk kasus yang langka ketika sebuah nilai harus *tidak pernah* dikomputasi ulang, Anda bisa [menginisiasi secara *lazy* *(initialize lazily)*](#how-to-create-expensive-objects-lazily) sebuah *ref*.)
 
-Dengan mudah, *`useMemo`* juga memperbolehkan Anda untuk melewatkan sebuah *render* ulang yang *expensive* pada sebuah turunan (*child*):
+Dengan mudah, `useMemo` juga memperbolehkan Anda untuk melewatkan sebuah *render* ulang yang *expensive* pada sebuah turunan (*child*):
 
 ```js
 function Parent({ a, b }) {
@@ -777,13 +777,13 @@ function Parent({ a, b }) {
 }
 ```
 
-Perhatikan bahwa pendekatan ini tidak akan berhasil dalam sebuah pengulangan (*loop*) karena penggilan *Hook* [tidak bisa](/docs/hooks-rules.html) digantikan di dalam *loop*. Tapi Anda bisa mengekstrak komponen yang terpisah untuk daftar *item*, dan memanggil *`useMemo`* di sana.
+Perhatikan bahwa pendekatan ini tidak akan berhasil dalam sebuah pengulangan (*loop*) karena penggilan *Hook* [tidak bisa](/docs/hooks-rules.html) digantikan di dalam *loop*. Tapi Anda bisa mengekstrak komponen yang terpisah untuk daftar *item*, dan memanggil `useMemo` di sana.
 
 ### Bagaimana cara membuat objek *expensive* secara *lazy*? {#how-to-create-expensive-objects-lazily}
 
-*`useMemo`* mengizinkan Anda untuk [me-*memoize* sebuah perhitungan yang *expensive*](#how-to-memoize-calculations) jika *dependency*-nya sama. Bagiamanapun, itu hanya berfungsi sebagai sebuah penanda, dan tidak *menjamin* komputasi tersebut tidak akan diulang. Tapi terkadang Anda harus memastikan sebuah objek hanya diciptakan sekali.
+`useMemo` mengizinkan Anda untuk [me-*memoize* sebuah perhitungan yang *expensive*](#how-to-memoize-calculations) jika *dependency*-nya sama. Bagiamanapun, itu hanya berfungsi sebagai sebuah penanda, dan tidak *menjamin* komputasi tersebut tidak akan diulang. Tapi terkadang Anda harus memastikan sebuah objek hanya diciptakan sekali.
 
-**Kasus penggunaan pertama yang umum yakni ketika menciptakan sebuah *initial state* itu *expensive*:**
+**Kasus penggunaan pertama yang umum yakni ketika menciptakan sebuah _initial state_ itu _expensive_:**
 
 ```js
 function Table(props) {
@@ -793,7 +793,7 @@ function Table(props) {
 }
 ```
 
-Untuk menghindari pembuatan ulang *initial state* yang dibiarkan, kita bisa mengoper sebuah **function** ke *`useState`*:
+Untuk menghindari pembuatan ulang *initial state* yang dibiarkan, kita bisa mengoper sebuah **function** ke `useState`:
 
 ```js
 function Table(props) {
@@ -803,9 +803,9 @@ function Table(props) {
 }
 ```
 
-React hanya akan memanggil fungsi ini selama *render* pertama. Lihat [referensi *`useState` API*](/docs/hooks-reference.html#usestate).
+React hanya akan memanggil fungsi ini selama *render* pertama. Lihat [referensi `useState` API*](/docs/hooks-reference.html#usestate).
 
-**Anda adakalanya juga ingin menghindari pembuatan ulang nilai awal *`useRef()`*.** Contohnya, mungkin Anda ingin memastikan beberapa contoh kelas penting hanya bisa dibuat satu kali:
+**Anda adakalanya juga ingin menghindari pembuatan ulang nilai awal `useRef()`.** Contohnya, mungkin Anda ingin memastikan beberapa contoh kelas penting hanya bisa dibuat satu kali:
 
 ```js
 function Image(props) {
@@ -815,7 +815,7 @@ function Image(props) {
 }
 ```
 
-*`useRef`* **tidak** menerima fungsi khusus yang berlebih seperti *`useState`*. Sebagai gantinya, Anda bisa menuliskan fungsi sendiri yang membuat dan mengaturnya secara *lazy*:
+`useRef` **tidak** menerima fungsi khusus yang berlebih seperti `useState`. Sebagai gantinya, Anda bisa menuliskan fungsi sendiri yang membuat dan mengaturnya secara *lazy*:
 
 ```js
 function Image(props) {
@@ -834,7 +834,7 @@ function Image(props) {
 }
 ```
 
-Ini menghindari pembuatan objek yang *expensive* hingga objek tersebut benar-benar dibutuhkan untuk pertama kalinya. Jika Anda menggunakan *Flow* atau *TypeScript*, Anda juga bisa memberikan *`getObserver()`* sebuah nilai yang tidak bisa dikosongkan (*non-nullable*) demi kenyamanan.
+Ini menghindari pembuatan objek yang *expensive* hingga objek tersebut benar-benar dibutuhkan untuk pertama kalinya. Jika Anda menggunakan *Flow* atau *TypeScript*, Anda juga bisa memberikan `getObserver()` sebuah nilai yang tidak bisa dikosongkan (*non-nullable*) demi kenyamanan.
 
 
 ### Apakah *Hooks* lamban karena membuat fungsi di saat *render*? {#are-hooks-slow-because-of-creating-functions-in-render}
@@ -847,9 +847,9 @@ Sebagai tambahan, pertimbangkan bahwa desain *Hooks* itu lebih efision dalam beb
 
 * **Kode idiomatis yang menggunakan _Hooks_ tidak memerlukan _nesting_ pohon komponen mendalam** yang  lazim dalam basis kode yang mana menggunakan *higher-order component*, *render props*, dan *context*. Dengan pohon komponen yang lebih kecil, React jadi punya lebih sedikit tugas untuk dikerjakan.
 
-Secara tradisional, performa menyangkut seputarfugsi-fungsi *inline* React sudah dihubungkan dengan bagaimana cara untuk mengoper *callback* baru setiap *render* yang memotong optimasi *`shouldComponentUpdate`* dalam komponen turunan. *Hooks* mendekati masalah dari tiga sisi.
+Secara tradisional, performa menyangkut seputarfugsi-fungsi *inline* React sudah dihubungkan dengan bagaimana cara untuk mengoper *callback* baru setiap *render* yang memotong optimasi `shouldComponentUpdate` dalam komponen turunan. *Hooks* mendekati masalah dari tiga sisi.
 
-* *Hook* [*`useCallback`*](/docs/hooks-reference.html#usecallback) mengizinkan Anda untuk tetap menggunakan rujukan *callback* yang samadi antara *render* ulang sehingga *`shouldComponentUpdate`* akan terus bekerja:
+* *Hook* [`useCallback`](/docs/hooks-reference.html#usecallback) mengizinkan Anda untuk tetap menggunakan rujukan *callback* yang samadi antara *render* ulang sehingga `shouldComponentUpdate` akan terus bekerja:
 
     ```js {2}
     // Tidak akan berubah kecuali `a` atau `b` berubah
@@ -858,15 +858,15 @@ Secara tradisional, performa menyangkut seputarfugsi-fungsi *inline* React sudah
     }, [a, b]);
     ```
 
-* *Hook* [*`useMemo`*](/docs/hooks-faq.html#how-to-memoize-calculations) membuat jadi lebih mudah untuk untuk mengontrol ketika ada satu-satu pembaruan turunan (*children*), mengurangi kebutuhan untuk komponen murni.
+* *Hook* [`useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations) membuat jadi lebih mudah untuk untuk mengontrol ketika ada satu-satu pembaruan turunan (*children*), mengurangi kebutuhan untuk komponen murni.
 
-* Pada akhirnya, *Hook* [*`useReducer`*](/docs/hooks-reference.html#usereducer) mengurangi kebutuhan untuk mengoper *callback* secara mendalam, seperti yang dijelaskan di bawah ini.
+* Pada akhirnya, *Hook* [`useReducer`](/docs/hooks-reference.html#usereducer) mengurangi kebutuhan untuk mengoper *callback* secara mendalam, seperti yang dijelaskan di bawah ini.
 
 ### Bagaimana cara menghindari pengoperan *callback* jadi *down*? {#how-to-avoid-passing-callbacks-down}
 
 Kami menemukan bahwa kebanyakan orang tidak menikmati pengoperan *callback* secara manual di sepanjang tiap tingkatan sebuah pohon komponen. Walaupun hal tersebut lebih gamblang, pengoperan *callback* secara manual bisa terasa seperti pekerjaan yang menguras tenaga.
 
-Dalam pohon komponen yang luas, sebuah alternatif yang kami rekomendasikan adalah untuk mengoper sebuah fungsi *`dispatch`* dari [*`useReducer`*](/docs/hooks-reference.html#usereducer) melalui *context*:
+Dalam pohon komponen yang luas, sebuah alternatif yang kami rekomendasikan adalah untuk mengoper sebuah fungsi `dispatch` dari [`useReducer`](/docs/hooks-reference.html#usereducer) melalui *context*:
 
 ```js {4,5}
 const TodosDispatch = React.createContext(null);
@@ -883,7 +883,7 @@ function TodosApp() {
 }
 ```
 
-Turunan apapun dalam pohon yang ada di dalam *`TodosApp`* bisa menggunakan fungsi *`dispatch`* untuk mengoper tindakan kepada *`TodosApp`*:
+Turunan apapun dalam pohon yang ada di dalam `TodosApp` bisa menggunakan fungsi `dispatch` untuk mengoper tindakan kepada `TodosApp`:
 
 ```js {2,3}
 function DeepChild(props) {
@@ -900,19 +900,19 @@ function DeepChild(props) {
 }
 ```
 
-Hal ini lebih memudahkan dari sudut pandang pemeliharaan (tidak perlu untuk terus meneruskan *callback*), dan juga menghindari masalah-masalah *callback*. Mengoper *`dispatch`* seperti ini merupakan rekomendasi pola untuk pembaruan-pembaruan mendalam.
+Hal ini lebih memudahkan dari sudut pandang pemeliharaan (tidak perlu untuk terus meneruskan *callback*), dan juga menghindari masalah-masalah *callback*. Mengoper `dispatch` seperti ini merupakan rekomendasi pola untuk pembaruan-pembaruan mendalam.
 
-Perlu diingat bahawa Anda masih bisa memilih antara mengoper *state* aplikasi sebagai *prop* (lebih gamblang) atau sebagai *context* (lebih memudahkan untuk pembaruan yang sangat mendalam). Jika Anda menggunakan *context* untuk mengoper *state* juga, gunakan dua jenis *context* berbeda -- *`dispatch` context* tidak pernah berubah, jadi komponen yang membacanya tidak perlu melakukan *render* ulang kecuali juga membutuhkan *state* aplikasi.
+Perlu diingat bahawa Anda masih bisa memilih antara mengoper *state* aplikasi sebagai *prop* (lebih gamblang) atau sebagai *context* (lebih memudahkan untuk pembaruan yang sangat mendalam). Jika Anda menggunakan *context* untuk mengoper *state* juga, gunakan dua jenis *context* berbeda -- `dispatch` context* tidak pernah berubah, jadi komponen yang membacanya tidak perlu melakukan *render* ulang kecuali juga membutuhkan *state* aplikasi.
 
-### Bagimana cara membaca sebuah nilai yang sering berubah dari *`useCallback`*? {#how-to-read-an-often-changing-value-from-usecallback}
+### Bagimana cara membaca sebuah nilai yang sering berubah dari `useCallback`? {#how-to-read-an-often-changing-value-from-usecallback}
 
 >Catatan
 >
->Kami rekomendasikan untuk [mengoper *`dispatch`* dalam *context*](#how-to-avoid-passing-callbacks-down) daripada satu-persatu *callback* dalam *prop*. Pendekatan di bawah hanya disebutkan di sini sebagai pelengkap dan juga cara darurat.
+>Kami rekomendasikan untuk [mengoper `dispatch` dalam *context*](#how-to-avoid-passing-callbacks-down) daripada satu-persatu *callback* dalam *prop*. Pendekatan di bawah hanya disebutkan di sini sebagai pelengkap dan juga cara darurat.
 >
->PErhatikan juga bahwa pola ini bisa menyebabkan masalah dalam [mode *concurrent*](/blog/2018/03/27/update-on-async-rendering.html). Kami berencana untuk menyediakan alternatif yang lebih ergonomis di masa yang akan datang, tapi solusi teraman sekarang adalah untuk selalu meng-invalidasi callback jika beberapa nilai bergantung pada perubahan.
+>Perhatikan juga bahwa pola ini bisa menyebabkan masalah dalam [mode *concurrent*](/blog/2018/03/27/update-on-async-rendering.html). Kami berencana untuk menyediakan alternatif yang lebih ergonomis di masa yang akan datang, tapi solusi teraman sekarang adalah untuk selalu meng-invalidasi callback jika beberapa nilai bergantung pada perubahan.
 
-Dalam beberapa kasus langka Anda mungkin butuh untuk *memoize* sebuah *callback* dengan menggunakan [*`useCallback*`](/docs/hooks-reference.html#usecallback) tetapi proses *memoize* tidak berjalan dengan baik karena fungsi dalam harus dibuat ulang terlalu sering. Jika fungsi yang Anda *memoize* adalah sebuah *event handler* dan tidak digunakan selama proses *render*, Anda bisa gunakan [*ref* sebagai sebuah *instance variable*](#is-there-something-like-instance-variables), dan menyimpan nilai yang terakhir di-*commit* ke dalam *ref* tersebut secara manual:
+Dalam beberapa kasus langka Anda mungkin butuh untuk *memoize* sebuah *callback* dengan menggunakan [`useCallback`](/docs/hooks-reference.html#usecallback) tetapi proses *memoize* tidak berjalan dengan baik karena fungsi dalam harus dibuat ulang terlalu sering. Jika fungsi yang Anda *memoize* adalah sebuah *event handler* dan tidak digunakan selama proses *render*, Anda bisa gunakan [*ref* sebagai sebuah *instance variable*](#is-there-something-like-instance-variables), dan menyimpan nilai yang terakhir di-*commit* ke dalam *ref* tersebut secara manual:
 
 ```js {6,10}
 function Form() {
@@ -980,7 +980,7 @@ Dalam kasus-kasus tersebut, kami **tidak merekomendasikan pola ini** dan hanya u
 
 React merekam jejak komponen yang baru saja mulai di-*render*. Terima kasih pada [aturan *Hooks*](/docs/hooks-rules.html), kita tahu bahwa *Hooks* hanya dipanggil dari komponen React (atau *custom Hooks* -- yang mana juga dipanggil dari komponen React).
 
-Terdapat daftar internal dari *"memory cells"* yang berhubungkan dengan tiap komponen. Itu semua hanyalah objek-objek JavaScript dimana kita bisa menaruh data. Ketika Anda memanggil sebuah *Hook* seperti *`useState()`*, ia membaca *cell* terkini (atau menginisialisasikannya selama *render* pertama), dan memindahkan *pointer* ke *cell* selanjutnya. Inilah bagaimana masing-masing panggilan *`useState()`* mendapat *local state* sendiri-sendiri.
+Terdapat daftar internal dari *"memory cells"* yang berhubungkan dengan tiap komponen. Itu semua hanyalah objek-objek JavaScript dimana kita bisa menaruh data. Ketika Anda memanggil sebuah *Hook* seperti `useState()`, ia membaca *cell* terkini (atau menginisialisasikannya selama *render* pertama), dan memindahkan *pointer* ke *cell* selanjutnya. Inilah bagaimana masing-masing panggilan `useState()` mendapat *local state* sendiri-sendiri.
 
 ### Bagaimana *seni awal*-nya *Hooks*? {#what-is-the-prior-art-for-hooks}
 

From 296003d3ec00803f9bb47dfb851c56a2f99c4e8f Mon Sep 17 00:00:00 2001
From: dummyeuy <ghalib12.euy16@gmail.com>
Date: Mon, 28 Oct 2019 15:07:19 +0700
Subject: [PATCH 05/14] commit hasil translasi JSX-in-depth sesuai dengan
 https://github.com/reactjs/id.reactjs.org/issues/1#issuecomment-546177857

---
 content/docs/jsx-in-depth.md | 196 +++++++++++++++++------------------
 1 file changed, 98 insertions(+), 98 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index eb3dc3a5b..36181daeb 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -12,32 +12,32 @@ redirect_from:
   - "docs/jsx-in-depth-zh-CN.html"
   - "docs/jsx-in-depth-ko-KR.html"
 ---
-
-Fundamentally, JSX just provides syntactic sugar for the `React.createElement(component, props, ...children)` function. The JSX code:
+<!-- This jsx-in-depth.md` is translated by dummyeuy (Muhammad Ghalib) -->
+Pada dasarnya, JSX hnaya menyediakan sintaksis-sintaksis yang mudah ditulis dan dimengerti (*syntatic sugar*) untuk fungsi *`React.createElement(component, prop, ...children)`*. Kode JSX:
 
 ```js
 <MyButton color="blue" shadowSize={2}>
-  Click Me
+  Klik saya
 </MyButton>
 ```
 
-compiles into:
+disusun(*compile*) menjadi:
 
 ```js
 React.createElement(
   MyButton,
   {color: 'blue', shadowSize: 2},
-  'Click Me'
+  'Klik saya'
 )
 ```
 
-You can also use the self-closing form of the tag if there are no children. So:
+Anda juga dapat menggunakan *self-closing form* dari *tag* jika tidak ada turunan (*children*). Jadinya:
 
 ```js
 <div className="sidebar" />
 ```
 
-compiles into:
+di-*compile* menjadi:
 
 ```js
 React.createElement(
@@ -47,21 +47,21 @@ React.createElement(
 )
 ```
 
-If you want to test out how some specific JSX is converted into JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
+Jika Anda ingin menguji bagaimana JSX yang spesifik JSX dikonversi menjadi JavaScript, cobalah [*Babel compiler* daring](babel://jsx-simple-example) ini.
 
-## Specifying The React Element Type {#specifying-the-react-element-type}
+## Spesifikasi Jenis Elemen React {#specifying-the-react-element-type}
 
-The first part of a JSX tag determines the type of the React element.
+Bagian pertama dari sebuah penanda (*tag*) JSX menentukan jenis dari elemen React.
 
-Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX `<Foo />` expression, `Foo` must be in scope.
+Jenis-jenis yang dikapitalisasi menandakan bahwa penanda JSX merujuk pada sebuah komponen React.  Penanda-penanda ini dikompilasi menjadi sebuah acuan langsung ke variabe yang sudah diberi nama, jadi jika Anda menggunakan ekspresi JSX `<Foo />`, `Foo` harus berada dalam cakupan (*scope*).
 
-### React Must Be in Scope {#react-must-be-in-scope}
+### React Harus Berada dalam Cakupan {#react-must-be-in-scope}
 
-Since JSX compiles into calls to `React.createElement`, the `React` library must also always be in scope from your JSX code.
+Semenjak JSX mengompilasi jadi panggilan-panggilan pada `React.createElement`, `React` library juga harus selalu berada dalam cakupan dari kode JSX Anda.
 
-For example, both of the imports are necessary in this code, even though `React` and `CustomButton` are not directly referenced from JavaScript:
+Contohnya, kedua import tersebut dibutuhkan dalam kode ini, bahkan ketika `React` dan `CustomButton` tidak secara langsung mengacu dari JavaScript:
 
-```js{1,2,5}
+```js {1,2,5}
 import React from 'react';
 import CustomButton from './CustomButton';
 
@@ -71,13 +71,13 @@ function WarningButton() {
 }
 ```
 
-If you don't use a JavaScript bundler and loaded React from a `<script>` tag, it is already in scope as the `React` global.
+Jika Anda tidak menggunakan sebuah *bundler* JavaScript dan memuat React dari penanda `<script>`, penanda tersebut sudah termasuk di dalam cakupan seperti halnya `React` secara global.
 
-### Using Dot Notation for JSX Type {#using-dot-notation-for-jsx-type}
+### Menggunakan Notasi *Dot* untuk Jenis JSX {#using-dot-notation-for-jsx-type}
 
-You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if `MyComponents.DatePicker` is a component, you can use it directly from JSX with:
+Anda juga bisa merujuk pada sebuah komponen React menggunakan *dot-notation* dari dalam JSX. Ini memudahkan jika Anda memiliki sebuah modul tunggal yang mengekspor bnayak komponen React. Contohnya, jika `MyComponents.DatePicker` adalah sebuah komponen, Anda bisa menggunakannya langsung dari JSX dengan cara:
 
-```js{10}
+```js {10}
 import React from 'react';
 
 const MyComponents = {
@@ -91,51 +91,51 @@ function BlueDatePicker() {
 }
 ```
 
-### User-Defined Components Must Be Capitalized {#user-defined-components-must-be-capitalized}
+### Komponen *User-Defined* Harus Di-Kapitalisasi {#user-defined-components-must-be-capitalized}
 
-When an element type starts with a lowercase letter, it refers to a built-in component like `<div>` or `<span>` and results in a string `'div'` or `'span'` passed to `React.createElement`. Types that start with a capital letter like `<Foo />` compile to `React.createElement(Foo)` and correspond to a component defined or imported in your JavaScript file.
+Ketika sebuah tipe elemen dimulai dengan sebuah huruf kecil (*lowercase*), hal tersebut merujuk pada sebuah komponen *built-in* seperti `<div>` atau `<span>` dan menghasilkan sebuah *string* `'div'` atau `'span'` yang dioper ke `React.createElement`. Pengetikan yang dimulai dengan huruf kapital seperti `<Foo />` dikompilasi ke `React.createElement(Foo)` dan sesuai dengan sebuah komponen yang didefinisikan atau diimpor dalam *file* JavaScript Anda.
 
-We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
+Kami merekomendasikan pemberian nama komponen dengan huruf kapital. Jika Andam memiliki sebuah komponen yang dimulai dengan sebuah huruf *lowercase*, serahkan komponen tersebut ke variabel yang dikapitalisasi sebelum menggunakannya dalam JSX.
 
-For example, this code will not run as expected:
+Sebagai contoh, kode ini tidak akan berjalan seperti yang diharapkan:
 
-```js{3,4,10,11}
+```js {3,4,10,11}
 import React from 'react';
 
-// Wrong! This is a component and should have been capitalized:
+// Salah! Ini adalah sebuah komponen dan seharusnya dikapitalisasi:
 function hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
+  // Benar! Penggunaan <div> ini sesuai dengan aturan karena div adalah penanda HTML yang valid:
   return <div>Hello {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
+  // Salah! React pikir bahwa <hello /> adalah sebuah penanda HTML karena tidak dikapitalisasi:
   return <hello toWhat="World" />;
 }
 ```
 
-To fix this, we will rename `hello` to `Hello` and use `<Hello />` when referring to it:
+Untuk memperbaiki ini, kita akan menamakan ulang `hello` menjadi `Hello` dan menggunakan `<Hello />` ketika mengacu ke sana:
 
-```js{3,4,10,11}
+```js {3,4,10,11}
 import React from 'react';
 
-// Correct! This is a component and should be capitalized:
+// Benar! Ini adalah sebuah komponen dan memang seharusnya dikapitalisasi:
 function Hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
+  // Benar! Penggunaan <div> ini sesuai aturan karena div adalah sebuah penanda HTML yang valid:
   return <div>Hello {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Correct! React knows <Hello /> is a component because it's capitalized.
+  // Benar! React tahu bahwa <Hello /> adalah sebuah komponen karena dikapitalisasi.
   return <Hello toWhat="World" />;
 }
 ```
 
-### Choosing the Type at Runtime {#choosing-the-type-at-runtime}
+### Memilih Jenis yang Tepat pada *Runtime* {#choosing-the-type-at-runtime}
 
-You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. This often comes up when you want to render a different component based on a prop:
+Anda tidak bisa menggunakan sebuah ekspresi umum sebagai jenis elemen React. Jika ingin menggunakan sebuah ekspresi umum untuk mengindikasikan jenis elemen, serahkan saja ekspresi umum tersebut ke variabel yang dikapitalisasi dahulu. Ini seringkali muncul ketika Anda ingin me-*render* sebuah komponen berbeda berdasarkan sebuah *prop*:
 
-```js{10,11}
+```js {10,11}
 import React from 'react';
 import { PhotoStory, VideoStory } from './stories';
 
@@ -145,14 +145,14 @@ const components = {
 };
 
 function Story(props) {
-  // Wrong! JSX type can't be an expression.
+  // Salah! Tipe JSX tidak boleh berupa ekspresi.
   return <components[props.storyType] story={props.story} />;
 }
 ```
 
-To fix this, we will assign the type to a capitalized variable first:
+Untuk memperbaiki ini, kita akan menyerahkan jenis tersebut ke sebuah variabel yang dikapitalisasi terlebih dahulu:
 
-```js{10-12}
+```js {10-12}
 import React from 'react';
 import { PhotoStory, VideoStory } from './stories';
 
@@ -162,29 +162,29 @@ const components = {
 };
 
 function Story(props) {
-  // Correct! JSX type can be a capitalized variable.
+  // Benar! Jenis JSX belum berupa sebuah variable yang dikapitalisasi.
   const SpecificStory = components[props.storyType];
   return <SpecificStory story={props.story} />;
 }
 ```
 
-## Props in JSX {#props-in-jsx}
+## *Prop* dalam JSX {#props-in-jsx}
 
-There are several different ways to specify props in JSX.
+Terdapat beberapa cara berbeda untuk men-spesifikasikan *prop* dalam JSX.
 
 ### JavaScript Expressions as Props {#javascript-expressions-as-props}
 
-You can pass any JavaScript expression as a prop, by surrounding it with `{}`. For example, in this JSX:
+Anda bisa mengoper ekspresi JavaScript sebagai sebuah *prop*, dengan cara melingkunginya dengan `{}`. Contohnya, dalam JSX ini:
 
 ```js
 <MyComponent foo={1 + 2 + 3 + 4} />
 ```
 
-For `MyComponent`, the value of `props.foo` will be `10` because the expression `1 + 2 + 3 + 4` gets evaluated.
+Untuk `MyComponent`, nilai `props.foo` akan menjadi `10` karena ekspresi `1 + 2 + 3 + 4` telah ditaksi.
 
-`if` statements and `for` loops are not expressions in JavaScript, so they can't be used in JSX directly. Instead, you can put these in the surrounding code. For example:
+Pernyataan-pernyataan `if` dan pengulangan-pengulangan (*loop*) `for` bukanlah ekspresi dalam JavaScript, jadi hal-hal tersebut tidak bisa digunakan secara langsung dalam JSX. Sebagai gantinya, Anda bisa menempatkan ini di dalam kode yang melingkupi. Contohnya:
 
-```js{3-7}
+```js {3-7}
 function NumberDescriber(props) {
   let description;
   if (props.number % 2 == 0) {
@@ -196,11 +196,11 @@ function NumberDescriber(props) {
 }
 ```
 
-You can learn more about [conditional rendering](/docs/conditional-rendering.html) and [loops](/docs/lists-and-keys.html) in the corresponding sections.
+Anda bisa mempelajari lebuh lanjut [proses *render* kondisional](/docs/conditional-rendering.html) dan [pengulangan](/docs/lists-and-keys.html) di bagian-bagian yang sesuai.
 
-### String Literals {#string-literals}
+### *String Literal* {#string-literals}
 
-You can pass a string literal as a prop. These two JSX expressions are equivalent:
+Anda dapat mengoper sebuah *string literal* sebagai sebuah *prop*. Kedua ekspresi JSX berikut ini sama:
 
 ```js
 <MyComponent message="hello world" />
@@ -208,7 +208,7 @@ You can pass a string literal as a prop. These two JSX expressions are equivalen
 <MyComponent message={'hello world'} />
 ```
 
-When you pass a string literal, its value is HTML-unescaped. So these two JSX expressions are equivalent:
+Ketika Anda mengoper sebuah *string literal*, nilainya tidak luput dari HTML (*HTML-unescaped*). Jadi kedua eskpresi JSX berikut ini sama:
 
 ```js
 <MyComponent message="&lt;3" />
@@ -216,9 +216,9 @@ When you pass a string literal, its value is HTML-unescaped. So these two JSX ex
 <MyComponent message={'<3'} />
 ```
 
-This behavior is usually not relevant. It's only mentioned here for completeness.
+Perilaku (*behavior*) biasanya tidak relevan. Dan hanya disebutkan di sini untuk melengkapi.
 
-### Props Default to "True" {#props-default-to-true}
+### Prop secara mendasar Diatur menjadi "True" {#props-default-to-true}
 
 If you pass no value for a prop, it defaults to `true`. These two JSX expressions are equivalent:
 
@@ -228,13 +228,13 @@ If you pass no value for a prop, it defaults to `true`. These two JSX expression
 <MyTextBox autocomplete={true} />
 ```
 
-In general, we don't recommend using this because it can be confused with the [ES6 object shorthand](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) `{foo}` which is short for `{foo: foo}` rather than `{foo: true}`. This behavior is just there so that it matches the behavior of HTML.
+Secara umum, kami tidak merekomendasikan menggunakan cara ii karena bisa membingungkan Anda dengan [*shorthand* objek *ES6*](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) `{foo}` yang mana kependekan dari `{foo: foo}` ketimbang `{foo: true}`. *Behavior* ini demikian adanya karena cocok dengan *behavior*-nya HTML.
 
-### Spread Attributes {#spread-attributes}
+### Menyebarkan Atribut {#spread-attributes}
 
-If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" operator to pass the whole props object. These two components are equivalent:
+Jika Anda memiliki `props` sebagai sebuah objek, dan ingin mengopernya ke JSX, Anda bisa gunakan `...` sebagai sebuah operator "penyebaran" (*spread*) untuk mengoper ke objek *prop* yang utuh. Kedua komponen ini adalah sama:
 
-```js{7}
+```js {7}
 function App1() {
   return <Greeting firstName="Ben" lastName="Hector" />;
 }
@@ -245,9 +245,9 @@ function App2() {
 }
 ```
 
-You can also pick specific props that your component will consume while passing all other props using the spread operator.
+Anda juga bisa mengambil *prop* tertentu yang mana komponen Anda akan gunakan ketika mengoperkan semua *prop* lainnya menggunakan operator penyebaran.
 
-```js{2}
+```js {2}
 const Button = props => {
   const { kind, ...other } = props;
   const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
@@ -265,30 +265,30 @@ const App = () => {
 };
 ```
 
-In the example above, the `kind` prop is safely consumed and *is not* passed on to the `<button>` element in the DOM.
-All other props are passed via the `...other` object making this component really flexible. You can see that it passes an `onClick` and `children` props.
+Pada contoh di atas, *jenis* (`kind`) *prop* tersebut secara aman digunakan dan *tidak* dioper kepada elemen `<button>` dalam DOM.
+Semua *prop* lainnya dioper melalui objek `...other` membuat komponen ini begitu fleksibel. Anda bisa lihat bahwa komponen tersebut mengoper sebuah *prop* `onClick` dan *prop* `children`.
 
-Spread attributes can be useful but they also make it easy to pass unnecessary props to components that don't care about them or to pass invalid HTML attributes to the DOM. We recommend using this syntax sparingly.  
+Penyebaran atribut bisa berguna tetapi juga membuatnya mudah mengoper *prop* yang tidak perlu ke komponen-komponen yang tidak memperdulikan *prop* tersebut atau mengoper atribut-atribut HTML yang tidak valid ke DOM. Kami rekomendasikan menggunakan sintaks ini seperlunya.  
 
-## Children in JSX {#children-in-jsx}
+## Turunan (*Children*) dalam JSX {#children-in-jsx}
 
-In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: `props.children`. There are several different ways to pass children:
+Dalam ekspresi JSX yang mengandung penanda (*tag*) pembuka dan *tag* penutup, konten yang ada di antara penanda tersebut dioper sebagai *prop* khusus: `props.children`. Ada beberapa cara berbeda untuk mengoper turunan (*children*):
 
-### String Literals {#string-literals-1}
+### *String Literal* {#string-literals-1}
 
-You can put a string between the opening and closing tags and `props.children` will just be that string. This is useful for many of the built-in HTML elements. For example:
+Anda dapat menempatkan sebuah *string* di antara *tag* pembuka dan penutup dan `props.children` akan menjadi *string* tersebut. Ini berguna untuk banyak elemen HTML yang *built-in*. Contohnya:
 
 ```js
 <MyComponent>Hello world!</MyComponent>
 ```
 
-This is valid JSX, and `props.children` in `MyComponent` will simply be the string `"Hello world!"`. HTML is unescaped, so you can generally write JSX just like you would write HTML in this way:
+Ini adalah JSX yang valid , dan `props.children` dalam `MyComponent` secara sederhana akan menjadi *string* `"Hello world!"`. HTML tersebut tidak terhindarkan, jadi Anda secara umum akan menuliskan JSX selayaknya Anda menuliskan HTML dengan cara berikut:
 
 ```html
-<div>This is valid HTML &amp; JSX at the same time.</div>
+<div>Ini adalah HTML valid &amp; JSX pada waktu yang sama.</div>
 ```
 
-JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space. So these all render to the same thing:
+JSX mentingkirkan ruang putih (*whitespace*) di awal dan akhir sebuah baris. JSX juga menyingkirkan baris-baris yang kosong. Baris-baris baru yang berbatasan dengan *tag* juga disingkirkan; baris-baris baru yang muncul di tengah *string literal* dipadatkan menjadi sebuah *space* tunggal. Jadi semua ini akan me-*render* hasil yang sama:
 
 ```js
 <div>Hello World</div>
@@ -308,9 +308,9 @@ JSX removes whitespace at the beginning and ending of a line. It also removes bl
 </div>
 ```
 
-### JSX Children {#jsx-children}
+### Turunan (*Children*) JSX {#jsx-children}
 
-You can provide more JSX elements as the children. This is useful for displaying nested components:
+Anda juga bisa menyediakan lebih banyak elemen JSX sebagai turunan (*children*). Hal ini berguna untuk menampilkan komponen yang *nested*:
 
 ```js
 <MyContainer>
@@ -319,7 +319,7 @@ You can provide more JSX elements as the children. This is useful for displaying
 </MyContainer>
 ```
 
-You can mix together different types of children, so you can use string literals together with JSX children. This is another way in which JSX is like HTML, so that this is both valid JSX and valid HTML:
+Anda juga bisa mencampurkan jenis-jenis turunan yang berbeda, jadi Anda bisa mengguankan *string literal* bersamaan dengan turunan JSX. Inin adalah cara lain yang mana JSX seperti halnya HTML, jadi hasilnya JSX yang valid dan HTML yang valid:
 
 ```html
 <div>
@@ -331,23 +331,23 @@ You can mix together different types of children, so you can use string literals
 </div>
 ```
 
-A React component can also return an array of elements:
+Sebuah komponen React juga bisa memberi hasil balikan (*return*) berupa sebuah *array* elemen:
 
 ```js
 render() {
-  // No need to wrap list items in an extra element!
+  // Tidak perlu untuk membungkus daftar itemd dalam sebuah elemen tambahan!
   return [
-    // Don't forget the keys :)
-    <li key="A">First item</li>,
-    <li key="B">Second item</li>,
-    <li key="C">Third item</li>,
+    // Jangan lupa kuncinya :)
+    <li key="A">Item pertama</li>,
+    <li key="B">Item kedua</li>,
+    <li key="C">Item ketiga</li>,
   ];
 }
 ```
 
-### JavaScript Expressions as Children {#javascript-expressions-as-children}
+### Ekspresi JavaScript as Turunan (*Children*) {#javascript-expressions-as-children}
 
-You can pass any JavaScript expression as children, by enclosing it within `{}`. For example, these expressions are equivalent:
+Anda dapat mengoper ekspresi JavaScript apapun sebagai turunan, dengan cara memenyertakannya di antara `{}`. Sebagai contoh, ekspresi-ekspresi ini adalah sama:
 
 ```js
 <MyComponent>foo</MyComponent>
@@ -355,15 +355,15 @@ You can pass any JavaScript expression as children, by enclosing it within `{}`.
 <MyComponent>{'foo'}</MyComponent>
 ```
 
-This is often useful for rendering a list of JSX expressions of arbitrary length. For example, this renders an HTML list:
+Ini seringkali berguna untuk me-*render* sebuah daftar ekspresi JSX yang panjangnya dapat berubah-ubah. Contohnya, berikut ini me-*render* sebuah daftar HTML:
 
-```js{2,9}
+```js {2,9}
 function Item(props) {
   return <li>{props.message}</li>;
 }
 
 function TodoList() {
-  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
+  const todos = ['menyelesaikan doc', 'men-submit pr', 'nag dan untuk di-review'];
   return (
     <ul>
       {todos.map((message) => <Item key={message} message={message} />)}
@@ -372,20 +372,20 @@ function TodoList() {
 }
 ```
 
-JavaScript expressions can be mixed with other types of children. This is often useful in lieu of string templates:
+Ekspresi-ekspresi JavaScript juga dapat dicampurkan dengan jenis-jenis turunan lain. Ini seringkali berguna dalam pengganti *string template*:
 
-```js{2}
+```js {2}
 function Hello(props) {
   return <div>Hello {props.addressee}!</div>;
 }
 ```
 
-### Functions as Children {#functions-as-children}
+### Fungsi sebagai Turunan (*Children*) {#functions-as-children}
 
-Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, `props.children` works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as `props.children`:
+Normalnya, ekspresi JavaScript dimasukkan ke dalam JSX akan ditaksir menjadis sebuah *string*, sebuah elemen React, atau menjadi daftar hal-hal semacam itu. Bagaimanapun, `props.children` bekerja seperti halnya *prop* apapun yang mana bisa mengoper jenis data apapun, tidak hanya jenis data yang React tahu bagaimana cara untuk me-*render*-nya. Contohnya, jika Anda memiliki sebuah komponen *custom*, Anda bisa melakukan *callback* pada komponen tersebut sebagai `props.children`:
 
-```js{4,13}
-// Calls the children callback numTimes to produce a repeated component
+```js {4,13}
+// Memanggil callback turunan numTimes untuk menghasilkan sebuah komponen berulang
 function Repeat(props) {
   let items = [];
   for (let i = 0; i < props.numTimes; i++) {
@@ -403,11 +403,11 @@ function ListOfTenThings() {
 }
 ```
 
-Children passed to a custom component can be anything, as long as that component transforms them into something React can understand before rendering. This usage is not common, but it works if you want to stretch what JSX is capable of.
+Turunan dioper ke sebuah komponen *custom* bisa berarti apa saja, selama komponen itu mengubah turunan-turunan tersbut menjadi sesuatu yang bisa dimengerti React sebelum proses *render*. Penggunaan ini tidak lazim, namun berkerja jika Anda ingin melebarkan apa saja yang dapat dilakukan JSX.
 
-### Booleans, Null, and Undefined Are Ignored {#booleans-null-and-undefined-are-ignored}
+### *Boolean, Null,* dan *Undefined* Diabaikan {#booleans-null-and-undefined-are-ignored}
 
-`false`, `null`, `undefined`, and `true` are valid children. They simply don't render. These JSX expressions will all render to the same thing:
+`false`, `null`, `undefined`, dan `true` adalah turunan yang valid. Itu semua tidak di-*render*. Ekspresi-ekspresi JSX akan me-*render* hasil yang sama:
 
 ```js
 <div />
@@ -423,18 +423,18 @@ Children passed to a custom component can be anything, as long as that component
 <div>{true}</div>
 ```
 
-This can be useful to conditionally render React elements. This JSX renders the `<Header />` component only if `showHeader` is `true`:
+Ini berguna untuk secara kondisional me-*render* elemen-elemen React. JSX ini me-*render* komponen `<Header />` hanya jika `showHeader` bernilai `true`:
 
-```js{2}
+```js {2}
 <div>
   {showHeader && <Header />}
   <Content />
 </div>
 ```
 
-One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), such as the `0` number, are still rendered by React. For example, this code will not behave as you might expect because `0` will be printed when `props.messages` is an empty array:
+Satu peringatan bahwa beberapa [nilai "salah"](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), seperti angka `0`, masih di-*render* oleh React. Contohnya, kode berikut ini tidak akan berlaku seperi yang Anda kira karena `0` akan dicetak ketika `props.messages` adalah *array* kosong:
 
-```js{2}
+```js 2}
 <div>
   {props.messages.length &&
     <MessageList messages={props.messages} />
@@ -442,9 +442,9 @@ One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/doc
 </div>
 ```
 
-To fix this, make sure that the expression before `&&` is always boolean:
+Untuk memperbaiki ini, pastikan bahwa ekspresi sebelum `&&` adalah *boolean*:
 
-```js{2}
+```js {2}
 <div>
   {props.messages.length > 0 &&
     <MessageList messages={props.messages} />
@@ -452,9 +452,9 @@ To fix this, make sure that the expression before `&&` is always boolean:
 </div>
 ```
 
-Conversely, if you want a value like `false`, `true`, `null`, or `undefined` to appear in the output, you have to [convert it to a string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion) first:
+Sebaliknya, jika Anda ingin sebuah nilai seperti `false`, `true`, `null`, atau `undefined` untuk muncul di *output*, Anda harus [mengkonversinya menjadi sebuah *string*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion) terlebih dahulu:
 
-```js{2}
+```js {2}
 <div>
   My JavaScript variable is {String(myVariable)}.
 </div>

From f2c364aeb2b057cb0a34c8730b3732813f47afae Mon Sep 17 00:00:00 2001
From: dummyeuy <ghalib12.euy16@gmail.com>
Date: Wed, 30 Oct 2019 11:58:49 +0700
Subject: [PATCH 06/14] corrections of 'some typing errors' are applied,
 according to
 https://github.com/reactjs/id.reactjs.org/pull/125#pullrequestreview-308964350

---
 content/docs/hooks-faq.md | 70 +++++++++++++++++++--------------------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index cdc0f6c33..4d5ba61ab 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -4,13 +4,13 @@ title: Hooks FAQ
 permalink: docs/hooks-faq.html
 prev: hooks-reference.html
 ---
-<!-- docs/hooks-faq.md ini diterjemahkan oleh dummyeuy (Muhammad Ghalib) -->
-*Hooks* adalah tambahan baru dalam React 16.8. React memungkikan anda untuk menggunakan *state* dan fitur-fitur React lainnya tanpa perlu menuliskan sebuah kelas. 
+
+*Hooks* adalah tambahan baru dalam React 16.8. React memungkinkan anda untuk menggunakan *state* dan fitur-fitur React lainnya tanpa perlu menuliskan sebuah kelas. 
 
 Laman ini menjawab beberapa pertanyaan yang sering diajukan (*frequently asked questions*) tentang [*Hooks*](/docs/hooks-overview.html).
 
 <!--
-  jika Anda perlu me-egenerate ini, snippet dalam konsol devtools ini bisa membantu:
+  jika Anda perlu me-rgenerate ini, snippet dalam konsol devtools ini bisa membantu:
 
   $$('.anchor').map(a =>
     `${' '.repeat(2 * +a.parentNode.nodeName.slice(1))}` +
@@ -21,9 +21,9 @@ Laman ini menjawab beberapa pertanyaan yang sering diajukan (*frequently asked q
 * **[Strategi Adopsi](#adoption-strategy)**
   * [Versi React mana yang termasuk *Hooks* di dalamnya?](#which-versions-of-react-include-hooks)
   * [Apakah perlu menulis ulang semua komponen kelas saya?](#do-i-need-to-rewrite-all-my-class-components)
-  * [Apa yang dapat saya lakukan dengn *Hooks* namun tidak bisa saya lakukan dengan kelas?](#what-can-i-do-with-hooks-that-i-couldnt-with-classes)
+  * [Apa yang dapat saya lakukan dengan *Hooks* namun tidak bisa saya lakukan dengan kelas?](#what-can-i-do-with-hooks-that-i-couldnt-with-classes)
   * [Seberapa banyak pengetahuan saya tentang React yang tetap relevan?](#how-much-of-my-react-knowledge-stays-relevant)
-  * [Haruskan saya menggunakan Hooks, kelas atau gabungan keduanya?](#should-i-use-hooks-classes-or-a-mix-of-both)
+  * [Haruskah saya menggunakan Hooks, kelas atau gabungan keduanya?](#should-i-use-hooks-classes-or-a-mix-of-both)
   * [Apakah *Hooks* mencakup seluruh kasus yang digunakan untuk kelas?](#do-hooks-cover-all-use-cases-for-classes)
   * [Apakah *Hooks* menggantikan *render props* dan *higher-order components*?](#do-hooks-replace-render-props-and-higher-order-components)
   * [Apa yang *Hooks* peruntukan untuk API populer seperti *Redux connect()* dan *React router*?](#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router)
@@ -77,7 +77,7 @@ Perhatikan bahwa **untuk menjalankan Hooks, semua *package* React perlu setidakn
 
 Tidak. [Tidak ada rencana](/docs/hooks-intro.html#gradual-adoption-strategy) untuk menghilangkan kelas dari React -- kita semua perlu mengirimkan produk baru dan tidak memiliki waktu untuk penulisan ulang. Kami rekomendasikan untuk mencoba *Hooks* dalam kode baru.
 
-### Apa yang dapat saya lakukan dengn *Hooks* namun tidak bisa saya lakukan dengan kelas? {#what-can-i-do-with-hooks-that-i-couldnt-with-classes}
+### Apa yang dapat saya lakukan dengan *Hooks* namun tidak bisa saya lakukan dengan kelas? {#what-can-i-do-with-hooks-that-i-couldnt-with-classes}
 
 Hooks menawarkan sebuah cara baru yang kuat dan ekpresif untuk menggunakan kembali fungsionalitas antara komponen. ["Buat Hooks-mu Sendiri"](/docs/hooks-custom.html) menyajikan sekilas apa saja yang mungkin dilakukan. [Artikel ini](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889), oleh seorang anggota inti tim React, menyelam lebih dalam lagi kemampuan-kemampuan baru yang dibuka oleh Hooks.
 
@@ -87,7 +87,7 @@ Hooks adalah cara yang lebih langsung untuk menggunakan fitur-fitur React yang s
 
 Hooks memiliki sebuah alur kurva pembelajarannya sendiri. Jika terdapat sesuatu yang hilang dalam dokumentasi ini, [ajukan isu](https://github.com/reactjs/reactjs.org/issues/new) dan kami akan coba membantu.
 
-### Haruskan saya menggunakan Hooks, kelas atau gabungan keduanya?{#should-i-use-hooks-classes-or-a-mix-of-both}
+### Haruskah saya menggunakan Hooks, kelas atau gabungan keduanya?{#should-i-use-hooks-classes-or-a-mix-of-both}
 
 Ketika Anda siap, kami menganjurkan Anda untuk mulai mencoba *Hooks* dalam komponen-komponen baru yang Anda tulis. Pastikan setiap orang dalam tim Anda siap dan tidak asing dengan dokumentasi ini. Kami tidak merekomendasikan menulis ulang kelas-kelas Anda yang sudah ada ke *Hooks* kecuali Anda sudah berencana menulis ulang (seperti, memperbaiki *bug*).
 
@@ -137,7 +137,7 @@ function Example() {
     <div>
       <p>Anda meng-klik sebanyak {count} kali</p>
       <button onClick={() => setCount(count + 1)}>
-        Klik sayaS
+        Klik saya
       </button>
     </div>
   );
@@ -219,7 +219,7 @@ Terdapat beberapa heuristik lagi, dan hal tersebut bisa saja berubah sepanjang w
 
 ### Bagaimana cara saya dapat memperoleh data dengan Hooks?{#how-can-i-do-data-fetching-with-hooks}
 
-Berikut ini sebuah [demo kecil](https://codesandbox.io/s/jvvkoo8pq3) untuk permulaan Anda. Untuk mempelajari lebih lanjut, lihat [attikel ini](https://www.robinwieruch.de/react-hooks-fetch-data/) tentang memperoleh (*fetching*) data dengan menggunakan Hooks.
+Berikut ini sebuah [demo kecil](https://codesandbox.io/s/jvvkoo8pq3) untuk permulaan Anda. Untuk mempelajari lebih lanjut, lihat [artikel ini](https://www.robinwieruch.de/react-hooks-fetch-data/) tentang memperoleh (*fetching*) data dengan menggunakan Hooks.
 
 ### Apakah ada hal seperti *instance variable*? {#is-there-something-like-instance-variables}
 
@@ -268,7 +268,7 @@ function Box() {
 }
 ```
 
-Sekarang umpamakan kita ingin menuliskan beberapa logika yang mana merubah `left` (sisi kiri) dan `top` (sisi atas) ketika pengguna menggerakan tetikusnya. Perhatikan bagaimana kita harus menggabungkan area-area inike dalam objek *state* sebelumnya secara manual:
+Sekarang umpamakan kita ingin menuliskan beberapa logika yang mana merubah `left` (sisi kiri) dan `top` (sisi atas) ketika pengguna menggerakan tetikusnya. Perhatikan bagaimana kita harus menggabungkan area-area ini ke dalam objek *state* sebelumnya secara manual:
 
 ```js {4,5}
   // ...
@@ -320,7 +320,7 @@ function useWindowPosition() {
 }
 ```
 
-Perhatikan bagaimana kita dapat memindahkan panggilan `useState` untuk *state variable* `position` serta efek yang terhubung ke dalam sebuah *custom Hook* tanpa merubah kodenya. Jika semua *state* ada dalams sebuah objek, mengekstrak *state* tersebut akan jadi lebih sulit.
+Perhatikan bagaimana kita dapat memindahkan panggilan `useState` untuk *state variable* `position` serta efek yang terhubung ke dalam sebuah *custom Hook* tanpa merubah kodenya. Jika semua *state* ada dalam sebuah objek, mengekstrak *state* tersebut akan jadi lebih sulit.
 
 Baik memasang semua *state* ke dalam sebuah panggilan `useState`, serta memiliki sebuah panggilan `useState` pada setiap area, keduanya sama-sama berfungsi. Komponen-komponen cenderung paling mudah dibaca ketika Anda menemukan keseimbangan antara (penerapan) kedua cara tersebut, dan kelompok yang terhubung dengan *state* ke dalam beberapa *state variable* independen. Jika logika *state* tersebut menjadi kompleks, kami rekomendasikan [mengelolanya dengan sebuah *reducer*](/docs/hooks-reference.html#usereducer) atau sebuah *custom Hook*.
 
@@ -328,7 +328,7 @@ Baik memasang semua *state* ke dalam sebuah panggilan `useState`, serta memiliki
 
 Ini adalah kasus penggunaan yang langka. Jika butuh, Anda bisa [gunakan sebuah *ref* yang bisa diubah-ubah](#is-there-something-like-instance-variables) menjadi secara manual menyetorkan nilai *boolean* sesuai dengan apakah Anda berada pada *render* pertama atau selanjutnya, kemudia memeriksa penandanya (*flag*) pada efek yang Anda buat. (Jika sering melakukan hal ini, ada baiknya Anda membuat sebuah *custom Hook*.)
 
-### Bagimana cara untuk mendapatkan kembali *prop* atau *state* sebelumnya? {#how-to-get-the-previous-props-or-state}
+### Bagaimana cara untuk mendapatkan kembali *prop* atau *state* sebelumnya? {#how-to-get-the-previous-props-or-state}
 
 Kini, Anda bisa melakukannya secara manual [dengan *ref*](#is-there-something-like-instance-variables):
 
@@ -415,11 +415,11 @@ Pada akhirnya, alasan lain Anda melihat *stale prop* atau *state* yakni jika And
 
 >Catatan
 >
->Kami menyediakan sebuah aturan *ESLint* [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) sebagai bagian dari *package*[`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Itu akan memberi peringatakn ketika *dependency* keliru dispesifikasikan dan akan memberikan saran perbaikan.
+>Kami menyediakan sebuah aturan *ESLint* [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) sebagai bagian dari *package*[`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Itu akan memberi peringatan ketika *dependency* keliru dispesifikasikan dan akan memberikan saran perbaikan.
 
 ### Bagaimana cara mengimplementasikan `getDerivedStateFromProps`? {#how-do-i-implement-getderivedstatefromprops}
 
-Ketika Anda mungkin [tidak memerlukannya](/blog/2018/06/07/you-probably-dont-need-derived-state.html), dalam kasus-kasus yang jarang yang jarang Anda alami (seperti mengimplementasikan sebuah komponen `<Transition>`), Anda bisa memperbarui *state* tepat saat proses *render*. React akan menjalankan ulang komponen tersebut dengan *state* yang sudah diperbarui tepat setelah keluar dari *render* pertama sehingga tidak akan memakan banyak ruang (*expensive*).
+Ketika Anda mungkin [tidak memerlukannya](/blog/2018/06/07/you-probably-dont-need-derived-state.html), dalam kasus-kasus yang jarang Anda alami (seperti mengimplementasikan sebuah komponen `<Transition>`), Anda bisa memperbarui *state* tepat saat proses *render*. React akan menjalankan ulang komponen tersebut dengan *state* yang sudah diperbarui tepat setelah keluar dari *render* pertama sehingga tidak akan memakan banyak ruang (*expensive*).
 
 Berikut ini, kita menyetorkan nilai sebelumnya dari *prop* `row` dalam sebuah *state variable* sehingga kita bisa bandingkan:
 
@@ -458,7 +458,7 @@ Coba hindari pola berikut ini sebisa mungkin.
 
 ### Bisakah saya membuat *ref* pada sebuah komponen fungsi? {#can-i-make-a-ref-to-a-function-component}
 
-Saat Anda seharusnya tidak sering memerlukan hal ini, Anda bisa saja mengekspos beberapa metode perintahpada sebuah *parent component* dengan menggunakan [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle) *Hook*.
+Saat Anda seharusnya tidak sering memerlukan hal ini, Anda bisa saja mengekspos beberapa metode perintah pada sebuah *parent component* dengan menggunakan [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle) *Hook*.
 
 ### Bagaimana cara mengukur *DOM node*? {#how-can-i-measure-a-dom-node}
 
@@ -485,7 +485,7 @@ function MeasureExample() {
 
 Kita tidak memilih `useRef` dalam contoh ini karena sebuah objek *ref* tidak memberitahukan kita tentang *perubahan* pada nilai *ref* yang sekarang. Menggunakan sebuah *callback ref* akan memastikan bahwa [walaupun jika sebuah *child component* menampilkan *node* yang diukur setelah ini](https://codesandbox.io/s/818zzk8m78) (sebagai contoh, dalam respon pada sebuah klik), kita masih akan dapat pemberitahuan tentang hal itu dalam *parent component* dan bisa memperbarui pengukurannya.
 
-Perhatikan bahwa kita mengoper `[]` sebagai sebuah *dependency array* untuk `useCallback`. Ini memastikan bahwa *ref callback* tidak berubah di antara *render* ulang, serta agar React tidak akan memanggilkan tanpa sebab.
+Perhatikan bahwa kita mengoper `[]` sebagai sebuah *dependency array* untuk `useCallback`. Ini memastikan bahwa *ref callback* tidak berubah di antara *render* ulang, serta agar React tidak akan memanggilnya tanpa sebab.
 
 Jika mau, Anda bisa [mengekstrak logika ini](https://codesandbox.io/s/m5o42082xy) ke dalam sebuah Hook yang bisa digunakan ulang:
 
@@ -571,13 +571,13 @@ Tergantung pada kasus penggunaan Anda, terdapat beberapa pilihan lainnya sebagai
 
 >Catatan
 >
->Kami menyediakan aturan *ESLint* [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) sebagai bagian dari *package* [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Itu akan mambantu Anda menemukan komponen yang tidak konsisten menangani pembaruan.
+>Kami menyediakan aturan *ESLint* [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) sebagai bagian dari *package* [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Itu akan membantu Anda menemukan komponen yang tidak konsisten menangani pembaruan.
 
 Mari kita lihat mengapa hal ini penting.
 
 Jika Anda menspesifikasikan sebuah [daftar *dependency*](/docs/hooks-reference.html#conditionally-firing-an-effect) sebagai sebuah argumen terakhir untuk `useEffect`, `useMemo`, `useCallback`, atau `useImperativeHandle`, haruslah termasuk semua nilai yang digunakan di dalamnya yang ikut andil dalam *data flow* React. Itu termasuk *prop, state,* dan apapun yang berasal dari keduanya.
 
-Hal tersebut **hanya akan** aman untuk menghilangkan sebuah fungsi dari daftar *dependency* jika tidak terjadi apa-apa di dalamnya (atau fungsi lain yang terpanggil) yang merujuk pada *prop, state,* atau nilai yang berasl dari keduanya. Contoh berikut memiliki *bug*:
+Hal tersebut **hanya akan** aman untuk menghilangkan sebuah fungsi dari daftar *dependency* jika tidak terjadi apa-apa di dalamnya (atau fungsi lain yang terpanggil) yang merujuk pada *prop, state,* atau nilai yang berasal dari keduanya. Contoh berikut memiliki *bug*:
 
 ```js {5,12}
 function ProductPage({ productId }) {
@@ -596,7 +596,7 @@ function ProductPage({ productId }) {
 }
 ```
 
-**Rekomendasi perbaikannya adalah denganc ara memindahkan fungsi itu _di dalam_ efek yang Anda buat**. Perbaikan tersebut akan memudahkan untuk melihat *prop* atau *state* mana yang efek Anda gunakan, serta memastikan semuanya terdeklarasikan:
+**Rekomendasi perbaikannya adalah dengan cara memindahkan fungsi itu _di dalam_ efek yang Anda buat**. Perbaikan tersebut akan memudahkan untuk melihat *prop* atau *state* mana yang efek Anda gunakan, serta memastikan semuanya terdeklarasikan:
 
 ```js {5-10,13}
 function ProductPage({ productId }) {
@@ -648,7 +648,7 @@ Kita pindahkan fungsi dalam efek tersebut agar fungsi tersebut tidak perlu berad
 function ProductPage({ productId }) {
   // ✅ Dikemas dengan useCallback untuk menghindari berubah tiap kali render
   const fetchProduct = useCallback(() => {
-    // ... Melakukan sesuati dengan productId ...
+    // ... Melakukan sesuatu dengan productId ...
   }, [productId]); // ✅ Semua useCallback dependency terspesifikasikan
 
   return <ProductDetails fetchProduct={fetchProduct} />;
@@ -666,7 +666,7 @@ Perhatikan bahwa pada contoh di atas kita **perlu** untuk menjaga fungsi agar te
 
 ### Apa yang bisa saya lakukan jika *dependency* efek berganti terlalu sering berubah? {#what-can-i-do-if-my-effect-dependencies-change-too-often}
 
-Terkadang, efek Anda bisa jadi menggunakan *state* yang terlalu serung berubah. Anda mungkin berkeinginan untuk menghilangkan *state* itu dari daftar *dependency*, namun biasanya berujung pada *bug*:
+Terkadang, efek Anda bisa jadi menggunakan *state* yang terlalu sering berubah. Anda mungkin berkeinginan untuk menghilangkan *state* itu dari daftar *dependency*, namun biasanya berujung pada *bug*:
 
 ```js {6,9}
 function Counter() {
@@ -685,7 +685,7 @@ function Counter() {
 
 Kumpulan *dependency* yang kosong, `[]`, berarti bahwa efek tersebut hanya akan berjalan satu kali ketika komponen dimuat, dan tidak pada setiap kali *render* ulang. Masalahnya adalah di dalam `setInterval` callback*, nilai `count` tidaklah berubah, karena kita menciptakan sebuah pengakhiran dengan nilai `count` ditetapkan jadi `0` selayaknya ketika efek *callback* berjalan. Tiap detik, *callback* ini kemudian memanggil `setCount(0 + 1)`, jadi hitungan tersebut tidak pernah melebihi 1.
 
-Menspesifikasikan `[count]` sebagai sebauh daftar *dependency* dapat memperbaiki *bug*, tetapi juga bisa menyebabkan interval tersetel ulang (*reset*) pada setiap perubahan. Secara efektif, tiap `setInterval` akan mendapat satu kali kesempatan untuk mengeksekusi sebelum dikosongkan (mirip dengan `setTimeout`). Hal itu mungkin saja tidak diinginkan. Untuk memperbaikinya, kita bisa gunakan [bentuk pembaruan fungsional pada `setState`](/docs/hooks-reference.html#functional-updates). Hal tersebut membiarkan kita mespesifikasikan *bagaimana* *state* perlu berubah tanpa merujuk pada *state* yang *sekarang*:
+Menspesifikasikan `[count]` sebagai sebauh daftar *dependency* dapat memperbaiki *bug*, tetapi juga bisa menyebabkan interval tersetel ulang (*reset*) pada setiap perubahan. Secara efektif, tiap `setInterval` akan mendapat satu kali kesempatan untuk mengeksekusi sebelum dikosongkan (mirip dengan `setTimeout`). Hal itu mungkin saja tidak diinginkan. Untuk memperbaikinya, kita bisa gunakan [bentuk pembaruan fungsional pada `setState`](/docs/hooks-reference.html#functional-updates). Hal tersebut membiarkan kita menspesifikasikan *bagaimana* *state* perlu berubah tanpa merujuk pada *state* yang *sekarang*:
 
 ```js {6,9}
 function Counter() {
@@ -696,7 +696,7 @@ function Counter() {
       setCount(c => c + 1); // ✅ Ini tidak bergantung pada variabel `count` di luar,
     }, 1000);
     return () => clearInterval(id);
-  }, []); // ✅ Efek kita tidak menggunakan *variabel* apapun dalam lingkup componentW in the component scope
+  }, []); // ✅ Efek kita tidak menggunakan *variabel* apapun dalam lingkup komponen
 
   return <h1>{count}</h1>;
 }
@@ -706,9 +706,9 @@ function Counter() {
 
 Sekarang, `setInterval` callback* mengeksekusi satu kali tiap detik, namun tiap yang ada di dalamnya memanggil `setCount` bisa menggunakan nilai yang terbaru untuk `count` (disebut `c` dalam *callback* disini.)
 
-Dalam kasus-kasus yang lebih kompleks lagi (seperti halnya jika satu *state* bergantung pada *state*), cobalah untuk memindahkan logika pembaruan *state* keluar efek tersebut menggunakan [`useReducer` Hook*](/docs/hooks-reference.html#usereducer). [Artikel ini](https://adamrackis.dev/state-and-use-reducer/) menawarkan sebuah contoh bagaimna Anda daoat melakukan hal berikut ini. **Indentitas fungsi _`dispatch`_ dari _`useReducer`_ itu selalu stabil** — meskipun jika fungsi pengurangan (*reducer*) dideklarasikan dalam komponen serta membaca *prop*-nya.
+Dalam kasus-kasus yang lebih kompleks lagi (seperti halnya jika satu *state* bergantung pada *state*), cobalah untuk memindahkan logika pembaruan *state* keluar efek tersebut menggunakan [`useReducer` Hook*](/docs/hooks-reference.html#usereducer). [Artikel ini](https://adamrackis.dev/state-and-use-reducer/) menawarkan sebuah contoh bagaimana Anda daoat melakukan hal berikut ini. **Indentitas fungsi _`dispatch`_ dari _`useReducer`_ itu selalu stabil** — meskipun jika fungsi pengurangan (*reducer*) dideklarasikan dalam komponen serta membaca *prop*-nya.
 
-Sebagai pilihan terakhir, jika Anda ingin sesuatu seperti `this` dalam sebuah, Anda bisa bisa [gunakan *ref*](/docs/hooks-faq.html#is-there-something-like-instance-variables) untuk menahan sebuah variabel yang berubah-ubah. Kemudian Anda bisa menulis dan membacanya. Contohny:
+Sebagai pilihan terakhir, jika Anda ingin sesuatu seperti `this` dalam sebuah kelas, Anda bisa [gunakan *ref*](/docs/hooks-faq.html#is-there-something-like-instance-variables) untuk menahan sebuah variabel yang berubah-ubah. Kemudian Anda bisa menulis dan membacanya. Contohnya:
 
 ```js {2-6,10-11,16}
 function Example(props) {
@@ -758,7 +758,7 @@ Kode ini memanggil `computeExpensiveValue(a, b)`. Tapi jika *dependency* `[a, b]
 
 Ingat bahwa fungsi tersebut dioper ke `useMemo` berjalan selama proses *render*. Jangan lakukan hal apapun yang tidak se-normalnya Anda lakukan ketika proses *render*. Sebagai contoh, efek samping (*side effect*) sudah seharusnya berada dalam `useEffect`, bukan `useMemo`.
 
-**Anda bisa jadi mengandalkan _`useMemo`_ sebagai salah satu optimasi performa, bukan sebagai jeminan _semantic_.** Di masa yang akan datang, React bisa saja memilih untuk *"forget"* beberapa nilai-nilai hasil *memoize* sebelumnya dan menghitung ulang pada *render* selanjutnya, contohnya untuk mengosongkan memori dari komponen-komponen *offscreen*. Tulis kode Anda agar kode tersebut dapat terus berjalan tanpa `useMemo` — dan menambahkannya ke performa yang teroptimasi. (Untuk kasus yang langka ketika sebuah nilai harus *tidak pernah* dikomputasi ulang, Anda bisa [menginisiasi secara *lazy* *(initialize lazily)*](#how-to-create-expensive-objects-lazily) sebuah *ref*.)
+**Anda bisa jadi mengandalkan _`useMemo`_ sebagai salah satu optimasi performa, bukan sebagai jaminan _semantic_.** Di masa yang akan datang, React bisa saja memilih untuk *"forget"* beberapa nilai-nilai hasil *memoize* sebelumnya dan menghitung ulang pada *render* selanjutnya, contohnya untuk mengosongkan memori dari komponen-komponen *offscreen*. Tulis kode Anda agar kode tersebut dapat terus berjalan tanpa `useMemo` — dan menambahkannya ke performa yang teroptimasi. (Untuk kasus yang langka ketika sebuah nilai harus *tidak pernah* dikomputasi ulang, Anda bisa [menginisiasi secara *lazy* *(initialize lazily)*](#how-to-create-expensive-objects-lazily) sebuah *ref*.)
 
 Dengan mudah, `useMemo` juga memperbolehkan Anda untuk melewatkan sebuah *render* ulang yang *expensive* pada sebuah turunan (*child*):
 
@@ -777,11 +777,11 @@ function Parent({ a, b }) {
 }
 ```
 
-Perhatikan bahwa pendekatan ini tidak akan berhasil dalam sebuah pengulangan (*loop*) karena penggilan *Hook* [tidak bisa](/docs/hooks-rules.html) digantikan di dalam *loop*. Tapi Anda bisa mengekstrak komponen yang terpisah untuk daftar *item*, dan memanggil `useMemo` di sana.
+Perhatikan bahwa pendekatan ini tidak akan berhasil dalam sebuah pengulangan (*loop*) karena panggilan *Hook* [tidak bisa](/docs/hooks-rules.html) digantikan di dalam *loop*. Tapi Anda bisa mengekstrak komponen yang terpisah untuk daftar *item*, dan memanggil `useMemo` di sana.
 
 ### Bagaimana cara membuat objek *expensive* secara *lazy*? {#how-to-create-expensive-objects-lazily}
 
-`useMemo` mengizinkan Anda untuk [me-*memoize* sebuah perhitungan yang *expensive*](#how-to-memoize-calculations) jika *dependency*-nya sama. Bagiamanapun, itu hanya berfungsi sebagai sebuah penanda, dan tidak *menjamin* komputasi tersebut tidak akan diulang. Tapi terkadang Anda harus memastikan sebuah objek hanya diciptakan sekali.
+`useMemo` mengizinkan Anda untuk [me-*memoize* sebuah perhitungan yang *expensive*](#how-to-memoize-calculations) jika *dependency*-nya sama. Bagimanapun, itu hanya berfungsi sebagai sebuah penanda, dan tidak *menjamin* komputasi tersebut tidak akan diulang. Tapi terkadang Anda harus memastikan sebuah objek hanya diciptakan sekali.
 
 **Kasus penggunaan pertama yang umum yakni ketika menciptakan sebuah _initial state_ itu _expensive_:**
 
@@ -841,15 +841,15 @@ Ini menghindari pembuatan objek yang *expensive* hingga objek tersebut benar-ben
 
 Tidak. Dalam peramban-peramban modern, performa kasar penutupan (*closure*) dibandingkan dengan kelas tidaklah berbeda secara signifikan kecuali dalam skenario-skenario ekstrim.
 
-Sebagai tambahan, pertimbangkan bahwa desain *Hooks* itu lebih efision dalam beberapa hal:
+Sebagai tambahan, pertimbangkan bahwa desain *Hooks* itu lebih efisien dalam beberapa hal:
 
 * *Hooks* menghindari banyak awalan yang kelas butuhkan, seperti ongkos untuk membuat contoh kelas dan mengikat *event handler* di dalam konstruktor.
 
-* **Kode idiomatis yang menggunakan _Hooks_ tidak memerlukan _nesting_ pohon komponen mendalam** yang  lazim dalam basis kode yang mana menggunakan *higher-order component*, *render props*, dan *context*. Dengan pohon komponen yang lebih kecil, React jadi punya lebih sedikit tugas untuk dikerjakan.
+* **Kode idiomatis yang menggunakan _Hooks_ tidak memerlukan _nesting_ pohon komponen mendalam** yang lazim dalam basis kode yang mana menggunakan *higher-order component*, *render props*, dan *context*. Dengan pohon komponen yang lebih kecil, React jadi punya lebih sedikit tugas untuk dikerjakan.
 
-Secara tradisional, performa menyangkut seputarfugsi-fungsi *inline* React sudah dihubungkan dengan bagaimana cara untuk mengoper *callback* baru setiap *render* yang memotong optimasi `shouldComponentUpdate` dalam komponen turunan. *Hooks* mendekati masalah dari tiga sisi.
+Secara tradisional, performa menyangkut seputar fugsi-fungsi *inline* React sudah dihubungkan dengan bagaimana cara untuk mengoper *callback* baru setiap *render* yang memotong optimasi `shouldComponentUpdate` dalam komponen turunan. *Hooks* mendekati masalah dari tiga sisi.
 
-* *Hook* [`useCallback`](/docs/hooks-reference.html#usecallback) mengizinkan Anda untuk tetap menggunakan rujukan *callback* yang samadi antara *render* ulang sehingga `shouldComponentUpdate` akan terus bekerja:
+* *Hook* [`useCallback`](/docs/hooks-reference.html#usecallback) mengizinkan Anda untuk tetap menggunakan rujukan *callback* yang sama di antara *render* ulang sehingga `shouldComponentUpdate` akan terus bekerja:
 
     ```js {2}
     // Tidak akan berubah kecuali `a` atau `b` berubah
@@ -858,7 +858,7 @@ Secara tradisional, performa menyangkut seputarfugsi-fungsi *inline* React sudah
     }, [a, b]);
     ```
 
-* *Hook* [`useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations) membuat jadi lebih mudah untuk untuk mengontrol ketika ada satu-satu pembaruan turunan (*children*), mengurangi kebutuhan untuk komponen murni.
+* *Hook* [`useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations) membuat jadi lebih mudah untuk mengontrol ketika ada satu-satu pembaruan turunan (*children*), mengurangi kebutuhan untuk komponen murni.
 
 * Pada akhirnya, *Hook* [`useReducer`](/docs/hooks-reference.html#usereducer) mengurangi kebutuhan untuk mengoper *callback* secara mendalam, seperti yang dijelaskan di bawah ini.
 
@@ -872,7 +872,7 @@ Dalam pohon komponen yang luas, sebuah alternatif yang kami rekomendasikan adala
 const TodosDispatch = React.createContext(null);
 
 function TodosApp() {
-  // Catatan: `dispatch` tidak akan berubah di anatra render ulang
+  // Catatan: `dispatch` tidak akan berubah di antara render ulang
   const [todos, dispatch] = useReducer(todosReducer);
 
   return (
@@ -986,7 +986,7 @@ Terdapat daftar internal dari *"memory cells"* yang berhubungkan dengan tiap kom
 
 *Hooks* mempersatukan ide-ide dari beberapa sumber berbeda:
 
-* Ekspirimen lama kami dengan API fungsional dalam repositori[*react-future*](https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State).
+* Eksperimen lama kami dengan API fungsional dalam repositori[*react-future*](https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State).
 * Eksperimen-eksperimen komunitas React dengan me-*render prop API*, termasuk [Reactions Component](https://github.com/reactions/component) dari [Ryan Florence](https://github.com/ryanflorence).
 * Pengajuan [kata kunci `adopt`](https://gist.github.com/trueadm/17beb64288e30192f3aa29cad0218067) dari [Dominic Gannaway](https://github.com/trueadm) sebagai *sugar syntax* untuk me-*render* *prop*.
 * *State variable* dan *state cell* dalam [DisplayScript](http://displayscript.org/introduction.html).

From 66e906a993e25e9e9e48f1994102bbaa622d246b Mon Sep 17 00:00:00 2001
From: dummyeuy <ghalib12.euy16@gmail.com>
Date: Thu, 31 Oct 2019 07:58:12 +0700
Subject: [PATCH 07/14] applied minor revisions according to
 https://github.com/reactjs/id.reactjs.org/pull/125#discussion_r340536367

---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 36181daeb..1f0165a88 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -12,7 +12,7 @@ redirect_from:
   - "docs/jsx-in-depth-zh-CN.html"
   - "docs/jsx-in-depth-ko-KR.html"
 ---
-<!-- This jsx-in-depth.md` is translated by dummyeuy (Muhammad Ghalib) -->
+
 Pada dasarnya, JSX hnaya menyediakan sintaksis-sintaksis yang mudah ditulis dan dimengerti (*syntatic sugar*) untuk fungsi *`React.createElement(component, prop, ...children)`*. Kode JSX:
 
 ```js

From a1a815e04ee822d040f830bc1bbddc5aeb636ed5 Mon Sep 17 00:00:00 2001
From: dummyeuy <ghalib12.euy16@gmail.com>
Date: Tue, 12 Nov 2019 11:56:50 +0700
Subject: [PATCH 08/14] Change the hooks-faq.md back to its default/original
 and revised some minor typos in jsx-in-depth. So this commint/PR will focus
 on JSX-in-depth.md according to
 https://github.com/reactjs/id.reactjs.org/pull/125#issuecomment-551431639

---
 .eslintignore                                |   5 +-
 .gitignore                                   |   3 +-
 content/docs/hooks-faq.md                    | 615 ++++++++++---------
 content/docs/jsx-in-depth.md                 |   2 +-
 src/components/CodeEditor/CodeEditor copy.js | 369 +++++++++++
 5 files changed, 685 insertions(+), 309 deletions(-)
 create mode 100644 src/components/CodeEditor/CodeEditor copy.js

diff --git a/.eslintignore b/.eslintignore
index 942541715..944e2765e 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -7,4 +7,7 @@ content/*
 public/*
 
 # Ignore examples
-examples/*
\ No newline at end of file
+examples/*
+
+# Ignore all javascript files in src folder for translation purposes
+src/components/*
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index d1bde99ce..420e5874f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@
 .idea
 node_modules
 public
-yarn-error.log
\ No newline at end of file
+yarn-error.log
+.vscode
\ No newline at end of file
diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index 4d5ba61ab..9034ed817 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -5,12 +5,12 @@ permalink: docs/hooks-faq.html
 prev: hooks-reference.html
 ---
 
-*Hooks* adalah tambahan baru dalam React 16.8. React memungkinkan anda untuk menggunakan *state* dan fitur-fitur React lainnya tanpa perlu menuliskan sebuah kelas. 
+*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
 
-Laman ini menjawab beberapa pertanyaan yang sering diajukan (*frequently asked questions*) tentang [*Hooks*](/docs/hooks-overview.html).
+This page answers some of the frequently asked questions about [Hooks](/docs/hooks-overview.html).
 
 <!--
-  jika Anda perlu me-rgenerate ini, snippet dalam konsol devtools ini bisa membantu:
+  if you ever need to regenerate this, this snippet in the devtools console might help:
 
   $$('.anchor').map(a =>
     `${' '.repeat(2 * +a.parentNode.nodeName.slice(1))}` +
@@ -18,50 +18,50 @@ Laman ini menjawab beberapa pertanyaan yang sering diajukan (*frequently asked q
   ).join('\n')
 -->
 
-* **[Strategi Adopsi](#adoption-strategy)**
-  * [Versi React mana yang termasuk *Hooks* di dalamnya?](#which-versions-of-react-include-hooks)
-  * [Apakah perlu menulis ulang semua komponen kelas saya?](#do-i-need-to-rewrite-all-my-class-components)
-  * [Apa yang dapat saya lakukan dengan *Hooks* namun tidak bisa saya lakukan dengan kelas?](#what-can-i-do-with-hooks-that-i-couldnt-with-classes)
-  * [Seberapa banyak pengetahuan saya tentang React yang tetap relevan?](#how-much-of-my-react-knowledge-stays-relevant)
-  * [Haruskah saya menggunakan Hooks, kelas atau gabungan keduanya?](#should-i-use-hooks-classes-or-a-mix-of-both)
-  * [Apakah *Hooks* mencakup seluruh kasus yang digunakan untuk kelas?](#do-hooks-cover-all-use-cases-for-classes)
-  * [Apakah *Hooks* menggantikan *render props* dan *higher-order components*?](#do-hooks-replace-render-props-and-higher-order-components)
-  * [Apa yang *Hooks* peruntukan untuk API populer seperti *Redux connect()* dan *React router*?](#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router)
-  * [Apakah *Hooks* dapat berjalan dengan *static typing*?](#do-hooks-work-with-static-typing)
-  * [Bagaimana cara menguji komponen-komponen yang menggunakan Hooks?](#how-to-test-components-that-use-hooks)
-  * [Apa yang sebenarnya aturan-aturan *lint* terapkan?](#what-exactly-do-the-lint-rules-enforce)
-* **[Dari Kelas ke Hooks](#from-classes-to-hooks)**
-  * [Bagaimana cara *lifecycle method* dapat sesuai dengan Hooks?](#how-do-lifecycle-methods-correspond-to-hooks)
-  * [Bagaimana cara saya dapat memperoleh data dengan Hooks?](#how-can-i-do-data-fetching-with-hooks)
-  * [Apakah ada hal seperti *instance variable*?](#is-there-something-like-instance-variables)
-  * [Apa saya harus menggunakan satu atau beberapa *state variable*?](#should-i-use-one-or-many-state-variables)
-  * [Bisakah saya menjalakan sebuah efek hanya pada pembaruan?](#can-i-run-an-effect-only-on-updates)
-  * [Bagimana cara untuk mendapatkan kembali *prop* atau *state* sebelumnya?](#how-to-get-the-previous-props-or-state)
-  * [Mengapa saya melihat *stale prop* atau *state* dalam fungsi yang saya buat?](#why-am-i-seeing-stale-props-or-state-inside-my-function)
-  * [Bagaimana cara mengimplementasikan *getDerivedStateFromProps*?](#how-do-i-implement-getderivedstatefromprops)
-  * [Apakah ada suatu hal seperti *forceUpdate*?](#is-there-something-like-forceupdate)
-  * [Bisakah saya membuat sebuah *ref* pada sebuah komponen fungsi?](#can-i-make-a-ref-to-a-function-component)
-  * [Bagaimana cara mengukur sebuah node *DOM*](#how-can-i-measure-a-dom-node)
-  * [Apa yang dimaksud dengan *const [thing, setThing] = useState()*?](#what-does-const-thing-setthing--usestate-mean)
-* **[Optimasi Performa](#performance-optimizations)**
-  * [Bisakah saya melewatkan sebuah efek pada pembaruan?](#can-i-skip-an-effect-on-updates)
-  * [Apakah aman untuk menghilangkan fungsi dari daftar *dependency*?](#is-it-safe-to-omit-functions-from-the-list-of-dependencies)
-  * [Apa yang bisa saya lakukan jika efek *dependency* berganti terlalu sering?](#what-can-i-do-if-my-effect-dependencies-change-too-often)
-  * [Bagaimana cara mengimplementasikan *shouldComponentUpdate*?](#how-do-i-implement-shouldcomponentupdate)
-  * [Bagaimana cara *memoize* perhitungan?](#how-to-memoize-calculations)
-  * [Bagaimana cara membuat objek *expensive* secara *lazy*?](#how-to-create-expensive-objects-lazily)
-  * [Apakah *Hooks* lamban karena membuat fungsi di saat *render*?](#are-hooks-slow-because-of-creating-functions-in-render)
-  * [Bagaimana cara menghindari pengoperan *callback* menjadi *down*?](#how-to-avoid-passing-callbacks-down)
-  * [Bagimana cara membaca sebuah nilai yang sering berubah dari *useCallback*?](#how-to-read-an-often-changing-value-from-usecallback)
-* **[*Under the Hood*](#under-the-hood)**
-  * [Bagaimana React menghubungkan panggilan *Hook* dengan komponen?](#how-does-react-associate-hook-calls-with-components)
-  * [Bagaimana *seni awal*-nya *Hooks*?](#what-is-the-prior-art-for-hooks)
-
-## Strategi Adopsi {#adoption-strategy}
-
-### Versi React mana yang termasuk *Hooks* di dalamnya? {#which-versions-of-react-include-hooks}
-
-Mulai dari 16.8.0, implementasi stabil dari React Hooks sudah tersedia untuk:
+* **[Adoption Strategy](#adoption-strategy)**
+  * [Which versions of React include Hooks?](#which-versions-of-react-include-hooks)
+  * [Do I need to rewrite all my class components?](#do-i-need-to-rewrite-all-my-class-components)
+  * [What can I do with Hooks that I couldn't with classes?](#what-can-i-do-with-hooks-that-i-couldnt-with-classes)
+  * [How much of my React knowledge stays relevant?](#how-much-of-my-react-knowledge-stays-relevant)
+  * [Should I use Hooks, classes, or a mix of both?](#should-i-use-hooks-classes-or-a-mix-of-both)
+  * [Do Hooks cover all use cases for classes?](#do-hooks-cover-all-use-cases-for-classes)
+  * [Do Hooks replace render props and higher-order components?](#do-hooks-replace-render-props-and-higher-order-components)
+  * [What do Hooks mean for popular APIs like Redux connect() and React Router?](#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router)
+  * [Do Hooks work with static typing?](#do-hooks-work-with-static-typing)
+  * [How to test components that use Hooks?](#how-to-test-components-that-use-hooks)
+  * [What exactly do the lint rules enforce?](#what-exactly-do-the-lint-rules-enforce)
+* **[From Classes to Hooks](#from-classes-to-hooks)**
+  * [How do lifecycle methods correspond to Hooks?](#how-do-lifecycle-methods-correspond-to-hooks)
+  * [How can I do data fetching with Hooks?](#how-can-i-do-data-fetching-with-hooks)
+  * [Is there something like instance variables?](#is-there-something-like-instance-variables)
+  * [Should I use one or many state variables?](#should-i-use-one-or-many-state-variables)
+  * [Can I run an effect only on updates?](#can-i-run-an-effect-only-on-updates)
+  * [How to get the previous props or state?](#how-to-get-the-previous-props-or-state)
+  * [Why am I seeing stale props or state inside my function?](#why-am-i-seeing-stale-props-or-state-inside-my-function)
+  * [How do I implement getDerivedStateFromProps?](#how-do-i-implement-getderivedstatefromprops)
+  * [Is there something like forceUpdate?](#is-there-something-like-forceupdate)
+  * [Can I make a ref to a function component?](#can-i-make-a-ref-to-a-function-component)
+  * [How can I measure a DOM node?](#how-can-i-measure-a-dom-node)
+  * [What does const [thing, setThing] = useState() mean?](#what-does-const-thing-setthing--usestate-mean)
+* **[Performance Optimizations](#performance-optimizations)**
+  * [Can I skip an effect on updates?](#can-i-skip-an-effect-on-updates)
+  * [Is it safe to omit functions from the list of dependencies?](#is-it-safe-to-omit-functions-from-the-list-of-dependencies)
+  * [What can I do if my effect dependencies change too often?](#what-can-i-do-if-my-effect-dependencies-change-too-often)
+  * [How do I implement shouldComponentUpdate?](#how-do-i-implement-shouldcomponentupdate)
+  * [How to memoize calculations?](#how-to-memoize-calculations)
+  * [How to create expensive objects lazily?](#how-to-create-expensive-objects-lazily)
+  * [Are Hooks slow because of creating functions in render?](#are-hooks-slow-because-of-creating-functions-in-render)
+  * [How to avoid passing callbacks down?](#how-to-avoid-passing-callbacks-down)
+  * [How to read an often-changing value from useCallback?](#how-to-read-an-often-changing-value-from-usecallback)
+* **[Under the Hood](#under-the-hood)**
+  * [How does React associate Hook calls with components?](#how-does-react-associate-hook-calls-with-components)
+  * [What is the prior art for Hooks?](#what-is-the-prior-art-for-hooks)
+
+## Adoption Strategy {#adoption-strategy}
+
+### Which versions of React include Hooks? {#which-versions-of-react-include-hooks}
+
+Starting with 16.8.0, React includes a stable implementation of React Hooks for:
 
 * React DOM
 * React Native
@@ -69,83 +69,86 @@ Mulai dari 16.8.0, implementasi stabil dari React Hooks sudah tersedia untuk:
 * React Test Renderer
 * React Shallow Renderer
 
-Perhatikan bahwa **untuk menjalankan Hooks, semua *package* React perlu setidaknya pada versi 16.8.0 atau lebih tinggi**. *Hooks* tidak akan bekerja jika Anda lupa melakukan pembaruan, sebagai contohnya, React *DOM*.
+Note that **to enable Hooks, all React packages need to be 16.8.0 or higher**. Hooks won't work if you forget to update, for example, React DOM.
 
-[React Native 0.59](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059) dan versi di atasnya sudah mendukung Hooks.
+[React Native 0.59](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059) and above support Hooks.
 
-### Apakah perlu menulis ulang semua komponen kelas saya?{#do-i-need-to-rewrite-all-my-class-components}
+### Do I need to rewrite all my class components? {#do-i-need-to-rewrite-all-my-class-components}
 
-Tidak. [Tidak ada rencana](/docs/hooks-intro.html#gradual-adoption-strategy) untuk menghilangkan kelas dari React -- kita semua perlu mengirimkan produk baru dan tidak memiliki waktu untuk penulisan ulang. Kami rekomendasikan untuk mencoba *Hooks* dalam kode baru.
+No. There are [no plans](/docs/hooks-intro.html#gradual-adoption-strategy) to remove classes from React -- we all need to keep shipping products and can't afford rewrites. We recommend trying Hooks in new code.
 
-### Apa yang dapat saya lakukan dengan *Hooks* namun tidak bisa saya lakukan dengan kelas? {#what-can-i-do-with-hooks-that-i-couldnt-with-classes}
+### What can I do with Hooks that I couldn't with classes? {#what-can-i-do-with-hooks-that-i-couldnt-with-classes}
 
-Hooks menawarkan sebuah cara baru yang kuat dan ekpresif untuk menggunakan kembali fungsionalitas antara komponen. ["Buat Hooks-mu Sendiri"](/docs/hooks-custom.html) menyajikan sekilas apa saja yang mungkin dilakukan. [Artikel ini](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889), oleh seorang anggota inti tim React, menyelam lebih dalam lagi kemampuan-kemampuan baru yang dibuka oleh Hooks.
+Hooks offer a powerful and expressive new way to reuse functionality between components. ["Building Your Own Hooks"](/docs/hooks-custom.html) provides a glimpse of what's possible. [This article](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) by a React core team member dives deeper into the new capabilities unlocked by Hooks.
 
-### Seberapa banyak pengetahuan saya tentang React yang tetap relevan? {#how-much-of-my-react-knowledge-stays-relevant}
+### How much of my React knowledge stays relevant? {#how-much-of-my-react-knowledge-stays-relevant}
 
-Hooks adalah cara yang lebih langsung untuk menggunakan fitur-fitur React yang sudah Anda ketahui -- seperti *state, lifecycle, context,* dan *ref*. Hal-hal tersebut tidak secara mendasar merubah bagaimana React bekerja, dan pengetahuan Anda tentang komponen, *props*, dan *top-down data flow* tetaplah relevan.
+Hooks are a more direct way to use the React features you already know -- such as state, lifecycle, context, and refs. They don't fundamentally change how React works, and your knowledge of components, props, and top-down data flow is just as relevant.
 
-Hooks memiliki sebuah alur kurva pembelajarannya sendiri. Jika terdapat sesuatu yang hilang dalam dokumentasi ini, [ajukan isu](https://github.com/reactjs/reactjs.org/issues/new) dan kami akan coba membantu.
+Hooks do have a learning curve of their own. If there's something missing in this documentation, [raise an issue](https://github.com/reactjs/reactjs.org/issues/new) and we'll try to help.
 
-### Haruskah saya menggunakan Hooks, kelas atau gabungan keduanya?{#should-i-use-hooks-classes-or-a-mix-of-both}
+### Should I use Hooks, classes, or a mix of both? {#should-i-use-hooks-classes-or-a-mix-of-both}
 
-Ketika Anda siap, kami menganjurkan Anda untuk mulai mencoba *Hooks* dalam komponen-komponen baru yang Anda tulis. Pastikan setiap orang dalam tim Anda siap dan tidak asing dengan dokumentasi ini. Kami tidak merekomendasikan menulis ulang kelas-kelas Anda yang sudah ada ke *Hooks* kecuali Anda sudah berencana menulis ulang (seperti, memperbaiki *bug*).
+When you're ready, we'd encourage you to start trying Hooks in new components you write. Make sure everyone on your team is on board with using them and familiar with this documentation. We don't recommend rewriting your existing classes to Hooks unless you planned to rewrite them anyway (e.g. to fix bugs).
 
-Anda tidak bisa menggunakan *Hooks* *di dalam* sebuah komponen kelas, tetapi Anda bisa mencampurkan komponen kelas dan fungsi dengan *Hooks* dalam sebuah tatanan. Tak peduli apakah sebuah komponen adalah kelas atau fungsi yang menggunakan Hooks, itu semua adalah implementasi rinci dari komponen tersebut. Dalam jangka waktu panjang, kami harap *Hooks* menjadi cara utama semua orang untuk menulis komponen React.
+You can't use Hooks *inside* of a class component, but you can definitely mix classes and function components with Hooks in a single tree. Whether a component is a class or a function that uses Hooks is an implementation detail of that component. In the longer term, we expect Hooks to be the primary way people write React components.
 
-### Apakah *Hooks* mencakup seluruh kasus yang digunakan untuk kelas? {#do-hooks-cover-all-use-cases-for-classes}
+### Do Hooks cover all use cases for classes? {#do-hooks-cover-all-use-cases-for-classes}
 
-Tujuan kami untuk *Hooks* yakni mencakup seluruh kasus yang digunakan untuk kelas sesegera mungkin. Tidak ada persamaan (*equivalent*) *Hooks* untuk *lifecyle* yang tidak umum seperti `getSnapshotBeforeUpdate` dan `componentDidCatch` sementara ini, namun kami berencana untuk menambahkannya segera.
+Our goal is for Hooks to cover all use cases for classes as soon as possible. There are no Hook equivalents to the uncommon `getSnapshotBeforeUpdate` and `componentDidCatch` lifecycles yet, but we plan to add them soon.
 
-Sekarang adalah masa-masa awal untuk Hooks, dan *library* pihak ketiga bisa jadi tidak kompatibel dengan *Hooks* saat ini.
+It is an early time for Hooks, and some third-party libraries might not be compatible with Hooks at the moment.
 
-### Apakah *Hooks* menggantikan *render props* dan *higher-order components*? {#do-hooks-replace-render-props-and-higher-order-components}
+### Do Hooks replace render props and higher-order components? {#do-hooks-replace-render-props-and-higher-order-components}
 
-Seringkali, *render props* dan *higher-order components* hanya (me)*render* sebuah turunan. Kami pikir *Hooks* adalah cara yang lebih sederhana untuk menyajikan kasus penggunaan ini. Masih ada tempat untuk kedua pola (contohnya, sebuah *virtual scroller component* bisa saja memiliki sebuah *prop* `renderItem`, atau sebuah *visual container component* bisa saja memiliki struktur *DOM*-nya sendiri). Namun dalam banyak kasus, *Hooks* sudahlah cukup dan akan membantu mengurangi *nesting* dalam tatanan Anda.
+Often, render props and higher-order components render only a single child. We think Hooks are a simpler way to serve this use case. There is still a place for both patterns (for example, a virtual scroller component might have a `renderItem` prop, or a visual container component might have its own DOM structure). But in most cases, Hooks will be sufficient and can help reduce nesting in your tree.
 
-### Apa yang *Hooks* peruntukan untuk API populer seperti *Redux `connect()` dan *React router*? {#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router}
+### What do Hooks mean for popular APIs like Redux `connect()` and React Router? {#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router}
 
-Anda dapat terus menggunakan *API* yang sama seperti yang selama ini dilakukan; *API* tersebut akan tetap bekerja.
+You can continue to use the exact same APIs as you always have; they'll continue to work.
 
-React Redux sejak versi v7.1.0 [mendukung API Hooks](https://react-redux.js.org/api/hooks) dan memaparkan *Hooks* seperti `useDispatch` atau `useSelector`.
+React Redux since v7.1.0 [supports Hooks API](https://react-redux.js.org/api/hooks) and exposes hooks like `useDispatch` or `useSelector`.
 
-*Library* seperti React Router akan mendukung *Hooks* di masa yang akan datang.
+React Router [supports hooks](https://reacttraining.com/react-router/web/api/Hooks) since v5.1.
 
-### Apakah *Hooks* dapat berjalan dengan *static typing*?{#do-hooks-work-with-static-typing}
+Other libraries might support hooks in the future too.
 
-*Hooks* didesain dengan *static typing* pada dasarnya. Karena hal-hal tersebut adalah fungsi, *static typing* lebih mudah ditulis dengan benar daripada pola-pola seperti *higher-order components*. Definisi *Flow* dan *TypeScript React* untuk React sudah mendukung untuk React Hooks di dalamnya.
+### Do Hooks work with static typing? {#do-hooks-work-with-static-typing}
 
-Penting untuk diingat, *custom Hooks* memberikan Anda kewenangan untuk memaksa *API* React jika Anda ingin menuliskannya dengan lebih ketat dalam beberapa hal. React memberikan Anda *primitives*, tapi Anda bisa menggabungkannya dengan cara-cara lain yang unik selain dari yang kami sediakan untuk Anda.
+Hooks were designed with static typing in mind. Because they're functions, they are easier to type correctly than patterns like higher-order components. The latest Flow and TypeScript React definitions include support for React Hooks.
 
-### Bagaimana cara menguji komponen-komponen yang menggunakan Hooks? {#how-to-test-components-that-use-hooks}
+Importantly, custom Hooks give you the power to constrain React API if you'd like to type them more strictly in some way. React gives you the primitives, but you can combine them in different ways than what we provide out of the box.
 
-Dari sudut pandang React, sebuah komponen yang menggunakan *Hooks* hanyalah sekedar komponen biasa. Jika solusi *testing* Anda tidak bergantung pada fitur-fitur di dalam React, menguji komponen dengan *Hooks* tidak akan berbeda halnya dengan uji komponen yang normalnya Anda lakukan.
+### How to test components that use Hooks? {#how-to-test-components-that-use-hooks}
 
->Catatan
+From React's point of view, a component using Hooks is just a regular component. If your testing solution doesn't rely on React internals, testing components with Hooks shouldn't be different from how you normally test components.
+
+>Note
 >
->[Testing Recipes](/docs/testing-recipes.html) memuat banyak contoh yang bisa Anda salin dan terapkan.
+>[Testing Recipes](/docs/testing-recipes.html) include many examples that you can copy and paste.
 
-Sebagai contoh, umpamakan kita memiliki komponen penghitung (*counter*) berikut:
+For example, let's say we have this counter component:
 
 ```js
 function Example() {
   const [count, setCount] = useState(0);
   useEffect(() => {
-    document.title = `Anda meng-klik sebanyak ${count} kali`;
+    document.title = `You clicked ${count} times`;
   });
   return (
     <div>
-      <p>Anda meng-klik sebanyak {count} kali</p>
+      <p>You clicked {count} times</p>
       <button onClick={() => setCount(count + 1)}>
-        Klik saya
+        Click me
       </button>
     </div>
   );
 }
 ```
-Kami akan mengujinya dengan React DOM. Pastikan bahwa perilakunya dengan yang terjadi di peramban, kami akan mengemas proses *rendering* kode dan memperbaruinya ke dalam [`ReactTestUtils.act()`](/docs/test-utils.html#act) beberapa pemanggilan:
 
-```js {3,20-22,29-31}
+We'll test it using React DOM. To make sure that the behavior matches what happens in the browser, we'll wrap the code rendering and updating it into [`ReactTestUtils.act()`](/docs/test-utils.html#act) calls:
+
+```js{3,20-22,29-31}
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
@@ -163,71 +166,71 @@ afterEach(() => {
   container = null;
 });
 
-it('bisa me-render dan memperbarui sebuah counter', () => {
-  // Uji render dan efek pertama
+it('can render and update a counter', () => {
+  // Test first render and effect
   act(() => {
     ReactDOM.render(<Counter />, container);
   });
   const button = container.querySelector('button');
   const label = container.querySelector('p');
-  expect(label.textContent).toBe('Anda meng-klik 0 kali');
-  expect(document.title).toBe('Anda meng-klik 0 kali');
+  expect(label.textContent).toBe('You clicked 0 times');
+  expect(document.title).toBe('You clicked 0 times');
 
-  // Uji render dan efek kedua
+  // Test second render and effect
   act(() => {
     button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
   });
-  expect(label.textContent).toBe('Anda meng-klik 1 kali');
-  expect(document.title).toBe('Anda meng-klik 1 kali');
+  expect(label.textContent).toBe('You clicked 1 times');
+  expect(document.title).toBe('You clicked 1 times');
 });
 ```
 
-Pemanggilan `act()` juga akan menghilangkan efek di dalamnya.
+The calls to `act()` will also flush the effects inside of them.
 
-Jika perlu menguji sebuah *custom Hook*, Anda bisa melakukannya dengan cara membuat sebuah komponen dalam pengujian Anda, dan gunakan Hook dari situ. Kemudian Anda bisa menguji komponen yang Anda tulis.
+If you need to test a custom Hook, you can do so by creating a component in your test, and using your Hook from it. Then you can test the component you wrote.
 
-Untuk mengurangi terjadinya *boilerplate*, kami rekomendasikan menggunakan [React Testing Library](https://testing-library.com/react) yang mana didesain untuk mendorong menulis pengujian-pengujian yang menggunakan komponen Anda selayaknya yang dilakukan *end user*.
+To reduce the boilerplate, we recommend using [React Testing Library](https://testing-library.com/react) which is designed to encourage writing tests that use your components as the end users do.
 
-Untuk informasi lebih lanjut, cek [Testing Recipes](/docs/testing-recipes.html).
+For more information, check out [Testing Recipes](/docs/testing-recipes.html).
 
-### Apa yang sebenarnya [aturan lint](https://www.npmjs.com/package/eslint-plugin-react-hooks) terapkan? {#what-exactly-do-the-lint-rules-enforce}
+### What exactly do the [lint rules](https://www.npmjs.com/package/eslint-plugin-react-hooks) enforce? {#what-exactly-do-the-lint-rules-enforce}
 
-Kami menyediakan sebuah [*plugin* ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) yang menerapkan [aturan-aturan Hooks](/docs/hooks-rules.html) demi menghindari *bug*. *Plugin* tersebut mengasumsikan bahwa fungsi apapun yang diawali dengan "`use`" dan sebuah huruf kapital tepat setelahnya, adalah sebuah Hook. Kami menyadari pendekatan penemuan (heuristik) ini tidaklah sempurna dan bisa jadi masih ada beberapa *false positive*, akan tetapi tanpa sebuah perjanjian (konvensi) seluruh lingkup ekosistem tidak akan mungkin *Hooks* akan berjalan dengan baik -- dan nama-nama yang lebih panjang akan mengecilkan minat orang-orang baik untuk mengadopsi *Hooks* maupun mengikuti konvensinya.
+We provide an [ESLint plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) that enforces [rules of Hooks](/docs/hooks-rules.html) to avoid bugs. It assumes that any function starting with "`use`" and a capital letter right after it is a Hook. We recognize this heuristic isn't perfect and there may be some false positives, but without an ecosystem-wide convention there is just no way to make Hooks work well -- and longer names will discourage people from either adopting Hooks or following the convention.
 
-Khususnya, aturan tersebut menekankan bahwa:
+In particular, the rule enforces that:
 
-* Panggilan untuk *Hooks* bisa terdapat di dalam sebuah fungsi `PascalCase` (diasumsikan sebagai sebuah komponen) atau fungsi `useSomething` lainnya (diasumsikan sebagai sebuah *custom Hook*).
-* *Hooks* dipanggil dalam urutan yang sama pada setiap *render*.
+* Calls to Hooks are either inside a `PascalCase` function (assumed to be a component) or another `useSomething` function (assumed to be a custom Hook).
+* Hooks are called in the same order on every render.
 
-Terdapat beberapa heuristik lagi, dan hal tersebut bisa saja berubah sepanjang waktu selama kita memperbaiki terus aturan yang ada demi menyeimbangkan temuan *bug* dengan menghindari *false positive*.
+There are a few more heuristics, and they might change over time as we fine-tune the rule to balance finding bugs with avoiding false positives.
 
-## Dari Kelas ke *Hooks* {#from-classes-to-hooks}
+## From Classes to Hooks {#from-classes-to-hooks}
 
-### Bagaimana cara *lifecycle method* dapat sesuai dengan Hooks? {#how-do-lifecycle-methods-correspond-to-hooks}
+### How do lifecycle methods correspond to Hooks? {#how-do-lifecycle-methods-correspond-to-hooks}
 
-* `constructor`: Komponen fungsi tidak memerlukan sebuah *constructor*. Anda bisa menginisiasikan *state* di dalam panggilan [`useState`](/docs/hooks-reference.html#usestate). Jika komputasi *state* awal itu *expensive*, Anda bisa mengoper sebuah fungsi ke `useState`.
+* `constructor`: Function components don't need a constructor. You can initialize the state in the [`useState`](/docs/hooks-reference.html#usestate) call. If computing the initial state is expensive, you can pass a function to `useState`.
 
-* `getDerivedStateFromProps`: Jadwalkan sebuah pembaruan [ketika proses *render*](#how-do-i-implement-getderivedstatefromprops).
+* `getDerivedStateFromProps`: Schedule an update [while rendering](#how-do-i-implement-getderivedstatefromprops) instead.
 
-* `shouldComponentUpdate`: Lihat `React.memo` [di bawah ini](#how-do-i-implement-shouldcomponentupdate).
+* `shouldComponentUpdate`: See `React.memo` [below](#how-do-i-implement-shouldcomponentupdate).
 
-* `render`: Ini adalah komponen fungsi *body* itu sendiri.
+* `render`: This is the function component body itself.
 
-* `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`: [`useEffect` *Hook*](/docs/hooks-reference.html#useeffect) dapat mengekspresikan semua kombinasi ini (termasuk kasus-kasus yang [kurang](#can-i-skip-an-effect-on-updates) [awam](#can-i-run-an-effect-only-on-updates)).
+* `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`: The [`useEffect` Hook](/docs/hooks-reference.html#useeffect) can express all combinations of these (including [less](#can-i-skip-an-effect-on-updates) [common](#can-i-run-an-effect-only-on-updates) cases).
 
-* `componentDidCatch` dan `getDerivedStateFromError`: Tidak ada persamaan Hook untuk *method* ini sementara ini, tetapi akan segera ditambahkan.
+* `componentDidCatch` and `getDerivedStateFromError`: There are no Hook equivalents for these methods yet, but they will be added soon.
 
-### Bagaimana cara saya dapat memperoleh data dengan Hooks?{#how-can-i-do-data-fetching-with-hooks}
+### How can I do data fetching with Hooks? {#how-can-i-do-data-fetching-with-hooks}
 
-Berikut ini sebuah [demo kecil](https://codesandbox.io/s/jvvkoo8pq3) untuk permulaan Anda. Untuk mempelajari lebih lanjut, lihat [artikel ini](https://www.robinwieruch.de/react-hooks-fetch-data/) tentang memperoleh (*fetching*) data dengan menggunakan Hooks.
+Here is a [small demo](https://codesandbox.io/s/jvvkoo8pq3) to get you started. To learn more, check out [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) about data fetching with Hooks.
 
-### Apakah ada hal seperti *instance variable*? {#is-there-something-like-instance-variables}
+### Is there something like instance variables? {#is-there-something-like-instance-variables}
 
-Ya! [`useRef()`](/docs/hooks-reference.html#useref) Hook tidak hanya untuk *ref* DOM. Objek *"ref"* adalah sebuah *container* umum yang mana memiliki properti `current` yang berubah-ubah serta dapat memegang nilai apapun, serupa dengan *instance property* pada sebuah kelas.
+Yes! The [`useRef()`](/docs/hooks-reference.html#useref) Hook isn't just for DOM refs. The "ref" object is a generic container whose `current` property is mutable and can hold any value, similar to an instance property on a class.
 
-Anda dapat menuliskannya dari dalam 'useEffect':
+You can write to it from inside `useEffect`:
 
-```js {2,8}
+```js{2,8}
 function Timer() {
   const intervalRef = useRef();
 
@@ -245,9 +248,9 @@ function Timer() {
 }
 ```
 
-Jika kita hanya ingin mengatur sebuah interval, kita tidak perlu *ref* ('id' bisa jadi lokal pada efek tersebut), tapi akan berguna jika kita ingin membersihkan interval dari sebuah *event handler*:
+If we just wanted to set an interval, we wouldn't need the ref (`id` could be local to the effect), but it's useful if we want to clear the interval from an event handler:
 
-```js {3}
+```js{3}
   // ...
   function handleCancelClick() {
     clearInterval(intervalRef.current);
@@ -255,11 +258,11 @@ Jika kita hanya ingin mengatur sebuah interval, kita tidak perlu *ref* ('id' bis
   // ...
 ```
 
-Secara konsep, Anda bisa pikirkan *ref* itu serupa dengan *instance variables* dalam sebuah kelas. Kecuali, Anda menerapkan [lazy initialization](#how-to-create-expensive-objects-lazily), hindari pengaturan ref selama proses *render* -- hal ini akan mengakibatkan *behavior* yang tidak terduga. Sebagai gantinya, biasanya Anda ingin untuk memodifikasi *ref* dalam *event handler* dan efek.
+Conceptually, you can think of refs as similar to instance variables in a class. Unless you're doing [lazy initialization](#how-to-create-expensive-objects-lazily), avoid setting refs during rendering -- this can lead to surprising behavior. Instead, typically you want to modify refs in event handlers and effects.
 
-### Apa saya harus menggunakan satu atau beberapa *state variable*? {#should-i-use-one-or-many-state-variables}
+### Should I use one or many state variables? {#should-i-use-one-or-many-state-variables}
 
-Jika Anda memulai dari kelas, Anda mungkin ingin tetap memanggil `useState()` satu kali dan menempatkan semua *state* ke dalam sebuah objek tunggal. Anda bisa melakukan hal demikian jika suka. Berikut ini sebuah contoh sebuah komponen yang mengikuti pergerakan tetikus. Kita menetapkan posisi dan ukurannya dalam *local state*:
+If you're coming from classes, you might be tempted to always call `useState()` once and put all state into a single object. You can do it if you'd like. Here is an example of a component that follows the mouse movement. We keep its position and size in the local state:
 
 ```js
 function Box() {
@@ -268,29 +271,29 @@ function Box() {
 }
 ```
 
-Sekarang umpamakan kita ingin menuliskan beberapa logika yang mana merubah `left` (sisi kiri) dan `top` (sisi atas) ketika pengguna menggerakan tetikusnya. Perhatikan bagaimana kita harus menggabungkan area-area ini ke dalam objek *state* sebelumnya secara manual:
+Now let's say we want to write some logic that changes `left` and `top` when the user moves their mouse. Note how we have to merge these fields into the previous state object manually:
 
-```js {4,5}
+```js{4,5}
   // ...
   useEffect(() => {
     function handleWindowMouseMove(e) {
-      // Menyebarkan "...state" memastikan kita tidak "kehilangan" lebar dan tinggi
+      // Spreading "...state" ensures we don't "lose" width and height
       setState(state => ({ ...state, left: e.pageX, top: e.pageY }));
     }
-    // Catatan: implementasi ini agak sedikit disederhanakan
+    // Note: this implementation is a bit simplified
     window.addEventListener('mousemove', handleWindowMouseMove);
     return () => window.removeEventListener('mousemove', handleWindowMouseMove);
   }, []);
   // ...
 ```
 
-Ini karena ketika kita memperbarui sebuah *state variable*, kita merubah (*replace*) nilainya. Ini berbeda dari `this.setState` dalam sebuah kelas, yang mana menggabungkan (*merges*) area-area yang diperbarui ke dalam objek.
+This is because when we update a state variable, we *replace* its value. This is different from `this.setState` in a class, which *merges* the updated fields into the object.
 
-Jika Anda melihatkan penggabungan otomatis (*automatic merging*), Anda bisa menulis sebuah *custom Hook* `useLegacyState` yang menggabungkan pembaruan-pembaruan *state* objek.  Namun, sebagai gantinya **kami merekomendasikan untuk membagi *state* menjadi beberapa _state variable_ berdasarkan nilai mana yang cenderung berubah bersamaan.**
+If you miss automatic merging, you can write a custom `useLegacyState` Hook that merges object state updates. However, instead **we recommend to split state into multiple state variables based on which values tend to change together.**
 
-Sebagai contohnya, kita bisa membagi *state* komponen menjadi `position` dan `size` objek, serta selalu merubah `position` tanpa harus proses penggabungan:
+For example, we could split our component state into `position` and `size` objects, and always replace the `position` with no need for merging:
 
-```js {2,7}
+```js{2,7}
 function Box() {
   const [position, setPosition] = useState({ left: 0, top: 0 });
   const [size, setSize] = useState({ width: 100, height: 100 });
@@ -302,9 +305,9 @@ function Box() {
     // ...
 ```
 
-Memisahkan *state variable* independen juga memiliki keuntungan lain. Hal tersebut membuatnya mudah untuk mengekstrak beberapa logika ke dalam sebuah *custom Hook* nantinya, sebagai contoh:
+Separating independent state variables also has another benefit. It makes it easy to later extract some related logic into a custom Hook, for example:
 
-```js {2,7}
+```js{2,7}
 function Box() {
   const position = useWindowPosition();
   const [size, setSize] = useState({ width: 100, height: 100 });
@@ -320,19 +323,19 @@ function useWindowPosition() {
 }
 ```
 
-Perhatikan bagaimana kita dapat memindahkan panggilan `useState` untuk *state variable* `position` serta efek yang terhubung ke dalam sebuah *custom Hook* tanpa merubah kodenya. Jika semua *state* ada dalam sebuah objek, mengekstrak *state* tersebut akan jadi lebih sulit.
+Note how we were able to move the `useState` call for the `position` state variable and the related effect into a custom Hook without changing their code. If all state was in a single object, extracting it would be more difficult.
 
-Baik memasang semua *state* ke dalam sebuah panggilan `useState`, serta memiliki sebuah panggilan `useState` pada setiap area, keduanya sama-sama berfungsi. Komponen-komponen cenderung paling mudah dibaca ketika Anda menemukan keseimbangan antara (penerapan) kedua cara tersebut, dan kelompok yang terhubung dengan *state* ke dalam beberapa *state variable* independen. Jika logika *state* tersebut menjadi kompleks, kami rekomendasikan [mengelolanya dengan sebuah *reducer*](/docs/hooks-reference.html#usereducer) atau sebuah *custom Hook*.
+Both putting all state in a single `useState` call, and having a `useState` call per each field can work. Components tend to be most readable when you find a balance between these two extremes, and group related state into a few independent state variables. If the state logic becomes complex, we recommend [managing it with a reducer](/docs/hooks-reference.html#usereducer) or a custom Hook.
 
-### Bisakah saya menjalakan sebuah efek hanya pada pembaruan? {#can-i-run-an-effect-only-on-updates}
+### Can I run an effect only on updates? {#can-i-run-an-effect-only-on-updates}
 
-Ini adalah kasus penggunaan yang langka. Jika butuh, Anda bisa [gunakan sebuah *ref* yang bisa diubah-ubah](#is-there-something-like-instance-variables) menjadi secara manual menyetorkan nilai *boolean* sesuai dengan apakah Anda berada pada *render* pertama atau selanjutnya, kemudia memeriksa penandanya (*flag*) pada efek yang Anda buat. (Jika sering melakukan hal ini, ada baiknya Anda membuat sebuah *custom Hook*.)
+This is a rare use case. If you need it, you can [use a mutable ref](#is-there-something-like-instance-variables) to manually store a boolean value corresponding to whether you are on the first or a subsequent render, then check that flag in your effect. (If you find yourself doing this often, you could create a custom Hook for it.)
 
-### Bagaimana cara untuk mendapatkan kembali *prop* atau *state* sebelumnya? {#how-to-get-the-previous-props-or-state}
+### How to get the previous props or state? {#how-to-get-the-previous-props-or-state}
 
-Kini, Anda bisa melakukannya secara manual [dengan *ref*](#is-there-something-like-instance-variables):
+Currently, you can do it manually [with a ref](#is-there-something-like-instance-variables):
 
-```js {6,8}
+```js{6,8}
 function Counter() {
   const [count, setCount] = useState(0);
 
@@ -346,9 +349,9 @@ function Counter() {
 }
 ```
 
-Ini bisa jadi agak berbelit tetapi Anda bisa mengekstraknya ke dalam sebuah *custom Hook*:
+This might be a bit convoluted but you can extract it into a custom Hook:
 
-```js {3,7}
+```js{3,7}
 function Counter() {
   const [count, setCount] = useState(0);
   const prevCount = usePrevious(count);
@@ -364,24 +367,24 @@ function usePrevious(value) {
 }
 ```
 
-Perhatikan bagaimana hal ini dapat bekerja pada *props, state,* atau nilai apapun yang diperhitungkan.
+Note how this would work for props, state, or any other calculated value.
 
-```js {5}
+```js{5}
 function Counter() {
   const [count, setCount] = useState(0);
 
-  const calculation = count * 100;
+  const calculation = count + 100;
   const prevCalculation = usePrevious(calculation);
   // ...
 ```
 
-Di masa yang akan datang, React mungkin akan menyediakan sebuah `usePrevious` Hook* yang unik mengingat hal tersebut adalah kasus yang cukup sering digunakan.
+It's possible that in the future React will provide a `usePrevious` Hook out of the box since it's a relatively common use case.
 
-Lihat juga [pola yang direkomendasikan untuk *derived state*](#how-do-i-implement-getderivedstatefromprops).
+See also [the recommended pattern for derived state](#how-do-i-implement-getderivedstatefromprops).
 
-### Mengapa saya melihat *stale prop* atau *state* dalam fungsi yang saya buat?  {#why-am-i-seeing-stale-props-or-state-inside-my-function}
+### Why am I seeing stale props or state inside my function? {#why-am-i-seeing-stale-props-or-state-inside-my-function}
 
-Fungsi apapun yang ada dalam sebuah komponen, termasuk *event handler* dan efek, "melihat" *prop* dan *state* dari dalam proses *render* mana fungsi tersebut diciptakan. Sebagai contohnya, pertimbangkan kode seperi berikut ini:
+Any function inside a component, including event handlers and effects, "sees" the props and state from the render it was created in. For example, consider code like this:
 
 ```js
 function Example() {
@@ -389,7 +392,7 @@ function Example() {
 
   function handleAlertClick() {
     setTimeout(() => {
-      alert('Anda meng-klik: ' + count);
+      alert('You clicked on: ' + count);
     }, 3000);
   }
 
@@ -407,21 +410,21 @@ function Example() {
 }
 ```
 
-Jika Anda meng-klik "Show alert" dan kemudian memberi penambahan (*increment*) pada *counter*, penandanya akan menunjukkan variabel `count` **pada saat Anda meng-klik tombol "Show alert"**. Ini mencegah *bug* yang disebabkan oleh kode yang mengasumsikan *prop* dan *state* tidak berubah.
+If you first click "Show alert" and then increment the counter, the alert will show the `count` variable **at the time you clicked the "Show alert" button**. This prevents bugs caused by the code assuming props and state don't change.
 
-Jika ingin membaca *state* *terkini* dari beberapa *asynchronous callback*, baiknya Anda menyimpannya dalam [sebuah *ref*](/docs/hooks-faq.html#is-there-something-like-instance-variables), mengubahnya, dan membaca dari situ.
+If you intentionally want to read the *latest* state from some asynchronous callback, you could keep it in [a ref](/docs/hooks-faq.html#is-there-something-like-instance-variables), mutate it, and read from it.
 
-Pada akhirnya, alasan lain Anda melihat *stale prop* atau *state* yakni jika Anda menggunakan optimasi "dependency array" tapi tidak secara benar dalam menspesifikasi semua *dependency*-nya. Sebagai contohnya, jika sebuah efek menspesifikasikan `[]` sebagai argumen kedua tetapi membaca `someProp` di dalamnya, efek tersebut akan tetap "melihat" nilai awal dari `someProp`. Solusinya yakni antara menghilangkan *dependency array*, atau memperbaikinya. Ini adalah cara [bagaimana Anda bisa memperlakukan fungsi](#is-it-safe-to-omit-functions-from-the-list-of-dependencies), dan ini adalah [strategi umum lainnya](#what-can-i-do-if-my-effect-dependencies-change-too-often) untuk menjalankan efek lebih jarang tanpa keliru melewatkan *dependency*.
+Finally, another possible reason you're seeing stale props or state is if you use the "dependency array" optimization but didn't correctly specify all the dependencies. For example, if an effect specifies `[]` as the second argument but reads `someProp` inside, it will keep "seeing" the initial value of `someProp`. The solution is to either remove the dependency array, or to fix it. Here's [how you can deal with functions](#is-it-safe-to-omit-functions-from-the-list-of-dependencies), and here's [other common strategies](#what-can-i-do-if-my-effect-dependencies-change-too-often) to run effects less often without incorrectly skipping dependencies.
 
->Catatan
+>Note
 >
->Kami menyediakan sebuah aturan *ESLint* [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) sebagai bagian dari *package*[`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Itu akan memberi peringatan ketika *dependency* keliru dispesifikasikan dan akan memberikan saran perbaikan.
+>We provide an [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) ESLint rule as a part of the [`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.
 
-### Bagaimana cara mengimplementasikan `getDerivedStateFromProps`? {#how-do-i-implement-getderivedstatefromprops}
+### How do I implement `getDerivedStateFromProps`? {#how-do-i-implement-getderivedstatefromprops}
 
-Ketika Anda mungkin [tidak memerlukannya](/blog/2018/06/07/you-probably-dont-need-derived-state.html), dalam kasus-kasus yang jarang Anda alami (seperti mengimplementasikan sebuah komponen `<Transition>`), Anda bisa memperbarui *state* tepat saat proses *render*. React akan menjalankan ulang komponen tersebut dengan *state* yang sudah diperbarui tepat setelah keluar dari *render* pertama sehingga tidak akan memakan banyak ruang (*expensive*).
+While you probably [don't need it](/blog/2018/06/07/you-probably-dont-need-derived-state.html), in rare cases that you do (such as implementing a `<Transition>` component), you can update the state right during rendering. React will re-run the component with updated state immediately after exiting the first render so it wouldn't be expensive.
 
-Berikut ini, kita menyetorkan nilai sebelumnya dari *prop* `row` dalam sebuah *state variable* sehingga kita bisa bandingkan:
+Here, we store the previous value of the `row` prop in a state variable so that we can compare:
 
 ```js
 function ScrollView({row}) {
@@ -429,7 +432,7 @@ function ScrollView({row}) {
   let [prevRow, setPrevRow] = useState(null);
 
   if (row !== prevRow) {
-    // Baris berubah karena render terakhir. Memperbarui isScrollingDown.
+    // Row changed since last render. Update isScrollingDown.
     setIsScrollingDown(prevRow !== null && row > prevRow);
     setPrevRow(row);
   }
@@ -438,13 +441,13 @@ function ScrollView({row}) {
 }
 ```
 
-Hal ini bisa jadi terlihat aneh pada awalnya, tetapi sebuah pembaruan selama proses *render* adalah hal yang persis secara konsep sejak `getDerivedStateFromProps` dibuat.
+This might look strange at first, but an update during rendering is exactly what `getDerivedStateFromProps` has always been like conceptually.
 
-### Apakah ada suatu hal seperti *forceUpdate*? {#is-there-something-like-forceupdate}
+### Is there something like forceUpdate? {#is-there-something-like-forceupdate}
 
-Baik `useState` *Hook* maupun `useReducer` *Hook* [akan keluar dari pembaruan](/docs/hooks-reference.html#bailing-out-of-a-state-update) jika nilai selanjutnya sama dengan nilai sebelumnya. Mengubah *state* saat itu juga dan memanggil `setState` tidak akan mengakibatkan *render* ulang.
+Both `useState` and `useReducer` Hooks [bail out of updates](/docs/hooks-reference.html#bailing-out-of-a-state-update) if the next value is the same as the previous one. Mutating state in place and calling `setState` will not cause a re-render.
 
-Normalnya, Anda tidak akan mengubah *local state* dalam React. Meski demikian, sebagai sebuah solusi darurat, Anda bisa menggunakan sebuah *incrementing counter* untuk memaksa terjadinya *render* ulang walaupun jika *state*-nya tidak berubah:
+Normally, you shouldn't mutate local state in React. However, as an escape hatch, you can use an incrementing counter to force a re-render even if the state has not changed:
 
 ```js
   const [ignored, forceUpdate] = useReducer(x => x + 1, 0);
@@ -454,17 +457,17 @@ Normalnya, Anda tidak akan mengubah *local state* dalam React. Meski demikian, s
   }
 ```
 
-Coba hindari pola berikut ini sebisa mungkin.
+Try to avoid this pattern if possible.
 
-### Bisakah saya membuat *ref* pada sebuah komponen fungsi? {#can-i-make-a-ref-to-a-function-component}
+### Can I make a ref to a function component? {#can-i-make-a-ref-to-a-function-component}
 
-Saat Anda seharusnya tidak sering memerlukan hal ini, Anda bisa saja mengekspos beberapa metode perintah pada sebuah *parent component* dengan menggunakan [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle) *Hook*.
+While you shouldn't need this often, you may expose some imperative methods to a parent component with the [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle) Hook.
 
-### Bagaimana cara mengukur *DOM node*? {#how-can-i-measure-a-dom-node}
+### How can I measure a DOM node? {#how-can-i-measure-a-dom-node}
 
-Untuk mengukur posisi atau ukuran dari sebuah *DOM node*, Anda bisa gunakan [*callback ref*](/docs/refs-and-the-dom.html#callback-refs). React akan memanggil *callback* itu kapanpun *ref* terikat pada sebuah *node* yang berbeda. Berikut ini [demo kecil](https://codesandbox.io/s/l7m0v5x4v9):
+In order to measure the position or size of a DOM node, you can use a [callback ref](/docs/refs-and-the-dom.html#callback-refs). React will call that callback whenever the ref gets attached to a different node. Here is a [small demo](https://codesandbox.io/s/l7m0v5x4v9):
 
-```js {4-8,12}
+```js{4-8,12}
 function MeasureExample() {
   const [height, setHeight] = useState(0);
 
@@ -477,26 +480,26 @@ function MeasureExample() {
   return (
     <>
       <h1 ref={measuredRef}>Hello, world</h1>
-      <h2>Header di atas memiliki tinggi {Math.round(height)}px</h2>
+      <h2>The above header is {Math.round(height)}px tall</h2>
     </>
   );
 }
 ```
 
-Kita tidak memilih `useRef` dalam contoh ini karena sebuah objek *ref* tidak memberitahukan kita tentang *perubahan* pada nilai *ref* yang sekarang. Menggunakan sebuah *callback ref* akan memastikan bahwa [walaupun jika sebuah *child component* menampilkan *node* yang diukur setelah ini](https://codesandbox.io/s/818zzk8m78) (sebagai contoh, dalam respon pada sebuah klik), kita masih akan dapat pemberitahuan tentang hal itu dalam *parent component* dan bisa memperbarui pengukurannya.
+We didn't choose `useRef` in this example because an object ref doesn't notify us about *changes* to the current ref value. Using a callback ref ensures that [even if a child component displays the measured node later](https://codesandbox.io/s/818zzk8m78) (e.g. in response to a click), we still get notified about it in the parent component and can update the measurements.
 
-Perhatikan bahwa kita mengoper `[]` sebagai sebuah *dependency array* untuk `useCallback`. Ini memastikan bahwa *ref callback* tidak berubah di antara *render* ulang, serta agar React tidak akan memanggilnya tanpa sebab.
+Note that we pass `[]` as a dependency array to `useCallback`. This ensures that our ref callback doesn't change between the re-renders, and so React won't call it unnecessarily.
 
-Jika mau, Anda bisa [mengekstrak logika ini](https://codesandbox.io/s/m5o42082xy) ke dalam sebuah Hook yang bisa digunakan ulang:
+If you want, you can [extract this logic](https://codesandbox.io/s/m5o42082xy) into a reusable Hook:
 
-```js {2}
+```js{2}
 function MeasureExample() {
   const [rect, ref] = useClientRect();
   return (
     <>
       <h1 ref={ref}>Hello, world</h1>
       {rect !== null &&
-        <h2>Header di atas memiliki tinggi {Math.round(rect.height)}px</h2>
+        <h2>The above header is {Math.round(rect.height)}px tall</h2>
       }
     </>
   );
@@ -514,22 +517,22 @@ function useClientRect() {
 ```
 
 
-### Apa yang dimaksud dengan `const [thing, setThing] = useState()`? {#what-does-const-thing-setthing--usestate-mean}
+### What does `const [thing, setThing] = useState()` mean? {#what-does-const-thing-setthing--usestate-mean}
 
-Jika Anda asing dengan *syntax* ini, cek [penjelasannya](/docs/hooks-state.html#tip-what-do-square-brackets-mean) dalam dokumentasi *State Hook*.
+If you're not familiar with this syntax, check out the [explanation](/docs/hooks-state.html#tip-what-do-square-brackets-mean) in the State Hook documentation.
 
 
-## Optimasi Performa {#performance-optimizations}
+## Performance Optimizations {#performance-optimizations}
 
-### Bisakah saya melewatkan sebuah efek pada pembaruan? {#can-i-skip-an-effect-on-updates}
+### Can I skip an effect on updates? {#can-i-skip-an-effect-on-updates}
 
-Ya. Lihat [pengaktifan efek secara kondisional](/docs/hooks-reference.html#conditionally-firing-an-effect). Perhatikan bahwa lupa menangani pembaruan seringkali [menimbulkan *bug*](/docs/hooks-effect.html#explanation-why-effects-run-on-each-update), yang mana  mengapa hal ini bukanlah *behavior* aslinya.
+Yes. See [conditionally firing an effect](/docs/hooks-reference.html#conditionally-firing-an-effect). Note that forgetting to handle updates often [introduces bugs](/docs/hooks-effect.html#explanation-why-effects-run-on-each-update), which is why this isn't the default behavior.
 
-### Apakah aman untuk menghilangkan fungsi dari daftar *dependency*? {#is-it-safe-to-omit-functions-from-the-list-of-dependencies}
+### Is it safe to omit functions from the list of dependencies? {#is-it-safe-to-omit-functions-from-the-list-of-dependencies}
 
-Umumnya tidak aman.
+Generally speaking, no.
 
-```js {3,8}
+```js{3,8}
 function Example({ someProp }) {
   function doSomething() {
     console.log(someProp);
@@ -537,13 +540,13 @@ function Example({ someProp }) {
 
   useEffect(() => {
     doSomething();
-  }, []); // 🔴 Ini tidaklah aman (memanggil `doSomething` yang menggunakan `someProp`)
+  }, []); // 🔴 This is not safe (it calls `doSomething` which uses `someProp`)
 }
 ```
 
-Sulit untuk mengingat *prop* atau *state* yang digunakan oleh fungsi yang ada di luar efek. Inilah mengapa **biasanya Anda akan mendeklarasikan fungsi yang dibutuhkan dengan efek *di dalam*-nya.** Lalu kita bisa dengan mudah melihat nilai-nilai apa saja dari cakupan komponen yang jadi patokan efek tersebut:
+It's difficult to remember which props or state are used by functions outside of the effect. This is why **usually you'll want to declare functions needed by an effect *inside* of it.** Then it's easy to see what values from the component scope that effect depends on:
 
-```js {4,8}
+```js{4,8}
 function Example({ someProp }) {
   useEffect(() => {
     function doSomething() {
@@ -551,59 +554,59 @@ function Example({ someProp }) {
     }
 
     doSomething();
-  }, [someProp]); // ✅ OK (efek dari kita hanya menggunakan `someProp`)
+  }, [someProp]); // ✅ OK (our effect only uses `someProp`)
 }
 ```
 
-Jika setelah itu kita masih tidak menggunakan nilai apapun dari cakupan komponen tersebut, sebaiknya spesifikasikan `[]` agar aman:
+If after that we still don't use any values from the component scope, it's safe to specify `[]`:
 
-```js {7}
+```js{7}
 useEffect(() => {
   function doSomething() {
     console.log('hello');
   }
 
   doSomething();
-}, []); // ✅ OK dalam contoh ini karena kita tidak menggunakan nilai apapun dari cakupan komponen tersebut
+}, []); // ✅ OK in this example because we don't use *any* values from component scope
 ```
 
-Tergantung pada kasus penggunaan Anda, terdapat beberapa pilihan lainnya sebagaimana yang dideskripsikan di bawah ini.
+Depending on your use case, there are a few more options described below.
 
->Catatan
+>Note
 >
->Kami menyediakan aturan *ESLint* [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) sebagai bagian dari *package* [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Itu akan membantu Anda menemukan komponen yang tidak konsisten menangani pembaruan.
+>We provide the [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) ESLint rule as a part of the [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package. It helps you find components that don't handle updates consistently.
 
-Mari kita lihat mengapa hal ini penting.
+Let's see why this matters.
 
-Jika Anda menspesifikasikan sebuah [daftar *dependency*](/docs/hooks-reference.html#conditionally-firing-an-effect) sebagai sebuah argumen terakhir untuk `useEffect`, `useMemo`, `useCallback`, atau `useImperativeHandle`, haruslah termasuk semua nilai yang digunakan di dalamnya yang ikut andil dalam *data flow* React. Itu termasuk *prop, state,* dan apapun yang berasal dari keduanya.
+If you specify a [list of dependencies](/docs/hooks-reference.html#conditionally-firing-an-effect) as the last argument to `useEffect`, `useMemo`, `useCallback`, or `useImperativeHandle`, it must include all values used inside that participate in the React data flow. That includes props, state, and anything derived from them.
 
-Hal tersebut **hanya akan** aman untuk menghilangkan sebuah fungsi dari daftar *dependency* jika tidak terjadi apa-apa di dalamnya (atau fungsi lain yang terpanggil) yang merujuk pada *prop, state,* atau nilai yang berasal dari keduanya. Contoh berikut memiliki *bug*:
+It is **only** safe to omit a function from the dependency list if nothing in it (or the functions called by it) references props, state, or values derived from them. This example has a bug:
 
-```js {5,12}
+```js{5,12}
 function ProductPage({ productId }) {
   const [product, setProduct] = useState(null);
 
   async function fetchProduct() {
-    const response = await fetch('http://myapi/product' + productId); // Menggunakan productId prop
+    const response = await fetch('http://myapi/product' + productId); // Uses productId prop
     const json = await response.json();
     setProduct(json);
   }
 
   useEffect(() => {
     fetchProduct();
-  }, []); // 🔴 Tidak valid karena `fetchProduct` menggunakan `productId`
+  }, []); // 🔴 Invalid because `fetchProduct` uses `productId`
   // ...
 }
 ```
 
-**Rekomendasi perbaikannya adalah dengan cara memindahkan fungsi itu _di dalam_ efek yang Anda buat**. Perbaikan tersebut akan memudahkan untuk melihat *prop* atau *state* mana yang efek Anda gunakan, serta memastikan semuanya terdeklarasikan:
+**The recommended fix is to move that function _inside_ of your effect**. That makes it easy to see which props or state your effect uses, and to ensure they're all declared:
 
-```js {5-10,13}
+```js{5-10,13}
 function ProductPage({ productId }) {
   const [product, setProduct] = useState(null);
 
   useEffect(() => {
-    // Dengan memindahkan fungsi ini ke dalam efek, kita bisa dengan jelas melihat nilai-nilai yang digunakan.
+    // By moving this function inside the effect, we can clearly see the values it uses.
     async function fetchProduct() {
       const response = await fetch('http://myapi/product' + productId);
       const json = await response.json();
@@ -611,14 +614,14 @@ function ProductPage({ productId }) {
     }
 
     fetchProduct();
-  }, [productId]); // ✅ Valid karena efeknya hanya menggunakan productId
+  }, [productId]); // ✅ Valid because our effect only uses productId
   // ...
 }
 ```
 
-Ini juga membebaskan Anda untuk menangani respon-respon yang tidak pada tempatnya (*out-of-order*) dengan sebuah *local variable* dalam efek tersebut:
+This also allows you to handle out-of-order responses with a local variable inside the effect:
 
-```js {2,6,10}
+```js{2,6,10}
   useEffect(() => {
     let ignore = false;
     async function fetchProduct() {
@@ -632,87 +635,87 @@ Ini juga membebaskan Anda untuk menangani respon-respon yang tidak pada tempatny
   }, [productId]);
 ```
 
-Kita pindahkan fungsi dalam efek tersebut agar fungsi tersebut tidak perlu berada dalam daftar *dependency*-nya sendiri.
+We moved the function inside the effect so it doesn't need to be in its dependency list.
 
->Tips
+>Tip
 >
->Cek [demo kecil ini](https://codesandbox.io/s/jvvkoo8pq3) dan [artikel ini](https://www.robinwieruch.de/react-hooks-fetch-data/) untuk mempelajari lebih lanjut tentang data fetching menggunakan Hooks.
+>Check out [this small demo](https://codesandbox.io/s/jvvkoo8pq3) and [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) to learn more about data fetching with Hooks.
 
-**Jika untuk beberapa alasan Anda _tidak bisa_ memindahkan sebuah fungsi ke dalam sebuah efek, terdapat beberapa pilihan lainnya:**
+**If for some reason you _can't_ move a function inside an effect, there are a few more options:**
 
-* **Anda bisa mencoba menggeser fungsi tersebut keluar komponen**. Dalam kasus ini, fungsi dijamin tidak merujuk pada *prop* atau *state* apapun, dan juga tidak perlu berada dalam daftar *dependency*.
-* Jika fungsi yang Anda panggil adalah murni sebuah komputasi dan aman untuk dipanggil saat proses *render*, Anda boleh **memanggilnya di luar efek tersebut sebagai gantinya,** dan membuat efek tersebut bergantung pada nilai balikan (*return*).
-* Sebagai pilihan terakhir, Anda bisa**menambahkan sebuah fungsi ke _dependency_ efek tersebut namun _mengemas definisinya_** ke dalam [`useCallback`](/docs/hooks-reference.html#usecallback) *Hook*. Ini memastikan fungsi tersebut tidak berubah pada tiap *render* kecuali *dependency-nya sendiri* juga berubah:
+* **You can try moving that function outside of your component**. In that case, the function is guaranteed to not reference any props or state, and also doesn't need to be in the list of dependencies.
+* If the function you're calling is a pure computation and is safe to call while rendering, you may **call it outside of the effect instead,** and make the effect depend on the returned value.
+* As a last resort, you can **add a function to effect dependencies but _wrap its definition_** into the [`useCallback`](/docs/hooks-reference.html#usecallback) Hook. This ensures it doesn't change on every render unless *its own* dependencies also change:
 
-```js {2-5}
+```js{2-5}
 function ProductPage({ productId }) {
-  // ✅ Dikemas dengan useCallback untuk menghindari berubah tiap kali render
+  // ✅ Wrap with useCallback to avoid change on every render
   const fetchProduct = useCallback(() => {
-    // ... Melakukan sesuatu dengan productId ...
-  }, [productId]); // ✅ Semua useCallback dependency terspesifikasikan
+    // ... Does something with productId ...
+  }, [productId]); // ✅ All useCallback dependencies are specified
 
   return <ProductDetails fetchProduct={fetchProduct} />;
 }
 
-function ProductDetails({ fetchProduct })
+function ProductDetails({ fetchProduct }) {
   useEffect(() => {
     fetchProduct();
-  }, [fetchProduct]); // ✅ Semua useEffect dependency terspesifikasikan
+  }, [fetchProduct]); // ✅ All useEffect dependencies are specified
   // ...
 }
 ```
 
-Perhatikan bahwa pada contoh di atas kita **perlu** untuk menjaga fungsi agar tetap dalam daftar dependency. Ini memastikan bahwa setiap perubahan dalam *prop* `productId`  dari `ProductPage` secara otomatis memicu pengumpulan ulang (*refetch*) dalam komponen `ProductDetails`.
+Note that in the above example we **need** to keep the function in the dependencies list. This ensures that a change in the `productId` prop of `ProductPage` automatically triggers a refetch in the `ProductDetails` component.
 
-### Apa yang bisa saya lakukan jika *dependency* efek berganti terlalu sering berubah? {#what-can-i-do-if-my-effect-dependencies-change-too-often}
+### What can I do if my effect dependencies change too often? {#what-can-i-do-if-my-effect-dependencies-change-too-often}
 
-Terkadang, efek Anda bisa jadi menggunakan *state* yang terlalu sering berubah. Anda mungkin berkeinginan untuk menghilangkan *state* itu dari daftar *dependency*, namun biasanya berujung pada *bug*:
+Sometimes, your effect may be using state that changes too often. You might be tempted to omit that state from a list of dependencies, but that usually leads to bugs:
 
-```js {6,9}
+```js{6,9}
 function Counter() {
   const [count, setCount] = useState(0);
 
   useEffect(() => {
     const id = setInterval(() => {
-      setCount(count + 1); // Efek ini bergantung pada `count` state
+      setCount(count + 1); // This effect depends on the `count` state
     }, 1000);
     return () => clearInterval(id);
-  }, []); // 🔴 Bug: `count` tidak dispesifikasikan sebagai sebuah dependency
+  }, []); // 🔴 Bug: `count` is not specified as a dependency
 
   return <h1>{count}</h1>;
 }
 ```
 
-Kumpulan *dependency* yang kosong, `[]`, berarti bahwa efek tersebut hanya akan berjalan satu kali ketika komponen dimuat, dan tidak pada setiap kali *render* ulang. Masalahnya adalah di dalam `setInterval` callback*, nilai `count` tidaklah berubah, karena kita menciptakan sebuah pengakhiran dengan nilai `count` ditetapkan jadi `0` selayaknya ketika efek *callback* berjalan. Tiap detik, *callback* ini kemudian memanggil `setCount(0 + 1)`, jadi hitungan tersebut tidak pernah melebihi 1.
+The empty set of dependencies, `[]`, means that the effect will only run once when the component mounts, and not on every re-render. The problem is that inside the `setInterval` callback, the value of `count` does not change, because we've created a closure with the value of `count` set to `0` as it was when the effect callback ran. Every second, this callback then calls `setCount(0 + 1)`, so the count never goes above 1.
 
-Menspesifikasikan `[count]` sebagai sebauh daftar *dependency* dapat memperbaiki *bug*, tetapi juga bisa menyebabkan interval tersetel ulang (*reset*) pada setiap perubahan. Secara efektif, tiap `setInterval` akan mendapat satu kali kesempatan untuk mengeksekusi sebelum dikosongkan (mirip dengan `setTimeout`). Hal itu mungkin saja tidak diinginkan. Untuk memperbaikinya, kita bisa gunakan [bentuk pembaruan fungsional pada `setState`](/docs/hooks-reference.html#functional-updates). Hal tersebut membiarkan kita menspesifikasikan *bagaimana* *state* perlu berubah tanpa merujuk pada *state* yang *sekarang*:
+Specifying `[count]` as a list of dependencies would fix the bug, but would cause the interval to be reset on every change. Effectively, each `setInterval` would get one chance to execute before being cleared (similar to a `setTimeout`.) That may not be desirable. To fix this, we can use the [functional update form of `setState`](/docs/hooks-reference.html#functional-updates). It lets us specify *how* the state needs to change without referencing the *current* state:
 
-```js {6,9}
+```js{6,9}
 function Counter() {
   const [count, setCount] = useState(0);
 
   useEffect(() => {
     const id = setInterval(() => {
-      setCount(c => c + 1); // ✅ Ini tidak bergantung pada variabel `count` di luar,
+      setCount(c => c + 1); // ✅ This doesn't depend on `count` variable outside
     }, 1000);
     return () => clearInterval(id);
-  }, []); // ✅ Efek kita tidak menggunakan *variabel* apapun dalam lingkup komponen
+  }, []); // ✅ Our effect doesn't use any variables in the component scope
 
   return <h1>{count}</h1>;
 }
 ```
 
-(Identitas fungsi `setCount` dijamin akan lebih stabil serta aman untuk dihapus.)
+(The identity of the `setCount` function is guaranteed to be stable so it's safe to omit.)
 
-Sekarang, `setInterval` callback* mengeksekusi satu kali tiap detik, namun tiap yang ada di dalamnya memanggil `setCount` bisa menggunakan nilai yang terbaru untuk `count` (disebut `c` dalam *callback* disini.)
+Now, the `setInterval` callback executes once a second, but each time the inner call to `setCount` can use an up-to-date value for `count` (called `c` in the callback here.)
 
-Dalam kasus-kasus yang lebih kompleks lagi (seperti halnya jika satu *state* bergantung pada *state*), cobalah untuk memindahkan logika pembaruan *state* keluar efek tersebut menggunakan [`useReducer` Hook*](/docs/hooks-reference.html#usereducer). [Artikel ini](https://adamrackis.dev/state-and-use-reducer/) menawarkan sebuah contoh bagaimana Anda daoat melakukan hal berikut ini. **Indentitas fungsi _`dispatch`_ dari _`useReducer`_ itu selalu stabil** — meskipun jika fungsi pengurangan (*reducer*) dideklarasikan dalam komponen serta membaca *prop*-nya.
+In more complex cases (such as if one state depends on another state), try moving the state update logic outside the effect with the [`useReducer` Hook](/docs/hooks-reference.html#usereducer). [This article](https://adamrackis.dev/state-and-use-reducer/) offers an example of how you can do this. **The identity of the `dispatch` function from `useReducer` is always stable** — even if the reducer function is declared inside the component and reads its props.
 
-Sebagai pilihan terakhir, jika Anda ingin sesuatu seperti `this` dalam sebuah kelas, Anda bisa [gunakan *ref*](/docs/hooks-faq.html#is-there-something-like-instance-variables) untuk menahan sebuah variabel yang berubah-ubah. Kemudian Anda bisa menulis dan membacanya. Contohnya:
+As a last resort, if you want something like `this` in a class, you can [use a ref](/docs/hooks-faq.html#is-there-something-like-instance-variables) to hold a mutable variable. Then you can write and read to it. For example:
 
-```js {2-6,10-11,16}
+```js{2-6,10-11,16}
 function Example(props) {
-  // Jaga prop terkini dalam sebuah ref.
+  // Keep latest props in a ref.
   let latestProps = useRef(props);
   useEffect(() => {
     latestProps.current = props;
@@ -720,47 +723,47 @@ function Example(props) {
 
   useEffect(() => {
     function tick() {
-      // Membaca prop terkini kapanpun
+      // Read latest props at any time
       console.log(latestProps.current);
     }
 
     const id = setInterval(tick, 1000);
     return () => clearInterval(id);
-  }, []); // Efek ini tidak pernah berjalan ulang
+  }, []); // This effect never re-runs
 }
 ```
 
-Lakukan ini jika hanya saat Anda tidak bisa menemukan alternatif yang lebih baik, sebagaimana mengandalkan pada perubahan (*mutation*) membuat komponen jadi kurang dapat diprediksi. Jika ada sebuah pola spesifik yang tidak menerjemahkan dengan baik, [layangkan *issue*](https://github.com/facebook/react/issues/new) dengan sebuah contoh kode yang dapat dijalankan dan kami akan coba bantu.
+Only do this if you couldn't find a better alternative, as relying on mutation makes components less predictable. If there's a specific pattern that doesn't translate well, [file an issue](https://github.com/facebook/react/issues/new) with a runnable example code and we can try to help.
 
-### Bagaimana cara mengimplementasikan `shouldComponentUpdate`? {#how-do-i-implement-shouldcomponentupdate}
+### How do I implement `shouldComponentUpdate`? {#how-do-i-implement-shouldcomponentupdate}
 
-Anda dapat mengemas sebuah komponen fungsi dengan `React.memo` untuk membandingkan secara tak mendalam *prop*-nya:
+You can wrap a function component with `React.memo` to shallowly compare its props:
 
 ```js
 const Button = React.memo((props) => {
-  // komponen Anda
+  // your component
 });
 ```
 
-Bukanlah sebuah *Hook* karena hal tersebut tidak melakukan penyusunan seperti yang *Hooks* lakukan. `React.memo` adalah persamaan untuk `PureComponent`, tapi hanya untuk membandingkan *prop*. (Anda juga bisa menambahkan argumen kedua untuk menspesifikasikan sebuah fungsi perbandingan yang menerima *prop* lama dan *prop* baru. Jika *return* dari fungsi tersebut adalah *true*, maka pembaruan akan dilewat.)
+It's not a Hook because it doesn't compose like Hooks do. `React.memo` is equivalent to `PureComponent`, but it only compares props. (You can also add a second argument to specify a custom comparison function that takes the old and new props. If it returns true, the update is skipped.)
 
-`React.memo` tidak membandingkan *state* karena tidak ada satu pun objek *state* untuk dibandingkan. Tapi Anda dapat membuat *children* (turunan) murni pula, atau bahkan [mengoptimasi masing-masing *children* dengan menggunakan `useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations).
+`React.memo` doesn't compare state because there is no single state object to compare. But you can make children pure too, or even [optimize individual children with `useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations).
 
-### Bagaimana cara *memoize* perhitungan? {#how-to-memoize-calculations}
+### How to memoize calculations? {#how-to-memoize-calculations}
 
-*Hook* [`useMemo`](/docs/hooks-reference.html#usememo) mengizinkan Anda untuk menyimpan (*cache*) perhitungan-perhitungan di antara berbagai *render* dengan cara *"mengingat"* komputasi sebelumnya:
+The [`useMemo`](/docs/hooks-reference.html#usememo) Hook lets you cache calculations between multiple renders by "remembering" the previous computation:
 
 ```js
 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
 ```
 
-Kode ini memanggil `computeExpensiveValue(a, b)`. Tapi jika *dependency* `[a, b]` tidak berubah semenjak nilai sebelumnya, `useMemo` tidak akan memanggil untuk kedua kalinya dan menggunakan kembali nilai terakhir yang di-*return*.
+This code calls `computeExpensiveValue(a, b)`. But if the dependencies `[a, b]` haven't changed since the last value, `useMemo` skips calling it a second time and simply reuses the last value it returned.
 
-Ingat bahwa fungsi tersebut dioper ke `useMemo` berjalan selama proses *render*. Jangan lakukan hal apapun yang tidak se-normalnya Anda lakukan ketika proses *render*. Sebagai contoh, efek samping (*side effect*) sudah seharusnya berada dalam `useEffect`, bukan `useMemo`.
+Remember that the function passed to `useMemo` runs during rendering. Don't do anything there that you wouldn't normally do while rendering. For example, side effects belong in `useEffect`, not `useMemo`.
 
-**Anda bisa jadi mengandalkan _`useMemo`_ sebagai salah satu optimasi performa, bukan sebagai jaminan _semantic_.** Di masa yang akan datang, React bisa saja memilih untuk *"forget"* beberapa nilai-nilai hasil *memoize* sebelumnya dan menghitung ulang pada *render* selanjutnya, contohnya untuk mengosongkan memori dari komponen-komponen *offscreen*. Tulis kode Anda agar kode tersebut dapat terus berjalan tanpa `useMemo` — dan menambahkannya ke performa yang teroptimasi. (Untuk kasus yang langka ketika sebuah nilai harus *tidak pernah* dikomputasi ulang, Anda bisa [menginisiasi secara *lazy* *(initialize lazily)*](#how-to-create-expensive-objects-lazily) sebuah *ref*.)
+**You may rely on `useMemo` as a performance optimization, not as a semantic guarantee.** In the future, React may choose to "forget" some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without `useMemo` — and then add it to optimize performance. (For rare cases when a value must *never* be recomputed, you can [lazily initialize](#how-to-create-expensive-objects-lazily) a ref.)
 
-Dengan mudah, `useMemo` juga memperbolehkan Anda untuk melewatkan sebuah *render* ulang yang *expensive* pada sebuah turunan (*child*):
+Conveniently, `useMemo` also lets you skip an expensive re-render of a child:
 
 ```js
 function Parent({ a, b }) {
@@ -777,51 +780,51 @@ function Parent({ a, b }) {
 }
 ```
 
-Perhatikan bahwa pendekatan ini tidak akan berhasil dalam sebuah pengulangan (*loop*) karena panggilan *Hook* [tidak bisa](/docs/hooks-rules.html) digantikan di dalam *loop*. Tapi Anda bisa mengekstrak komponen yang terpisah untuk daftar *item*, dan memanggil `useMemo` di sana.
+Note that this approach won't work in a loop because Hook calls [can't](/docs/hooks-rules.html) be placed inside loops. But you can extract a separate component for the list item, and call `useMemo` there.
 
-### Bagaimana cara membuat objek *expensive* secara *lazy*? {#how-to-create-expensive-objects-lazily}
+### How to create expensive objects lazily? {#how-to-create-expensive-objects-lazily}
 
-`useMemo` mengizinkan Anda untuk [me-*memoize* sebuah perhitungan yang *expensive*](#how-to-memoize-calculations) jika *dependency*-nya sama. Bagimanapun, itu hanya berfungsi sebagai sebuah penanda, dan tidak *menjamin* komputasi tersebut tidak akan diulang. Tapi terkadang Anda harus memastikan sebuah objek hanya diciptakan sekali.
+`useMemo` lets you [memoize an expensive calculation](#how-to-memoize-calculations) if the dependencies are the same. However, it only serves as a hint, and doesn't *guarantee* the computation won't re-run. But sometimes you need to be sure an object is only created once.
 
-**Kasus penggunaan pertama yang umum yakni ketika menciptakan sebuah _initial state_ itu _expensive_:**
+**The first common use case is when creating the initial state is expensive:**
 
 ```js
 function Table(props) {
-  // ⚠️ createRows() dipanggil setiap render
+  // ⚠️ createRows() is called on every render
   const [rows, setRows] = useState(createRows(props.count));
   // ...
 }
 ```
 
-Untuk menghindari pembuatan ulang *initial state* yang dibiarkan, kita bisa mengoper sebuah **function** ke `useState`:
+To avoid re-creating the ignored initial state, we can pass a **function** to `useState`:
 
 ```js
 function Table(props) {
-  // ✅ createRows() hanya dipanggil satu kali
+  // ✅ createRows() is only called once
   const [rows, setRows] = useState(() => createRows(props.count));
   // ...
 }
 ```
 
-React hanya akan memanggil fungsi ini selama *render* pertama. Lihat [referensi `useState` API*](/docs/hooks-reference.html#usestate).
+React will only call this function during the first render. See the [`useState` API reference](/docs/hooks-reference.html#usestate).
 
-**Anda adakalanya juga ingin menghindari pembuatan ulang nilai awal `useRef()`.** Contohnya, mungkin Anda ingin memastikan beberapa contoh kelas penting hanya bisa dibuat satu kali:
+**You might also occasionally want to avoid re-creating the `useRef()` initial value.** For example, maybe you want to ensure some imperative class instance only gets created once:
 
 ```js
 function Image(props) {
-  // ⚠️ IntersectionObserver dibuat di tiap render
+  // ⚠️ IntersectionObserver is created on every render
   const ref = useRef(new IntersectionObserver(onIntersect));
   // ...
 }
 ```
 
-`useRef` **tidak** menerima fungsi khusus yang berlebih seperti `useState`. Sebagai gantinya, Anda bisa menuliskan fungsi sendiri yang membuat dan mengaturnya secara *lazy*:
+`useRef` **does not** accept a special function overload like `useState`. Instead, you can write your own function that creates and sets it lazily:
 
 ```js
 function Image(props) {
   const ref = useRef(null);
 
-  // ✅ IntersectionObserver dibuat satu kali secara lazy
+  // ✅ IntersectionObserver is created lazily once
   function getObserver() {
     if (ref.current === null) {
       ref.current = new IntersectionObserver(onIntersect);
@@ -829,50 +832,50 @@ function Image(props) {
     return ref.current;
   }
 
-  // Ketika Anda butuh, panggil getObserver()
+  // When you need it, call getObserver()
   // ...
 }
 ```
 
-Ini menghindari pembuatan objek yang *expensive* hingga objek tersebut benar-benar dibutuhkan untuk pertama kalinya. Jika Anda menggunakan *Flow* atau *TypeScript*, Anda juga bisa memberikan `getObserver()` sebuah nilai yang tidak bisa dikosongkan (*non-nullable*) demi kenyamanan.
+This avoids creating an expensive object until it's truly needed for the first time. If you use Flow or TypeScript, you can also give `getObserver()` a non-nullable type for convenience.
 
 
-### Apakah *Hooks* lamban karena membuat fungsi di saat *render*? {#are-hooks-slow-because-of-creating-functions-in-render}
+### Are Hooks slow because of creating functions in render? {#are-hooks-slow-because-of-creating-functions-in-render}
 
-Tidak. Dalam peramban-peramban modern, performa kasar penutupan (*closure*) dibandingkan dengan kelas tidaklah berbeda secara signifikan kecuali dalam skenario-skenario ekstrim.
+No. In modern browsers, the raw performance of closures compared to classes doesn't differ significantly except in extreme scenarios.
 
-Sebagai tambahan, pertimbangkan bahwa desain *Hooks* itu lebih efisien dalam beberapa hal:
+In addition, consider that the design of Hooks is more efficient in a couple ways:
 
-* *Hooks* menghindari banyak awalan yang kelas butuhkan, seperti ongkos untuk membuat contoh kelas dan mengikat *event handler* di dalam konstruktor.
+* Hooks avoid a lot of the overhead that classes require, like the cost of creating class instances and binding event handlers in the constructor.
 
-* **Kode idiomatis yang menggunakan _Hooks_ tidak memerlukan _nesting_ pohon komponen mendalam** yang lazim dalam basis kode yang mana menggunakan *higher-order component*, *render props*, dan *context*. Dengan pohon komponen yang lebih kecil, React jadi punya lebih sedikit tugas untuk dikerjakan.
+* **Idiomatic code using Hooks doesn't need the deep component tree nesting** that is prevalent in codebases that use higher-order components, render props, and context. With smaller component trees, React has less work to do.
 
-Secara tradisional, performa menyangkut seputar fugsi-fungsi *inline* React sudah dihubungkan dengan bagaimana cara untuk mengoper *callback* baru setiap *render* yang memotong optimasi `shouldComponentUpdate` dalam komponen turunan. *Hooks* mendekati masalah dari tiga sisi.
+Traditionally, performance concerns around inline functions in React have been related to how passing new callbacks on each render breaks `shouldComponentUpdate` optimizations in child components. Hooks approach this problem from three sides.
 
-* *Hook* [`useCallback`](/docs/hooks-reference.html#usecallback) mengizinkan Anda untuk tetap menggunakan rujukan *callback* yang sama di antara *render* ulang sehingga `shouldComponentUpdate` akan terus bekerja:
+* The [`useCallback`](/docs/hooks-reference.html#usecallback) Hook lets you keep the same callback reference between re-renders so that `shouldComponentUpdate` continues to work:
 
-    ```js {2}
-    // Tidak akan berubah kecuali `a` atau `b` berubah
+    ```js{2}
+    // Will not change unless `a` or `b` changes
     const memoizedCallback = useCallback(() => {
       doSomething(a, b);
     }, [a, b]);
     ```
 
-* *Hook* [`useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations) membuat jadi lebih mudah untuk mengontrol ketika ada satu-satu pembaruan turunan (*children*), mengurangi kebutuhan untuk komponen murni.
+* The [`useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations) Hook makes it easier to control when individual children update, reducing the need for pure components.
 
-* Pada akhirnya, *Hook* [`useReducer`](/docs/hooks-reference.html#usereducer) mengurangi kebutuhan untuk mengoper *callback* secara mendalam, seperti yang dijelaskan di bawah ini.
+* Finally, the [`useReducer`](/docs/hooks-reference.html#usereducer) Hook reduces the need to pass callbacks deeply, as explained below.
 
-### Bagaimana cara menghindari pengoperan *callback* jadi *down*? {#how-to-avoid-passing-callbacks-down}
+### How to avoid passing callbacks down? {#how-to-avoid-passing-callbacks-down}
 
-Kami menemukan bahwa kebanyakan orang tidak menikmati pengoperan *callback* secara manual di sepanjang tiap tingkatan sebuah pohon komponen. Walaupun hal tersebut lebih gamblang, pengoperan *callback* secara manual bisa terasa seperti pekerjaan yang menguras tenaga.
+We've found that most people don't enjoy manually passing callbacks through every level of a component tree. Even though it is more explicit, it can feel like a lot of "plumbing".
 
-Dalam pohon komponen yang luas, sebuah alternatif yang kami rekomendasikan adalah untuk mengoper sebuah fungsi `dispatch` dari [`useReducer`](/docs/hooks-reference.html#usereducer) melalui *context*:
+In large component trees, an alternative we recommend is to pass down a `dispatch` function from [`useReducer`](/docs/hooks-reference.html#usereducer) via context:
 
-```js {4,5}
+```js{4,5}
 const TodosDispatch = React.createContext(null);
 
 function TodosApp() {
-  // Catatan: `dispatch` tidak akan berubah di antara render ulang
+  // Note: `dispatch` won't change between re-renders
   const [todos, dispatch] = useReducer(todosReducer);
 
   return (
@@ -883,11 +886,11 @@ function TodosApp() {
 }
 ```
 
-Turunan apapun dalam pohon yang ada di dalam `TodosApp` bisa menggunakan fungsi `dispatch` untuk mengoper tindakan kepada `TodosApp`:
+Any child in the tree inside `TodosApp` can use the `dispatch` function to pass actions up to `TodosApp`:
 
-```js {2,3}
+```js{2,3}
 function DeepChild(props) {
-  // Jika kita ingin melakukan sebuah tindakan, kita bisa mendapatkan dispatch dari context.
+  // If we want to perform an action, we can get dispatch from context.
   const dispatch = useContext(TodosDispatch);
 
   function handleClick() {
@@ -900,33 +903,33 @@ function DeepChild(props) {
 }
 ```
 
-Hal ini lebih memudahkan dari sudut pandang pemeliharaan (tidak perlu untuk terus meneruskan *callback*), dan juga menghindari masalah-masalah *callback*. Mengoper `dispatch` seperti ini merupakan rekomendasi pola untuk pembaruan-pembaruan mendalam.
+This is both more convenient from the maintenance perspective (no need to keep forwarding callbacks), and avoids the callback problem altogether. Passing `dispatch` down like this is the recommended pattern for deep updates.
 
-Perlu diingat bahawa Anda masih bisa memilih antara mengoper *state* aplikasi sebagai *prop* (lebih gamblang) atau sebagai *context* (lebih memudahkan untuk pembaruan yang sangat mendalam). Jika Anda menggunakan *context* untuk mengoper *state* juga, gunakan dua jenis *context* berbeda -- `dispatch` context* tidak pernah berubah, jadi komponen yang membacanya tidak perlu melakukan *render* ulang kecuali juga membutuhkan *state* aplikasi.
+Note that you can still choose whether to pass the application *state* down as props (more explicit) or as context (more convenient for very deep updates). If you use context to pass down the state too, use two different context types -- the `dispatch` context never changes, so components that read it don't need to rerender unless they also need the application state.
 
-### Bagimana cara membaca sebuah nilai yang sering berubah dari `useCallback`? {#how-to-read-an-often-changing-value-from-usecallback}
+### How to read an often-changing value from `useCallback`? {#how-to-read-an-often-changing-value-from-usecallback}
 
->Catatan
+>Note
 >
->Kami rekomendasikan untuk [mengoper `dispatch` dalam *context*](#how-to-avoid-passing-callbacks-down) daripada satu-persatu *callback* dalam *prop*. Pendekatan di bawah hanya disebutkan di sini sebagai pelengkap dan juga cara darurat.
+>We recommend to [pass `dispatch` down in context](#how-to-avoid-passing-callbacks-down) rather than individual callbacks in props. The approach below is only mentioned here for completeness and as an escape hatch.
 >
->Perhatikan juga bahwa pola ini bisa menyebabkan masalah dalam [mode *concurrent*](/blog/2018/03/27/update-on-async-rendering.html). Kami berencana untuk menyediakan alternatif yang lebih ergonomis di masa yang akan datang, tapi solusi teraman sekarang adalah untuk selalu meng-invalidasi callback jika beberapa nilai bergantung pada perubahan.
+>Also note that this pattern might cause problems in the [concurrent mode](/blog/2018/03/27/update-on-async-rendering.html). We plan to provide more ergonomic alternatives in the future, but the safest solution right now is to always invalidate the callback if some value it depends on changes.
 
-Dalam beberapa kasus langka Anda mungkin butuh untuk *memoize* sebuah *callback* dengan menggunakan [`useCallback`](/docs/hooks-reference.html#usecallback) tetapi proses *memoize* tidak berjalan dengan baik karena fungsi dalam harus dibuat ulang terlalu sering. Jika fungsi yang Anda *memoize* adalah sebuah *event handler* dan tidak digunakan selama proses *render*, Anda bisa gunakan [*ref* sebagai sebuah *instance variable*](#is-there-something-like-instance-variables), dan menyimpan nilai yang terakhir di-*commit* ke dalam *ref* tersebut secara manual:
+In some rare cases you might need to memoize a callback with [`useCallback`](/docs/hooks-reference.html#usecallback) but the memoization doesn't work very well because the inner function has to be re-created too often. If the function you're memoizing is an event handler and isn't used during rendering, you can use [ref as an instance variable](#is-there-something-like-instance-variables), and save the last committed value into it manually:
 
-```js {6,10}
+```js{6,10}
 function Form() {
   const [text, updateText] = useState('');
   const textRef = useRef();
 
   useEffect(() => {
-    textRef.current = text; // Tuliskan ke ref
+    textRef.current = text; // Write it to the ref
   });
 
   const handleSubmit = useCallback(() => {
-    const currentText = textRef.current; // Membaca dari ref
+    const currentText = textRef.current; // Read it from the ref
     alert(currentText);
-  }, [textRef]); // Tidak membuat ulang handleSubmit seperti [text] 
+  }, [textRef]); // Don't recreate handleSubmit like [text] would do
 
   return (
     <>
@@ -937,12 +940,12 @@ function Form() {
 }
 ```
 
-Ini bisa saja pola yang berbelit namun menunjukkan pada Anda bahwa Anda bisa melakukan optimasi darurat ini jika membutuhkannya. Bahkan lebih bisa ditangani jika Anda mengekstraknya ke dalam sebuah *custom Hook*:
+This is a rather convoluted pattern but it shows that you can do this escape hatch optimization if you need it. It's more bearable if you extract it to a custom Hook:
 
-```js {4,16}
+```js{4,16}
 function Form() {
   const [text, updateText] = useState('');
-  // Akan di memoize bahkan jika `text` berubah:
+  // Will be memoized even if `text` changes:
   const handleSubmit = useEventCallback(() => {
     alert(text);
   }, [text]);
@@ -957,7 +960,7 @@ function Form() {
 
 function useEventCallback(fn, dependencies) {
   const ref = useRef(() => {
-    throw new Error('Tidak bisa memanggil event handler ketika proses render.');
+    throw new Error('Cannot call an event handler while rendering.');
   });
 
   useEffect(() => {
@@ -971,27 +974,27 @@ function useEventCallback(fn, dependencies) {
 }
 ```
 
-Dalam kasus-kasus tersebut, kami **tidak merekomendasikan pola ini** dan hanya untuk menunjukannya sebagai pelengkap di sini. Sebagai gantinya, akan lebih baik untuk [meghindari pengoperan *callback* lebih mendalam](#how-to-avoid-passing-callbacks-down).
+In either case, we **don't recommend this pattern** and only show it here for completeness. Instead, it is preferable to [avoid passing callbacks deep down](#how-to-avoid-passing-callbacks-down).
 
 
-## *Under the Hood* {#under-the-hood}
+## Under the Hood {#under-the-hood}
 
-### Bagaimana React menghubungkan panggilan *Hook* dengan komponen? {#how-does-react-associate-hook-calls-with-components}
+### How does React associate Hook calls with components? {#how-does-react-associate-hook-calls-with-components}
 
-React merekam jejak komponen yang baru saja mulai di-*render*. Terima kasih pada [aturan *Hooks*](/docs/hooks-rules.html), kita tahu bahwa *Hooks* hanya dipanggil dari komponen React (atau *custom Hooks* -- yang mana juga dipanggil dari komponen React).
+React keeps track of the currently rendering component. Thanks to the [Rules of Hooks](/docs/hooks-rules.html), we know that Hooks are only called from React components (or custom Hooks -- which are also only called from React components).
 
-Terdapat daftar internal dari *"memory cells"* yang berhubungkan dengan tiap komponen. Itu semua hanyalah objek-objek JavaScript dimana kita bisa menaruh data. Ketika Anda memanggil sebuah *Hook* seperti `useState()`, ia membaca *cell* terkini (atau menginisialisasikannya selama *render* pertama), dan memindahkan *pointer* ke *cell* selanjutnya. Inilah bagaimana masing-masing panggilan `useState()` mendapat *local state* sendiri-sendiri.
+There is an internal list of "memory cells" associated with each component. They're just JavaScript objects where we can put some data. When you call a Hook like `useState()`, it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple `useState()` calls each get independent local state.
 
-### Bagaimana *seni awal*-nya *Hooks*? {#what-is-the-prior-art-for-hooks}
+### What is the prior art for Hooks? {#what-is-the-prior-art-for-hooks}
 
-*Hooks* mempersatukan ide-ide dari beberapa sumber berbeda:
+Hooks synthesize ideas from several different sources:
 
-* Eksperimen lama kami dengan API fungsional dalam repositori[*react-future*](https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State).
-* Eksperimen-eksperimen komunitas React dengan me-*render prop API*, termasuk [Reactions Component](https://github.com/reactions/component) dari [Ryan Florence](https://github.com/ryanflorence).
-* Pengajuan [kata kunci `adopt`](https://gist.github.com/trueadm/17beb64288e30192f3aa29cad0218067) dari [Dominic Gannaway](https://github.com/trueadm) sebagai *sugar syntax* untuk me-*render* *prop*.
-* *State variable* dan *state cell* dalam [DisplayScript](http://displayscript.org/introduction.html).
-* [Reducer components](https://reasonml.github.io/reason-react/docs/en/state-actions-reducer.html) dalam *ReasonReact*.
-* [Subscriptions](http://reactivex.io/rxjs/class/es6/Subscription.js~Subscription.html) dalam Rx.
-* [Algebraic effects](https://github.com/ocamllabs/ocaml-effects-tutorial#2-effectful-computations-in-a-pure-setting) dalam *Multicore OCaml*.
+* Our old experiments with functional APIs in the [react-future](https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State) repository.
+* React community's experiments with render prop APIs, including [Ryan Florence](https://github.com/ryanflorence)'s [Reactions Component](https://github.com/reactions/component).
+* [Dominic Gannaway](https://github.com/trueadm)'s [`adopt` keyword](https://gist.github.com/trueadm/17beb64288e30192f3aa29cad0218067) proposal as a sugar syntax for render props.
+* State variables and state cells in [DisplayScript](http://displayscript.org/introduction.html).
+* [Reducer components](https://reasonml.github.io/reason-react/docs/en/state-actions-reducer.html) in ReasonReact.
+* [Subscriptions](http://reactivex.io/rxjs/class/es6/Subscription.js~Subscription.html) in Rx.
+* [Algebraic effects](https://github.com/ocamllabs/ocaml-effects-tutorial#2-effectful-computations-in-a-pure-setting) in Multicore OCaml.
 
-[Sebastian Markbåge](https://github.com/sebmarkbage) muncul dengan desain orisinil untuk *Hooks*, yang nantinya akan disempurnakan oleh [Andrew Clark](https://github.com/acdlite), [Sophie Alpert](https://github.com/sophiebits), [Dominic Gannaway](https://github.com/trueadm), serta anggota-anggota lain tim React.
+[Sebastian Markbåge](https://github.com/sebmarkbage) came up with the original design for Hooks, later refined by [Andrew Clark](https://github.com/acdlite), [Sophie Alpert](https://github.com/sophiebits), [Dominic Gannaway](https://github.com/trueadm), and other members of the React team.
diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 1f0165a88..954b698f7 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -13,7 +13,7 @@ redirect_from:
   - "docs/jsx-in-depth-ko-KR.html"
 ---
 
-Pada dasarnya, JSX hnaya menyediakan sintaksis-sintaksis yang mudah ditulis dan dimengerti (*syntatic sugar*) untuk fungsi *`React.createElement(component, prop, ...children)`*. Kode JSX:
+Pada dasarnya, JSX hanya menyediakan sintaksis-sintaksis yang mudah ditulis dan dimengerti (*syntatic sugar*) untuk fungsi *`React.createElement(component, prop, ...children)`*. Kode JSX:
 
 ```js
 <MyButton color="blue" shadowSize={2}>
diff --git a/src/components/CodeEditor/CodeEditor copy.js b/src/components/CodeEditor/CodeEditor copy.js
new file mode 100644
index 000000000..479acb2e2
--- /dev/null
+++ b/src/components/CodeEditor/CodeEditor copy.js	
@@ -0,0 +1,369 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ */
+
+import React, {
+  Component
+} from 'react';
+import ReactDOM from 'react-dom';
+import Remarkable from 'remarkable';
+import {
+  LiveEditor,
+  LiveProvider
+} from 'react-live';
+import {
+  colors,
+  media
+} from 'theme';
+import MetaTitle from 'templates/components/MetaTitle';
+
+// Ganti unicode menjadi text untuk bahasa lainnya
+const unicodeToText = text =>
+  text.replace(/\\u([\dA-F]{4})/gi, (_, p1) =>
+    String.fromCharCode(parseInt(p1, 16)),
+  );
+
+const compileES5 = (
+  code, // eslint-disable-next-line no-undef
+) => Babel.transform(code, {
+  presets: ['es2015', 'react']
+}).code;
+
+// eslint-disable-next-line no-undef
+const compileES6 = code => Babel.transform(code, {
+  presets: ['react']
+}).code;
+
+class CodeEditor extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = this._updateState(props.code);
+    this.state.showJSX = true;
+  }
+
+  componentDidMount() {
+    this._render();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.compiled !== this.state.compiled) {
+      this._render();
+    }
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.code !== nextProps.code) {
+      this.setState(this._updateState(nextProps.code));
+    }
+  }
+
+  render() {
+    const {
+      containerNodeID
+    } = this.props;
+    const {
+      compiledES6,
+      code,
+      error,
+      showBabelErrorMessage,
+      showJSX,
+    } = this.state;
+
+    let errorMessage;
+    if (showBabelErrorMessage) {
+      errorMessage = ( < span >
+        <
+        i > Babel < /i> tidak bisa dimuat. <
+        br / >
+        <
+        br / >
+        This can be caused by an ad blocker.If you 're using one, consider
+        adding reactjs.org to the whitelist so the live code examples will work. < /span>
+      );
+    } else if (error != null) {
+      errorMessage = error.message;
+    }
+
+    return ( <
+        LiveProvider code = {
+          showJSX ? code : compiledES6
+        }
+        mountStylesheet = {
+          false
+        } >
+        <
+        div css = {
+          {
+            [media.greaterThan('medium')]: {
+              display: 'flex',
+              alignItems: 'stretch',
+              flexDirection: 'row',
+            },
+
+            [media.lessThan('small')]: {
+              display: 'block',
+            },
+          }
+        } >
+        <
+        div css = {
+          {
+            flex: '0 0 70%',
+            overflow: 'hidden',
+            borderRadius: '10px 0 0 10px',
+
+            [media.lessThan('medium')]: {
+              borderRadius: '10px 10px 0 0',
+            },
+          }
+        } >
+        <
+        div css = {
+          {
+            padding: '0px 10px',
+            background: colors.darker,
+            color: colors.white,
+          }
+        } >
+        <
+        MetaTitle onDark = {
+          true
+        } >
+        Live JSX Editor <
+        label css = {
+          {
+            fontSize: 14,
+            float: 'right',
+            cursor: 'pointer',
+          }
+        } >
+        <
+        input checked = {
+          this.state.showJSX
+        }
+        onChange = {
+          event =>
+          this.setState({
+            showJSX: event.target.checked
+          })
+        }
+        type = "checkbox" /
+        >
+        {
+          ' '
+        }
+        JSX ?
+        <
+        /label> < /
+        MetaTitle > <
+        /div> <
+        div css = {
+          {
+            height: '100%',
+            width: '100%',
+            borderRadius: '0',
+            maxHeight: '340px !important',
+            marginTop: '0 !important',
+            marginLeft: '0 !important',
+            paddingLeft: '0 !important',
+            marginRight: '0 !important',
+            paddingRight: '0 !important',
+            marginBottom: '0 !important',
+            paddingBottom: '20px !important',
+            [media.lessThan('medium')]: {
+              marginBottom: '0 !important',
+            },
+
+            '& pre.prism-code[contenteditable]': {
+              outline: 0,
+              overflow: 'auto',
+              marginRight: '0 !important',
+              marginBottom: '0 !important',
+            },
+          }
+        }
+        className = "gatsby-highlight" >
+        <
+        LiveEditor ignoreTabKey = {
+          true
+        }
+        onChange = {
+          this._onChange
+        }
+        /> < /
+        div > <
+        /div> {
+        error && ( <
+          div css = {
+            {
+              flex: '0 0 30%',
+              overflow: 'hidden',
+              border: `1px solid ${colors.error}`,
+              borderRadius: '0 10px 10px 0',
+              fontSize: 12,
+              lineHeight: 1.5,
+
+              [media.lessThan('medium')]: {
+                borderRadius: '0 0 10px 10px',
+              },
+            }
+          } >
+          <
+          div css = {
+            {
+              padding: '0px 10px',
+              background: colors.error,
+              color: colors.white,
+            }
+          } >
+          <
+          MetaTitle cssProps = {
+            {
+              color: colors.white,
+            }
+          } >
+          Error <
+          /MetaTitle> < /
+          div > <
+          pre css = {
+            {
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+              color: colors.error,
+              padding: 10,
+            }
+          } > {
+            errorMessage
+          } <
+          /pre> < /
+          div >
+        )
+      } {
+        !error && ( <
+          div css = {
+            {
+              flex: '0 0 30%',
+              overflow: 'hidden',
+              border: `1px solid ${colors.divider}`,
+              borderRadius: '0 10px 10px 0',
+
+              [media.lessThan('medium')]: {
+                borderRadius: '0 0 10px 10px',
+              },
+            }
+          } >
+          <
+          div css = {
+            {
+              padding: '0 10px',
+              backgroundColor: colors.divider,
+            }
+          } >
+          <
+          MetaTitle > Result < /MetaTitle> < /
+          div > <
+          div id = {
+            containerNodeID
+          }
+          css = {
+            {
+              padding: 10,
+              maxHeight: '340px !important',
+              overflow: 'auto',
+
+              '& input': {
+                width: '100%',
+                display: 'block',
+                border: '1px solid #ccc', // TODO
+                padding: 5,
+              },
+
+              '& button': {
+                marginTop: 10,
+                padding: '5px 10px',
+              },
+
+              '& label': {
+                display: 'block',
+                marginTop: 10,
+              },
+
+              '& textarea': {
+                width: '100%',
+                height: 60,
+                padding: 5,
+              },
+            }
+          }
+          /> < /
+          div >
+        )
+      } <
+      /div> < /
+    LiveProvider >
+  );
+}
+
+_render() {
+  const {
+    compiled
+  } = this.state;
+
+  try {
+    // Example code requires React, ReactDOM, and Remarkable to be within scope.
+    // It also requires a "mountNode" variable for ReactDOM.render()
+    // eslint-disable-next-line no-new-func
+    new Function('React', 'ReactDOM', 'Remarkable', compiled)(
+      React,
+      ReactDOM,
+      Remarkable,
+    );
+  } catch (error) {
+    console.error(error);
+
+    this.setState({
+      compiled: null,
+      error,
+    });
+  }
+}
+
+_updateState(code, showJSX = true) {
+  try {
+    const newState = {
+      compiled: compileES5(code),
+      error: null,
+    };
+
+    if (showJSX) {
+      newState.code = code;
+      newState.compiledES6 = unicodeToText(compileES6(code));
+    } else {
+      newState.compiledES6 = code;
+    }
+
+    return newState;
+  } catch (error) {
+    console.error(error);
+
+    // Certain ad blockers (eg Fair AdBlocker) prevent Babel from loading.
+    // If we suspect this is the case, we can show a more helpful error.
+    const showBabelErrorMessage = !window.Babel;
+
+    return {
+      compiled: null,
+      error,
+      showBabelErrorMessage,
+    };
+  }
+}
+
+_onChange = code => {
+  this.setState(state => this._updateState(code, state.showJSX));
+};
+}
+
+export default CodeEditor;
\ No newline at end of file

From b0787ba916873bb4ea54561b530f31c4bed3c6a3 Mon Sep 17 00:00:00 2001
From: dummyeuy <ghalib12.euy16@gmail.com>
Date: Thu, 14 Nov 2019 11:35:53 +0700
Subject: [PATCH 09/14] change back .eslintignore and .gitignore to their
 default and remove src/CodeEditor/CodeEditor copy.js from the latest commit
 according to
 https://github.com/reactjs/id.reactjs.org/pull/125#pullrequestreview-316033550

---
 .eslintignore                                |   6 +-
 .gitignore                                   |   3 +-
 src/components/CodeEditor/CodeEditor copy.js | 369 -------------------
 3 files changed, 3 insertions(+), 375 deletions(-)
 delete mode 100644 src/components/CodeEditor/CodeEditor copy.js

diff --git a/.eslintignore b/.eslintignore
index 944e2765e..a4ae99f8b 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
+  
 node_modules/*
 
 # Ignore markdown files and examples
@@ -7,7 +8,4 @@ content/*
 public/*
 
 # Ignore examples
-examples/*
-
-# Ignore all javascript files in src folder for translation purposes
-src/components/*
\ No newline at end of file
+examples/*
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 420e5874f..d1bde99ce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,5 +3,4 @@
 .idea
 node_modules
 public
-yarn-error.log
-.vscode
\ No newline at end of file
+yarn-error.log
\ No newline at end of file
diff --git a/src/components/CodeEditor/CodeEditor copy.js b/src/components/CodeEditor/CodeEditor copy.js
deleted file mode 100644
index 479acb2e2..000000000
--- a/src/components/CodeEditor/CodeEditor copy.js	
+++ /dev/null
@@ -1,369 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * @emails react-core
- */
-
-import React, {
-  Component
-} from 'react';
-import ReactDOM from 'react-dom';
-import Remarkable from 'remarkable';
-import {
-  LiveEditor,
-  LiveProvider
-} from 'react-live';
-import {
-  colors,
-  media
-} from 'theme';
-import MetaTitle from 'templates/components/MetaTitle';
-
-// Ganti unicode menjadi text untuk bahasa lainnya
-const unicodeToText = text =>
-  text.replace(/\\u([\dA-F]{4})/gi, (_, p1) =>
-    String.fromCharCode(parseInt(p1, 16)),
-  );
-
-const compileES5 = (
-  code, // eslint-disable-next-line no-undef
-) => Babel.transform(code, {
-  presets: ['es2015', 'react']
-}).code;
-
-// eslint-disable-next-line no-undef
-const compileES6 = code => Babel.transform(code, {
-  presets: ['react']
-}).code;
-
-class CodeEditor extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = this._updateState(props.code);
-    this.state.showJSX = true;
-  }
-
-  componentDidMount() {
-    this._render();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState.compiled !== this.state.compiled) {
-      this._render();
-    }
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.code !== nextProps.code) {
-      this.setState(this._updateState(nextProps.code));
-    }
-  }
-
-  render() {
-    const {
-      containerNodeID
-    } = this.props;
-    const {
-      compiledES6,
-      code,
-      error,
-      showBabelErrorMessage,
-      showJSX,
-    } = this.state;
-
-    let errorMessage;
-    if (showBabelErrorMessage) {
-      errorMessage = ( < span >
-        <
-        i > Babel < /i> tidak bisa dimuat. <
-        br / >
-        <
-        br / >
-        This can be caused by an ad blocker.If you 're using one, consider
-        adding reactjs.org to the whitelist so the live code examples will work. < /span>
-      );
-    } else if (error != null) {
-      errorMessage = error.message;
-    }
-
-    return ( <
-        LiveProvider code = {
-          showJSX ? code : compiledES6
-        }
-        mountStylesheet = {
-          false
-        } >
-        <
-        div css = {
-          {
-            [media.greaterThan('medium')]: {
-              display: 'flex',
-              alignItems: 'stretch',
-              flexDirection: 'row',
-            },
-
-            [media.lessThan('small')]: {
-              display: 'block',
-            },
-          }
-        } >
-        <
-        div css = {
-          {
-            flex: '0 0 70%',
-            overflow: 'hidden',
-            borderRadius: '10px 0 0 10px',
-
-            [media.lessThan('medium')]: {
-              borderRadius: '10px 10px 0 0',
-            },
-          }
-        } >
-        <
-        div css = {
-          {
-            padding: '0px 10px',
-            background: colors.darker,
-            color: colors.white,
-          }
-        } >
-        <
-        MetaTitle onDark = {
-          true
-        } >
-        Live JSX Editor <
-        label css = {
-          {
-            fontSize: 14,
-            float: 'right',
-            cursor: 'pointer',
-          }
-        } >
-        <
-        input checked = {
-          this.state.showJSX
-        }
-        onChange = {
-          event =>
-          this.setState({
-            showJSX: event.target.checked
-          })
-        }
-        type = "checkbox" /
-        >
-        {
-          ' '
-        }
-        JSX ?
-        <
-        /label> < /
-        MetaTitle > <
-        /div> <
-        div css = {
-          {
-            height: '100%',
-            width: '100%',
-            borderRadius: '0',
-            maxHeight: '340px !important',
-            marginTop: '0 !important',
-            marginLeft: '0 !important',
-            paddingLeft: '0 !important',
-            marginRight: '0 !important',
-            paddingRight: '0 !important',
-            marginBottom: '0 !important',
-            paddingBottom: '20px !important',
-            [media.lessThan('medium')]: {
-              marginBottom: '0 !important',
-            },
-
-            '& pre.prism-code[contenteditable]': {
-              outline: 0,
-              overflow: 'auto',
-              marginRight: '0 !important',
-              marginBottom: '0 !important',
-            },
-          }
-        }
-        className = "gatsby-highlight" >
-        <
-        LiveEditor ignoreTabKey = {
-          true
-        }
-        onChange = {
-          this._onChange
-        }
-        /> < /
-        div > <
-        /div> {
-        error && ( <
-          div css = {
-            {
-              flex: '0 0 30%',
-              overflow: 'hidden',
-              border: `1px solid ${colors.error}`,
-              borderRadius: '0 10px 10px 0',
-              fontSize: 12,
-              lineHeight: 1.5,
-
-              [media.lessThan('medium')]: {
-                borderRadius: '0 0 10px 10px',
-              },
-            }
-          } >
-          <
-          div css = {
-            {
-              padding: '0px 10px',
-              background: colors.error,
-              color: colors.white,
-            }
-          } >
-          <
-          MetaTitle cssProps = {
-            {
-              color: colors.white,
-            }
-          } >
-          Error <
-          /MetaTitle> < /
-          div > <
-          pre css = {
-            {
-              whiteSpace: 'pre-wrap',
-              wordBreak: 'break-word',
-              color: colors.error,
-              padding: 10,
-            }
-          } > {
-            errorMessage
-          } <
-          /pre> < /
-          div >
-        )
-      } {
-        !error && ( <
-          div css = {
-            {
-              flex: '0 0 30%',
-              overflow: 'hidden',
-              border: `1px solid ${colors.divider}`,
-              borderRadius: '0 10px 10px 0',
-
-              [media.lessThan('medium')]: {
-                borderRadius: '0 0 10px 10px',
-              },
-            }
-          } >
-          <
-          div css = {
-            {
-              padding: '0 10px',
-              backgroundColor: colors.divider,
-            }
-          } >
-          <
-          MetaTitle > Result < /MetaTitle> < /
-          div > <
-          div id = {
-            containerNodeID
-          }
-          css = {
-            {
-              padding: 10,
-              maxHeight: '340px !important',
-              overflow: 'auto',
-
-              '& input': {
-                width: '100%',
-                display: 'block',
-                border: '1px solid #ccc', // TODO
-                padding: 5,
-              },
-
-              '& button': {
-                marginTop: 10,
-                padding: '5px 10px',
-              },
-
-              '& label': {
-                display: 'block',
-                marginTop: 10,
-              },
-
-              '& textarea': {
-                width: '100%',
-                height: 60,
-                padding: 5,
-              },
-            }
-          }
-          /> < /
-          div >
-        )
-      } <
-      /div> < /
-    LiveProvider >
-  );
-}
-
-_render() {
-  const {
-    compiled
-  } = this.state;
-
-  try {
-    // Example code requires React, ReactDOM, and Remarkable to be within scope.
-    // It also requires a "mountNode" variable for ReactDOM.render()
-    // eslint-disable-next-line no-new-func
-    new Function('React', 'ReactDOM', 'Remarkable', compiled)(
-      React,
-      ReactDOM,
-      Remarkable,
-    );
-  } catch (error) {
-    console.error(error);
-
-    this.setState({
-      compiled: null,
-      error,
-    });
-  }
-}
-
-_updateState(code, showJSX = true) {
-  try {
-    const newState = {
-      compiled: compileES5(code),
-      error: null,
-    };
-
-    if (showJSX) {
-      newState.code = code;
-      newState.compiledES6 = unicodeToText(compileES6(code));
-    } else {
-      newState.compiledES6 = code;
-    }
-
-    return newState;
-  } catch (error) {
-    console.error(error);
-
-    // Certain ad blockers (eg Fair AdBlocker) prevent Babel from loading.
-    // If we suspect this is the case, we can show a more helpful error.
-    const showBabelErrorMessage = !window.Babel;
-
-    return {
-      compiled: null,
-      error,
-      showBabelErrorMessage,
-    };
-  }
-}
-
-_onChange = code => {
-  this.setState(state => this._updateState(code, state.showJSX));
-};
-}
-
-export default CodeEditor;
\ No newline at end of file

From 62d3f9b441b020e44fe405fe3db15fbef53f232c Mon Sep 17 00:00:00 2001
From: dummyeuy <ghalib12.euy16@gmail.com>
Date: Thu, 14 Nov 2019 16:47:33 +0700
Subject: [PATCH 10/14] revisions are applied from first-half of the page
 review according to
 https://github.com/reactjs/id.reactjs.org/pull/125#pullrequestreview-316762410

---
 content/docs/jsx-in-depth.md | 58 ++++++++++++++++++------------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 954b698f7..7ff07895c 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -21,7 +21,7 @@ Pada dasarnya, JSX hanya menyediakan sintaksis-sintaksis yang mudah ditulis dan
 </MyButton>
 ```
 
-disusun(*compile*) menjadi:
+di-*compile* menjadi:
 
 ```js
 React.createElement(
@@ -47,7 +47,7 @@ React.createElement(
 )
 ```
 
-Jika Anda ingin menguji bagaimana JSX yang spesifik JSX dikonversi menjadi JavaScript, cobalah [*Babel compiler* daring](babel://jsx-simple-example) ini.
+Jika Anda ingin mencoba bagaimana JSX yang spesifik JSX dikonversi menjadi JavaScript, cobalah [*Babel compiler* daring](babel://jsx-simple-example) ini.
 
 ## Spesifikasi Jenis Elemen React {#specifying-the-react-element-type}
 
@@ -61,7 +61,7 @@ Semenjak JSX mengompilasi jadi panggilan-panggilan pada `React.createElement`, `
 
 Contohnya, kedua import tersebut dibutuhkan dalam kode ini, bahkan ketika `React` dan `CustomButton` tidak secara langsung mengacu dari JavaScript:
 
-```js {1,2,5}
+```js{1,2,5}
 import React from 'react';
 import CustomButton from './CustomButton';
 
@@ -73,11 +73,11 @@ function WarningButton() {
 
 Jika Anda tidak menggunakan sebuah *bundler* JavaScript dan memuat React dari penanda `<script>`, penanda tersebut sudah termasuk di dalam cakupan seperti halnya `React` secara global.
 
-### Menggunakan Notasi *Dot* untuk Jenis JSX {#using-dot-notation-for-jsx-type}
+### Menggunakan Notasi Titik untuk Jenis JSX {#using-dot-notation-for-jsx-type}
 
-Anda juga bisa merujuk pada sebuah komponen React menggunakan *dot-notation* dari dalam JSX. Ini memudahkan jika Anda memiliki sebuah modul tunggal yang mengekspor bnayak komponen React. Contohnya, jika `MyComponents.DatePicker` adalah sebuah komponen, Anda bisa menggunakannya langsung dari JSX dengan cara:
+Anda juga bisa merujuk pada sebuah komponen React menggunakan notasi titik dari dalam JSX. Ini memudahkan jika Anda memiliki sebuah modul tunggal yang mengekspor bnayak komponen React. Contohnya, jika `MyComponents.DatePicker` adalah sebuah komponen, Anda bisa menggunakannya langsung dari JSX dengan cara:
 
-```js {10}
+```js{10}
 import React from 'react';
 
 const MyComponents = {
@@ -91,15 +91,15 @@ function BlueDatePicker() {
 }
 ```
 
-### Komponen *User-Defined* Harus Di-Kapitalisasi {#user-defined-components-must-be-capitalized}
+### Komponen *User-Defined* Harus Dikapitalisasi {#user-defined-components-must-be-capitalized}
 
-Ketika sebuah tipe elemen dimulai dengan sebuah huruf kecil (*lowercase*), hal tersebut merujuk pada sebuah komponen *built-in* seperti `<div>` atau `<span>` dan menghasilkan sebuah *string* `'div'` atau `'span'` yang dioper ke `React.createElement`. Pengetikan yang dimulai dengan huruf kapital seperti `<Foo />` dikompilasi ke `React.createElement(Foo)` dan sesuai dengan sebuah komponen yang didefinisikan atau diimpor dalam *file* JavaScript Anda.
+Ketika sebuah tipe elemen dimulai dengan sebuah huruf kecil (*lowercase*), hal tersebut merujuk pada sebuah komponen bawaan seperti `<div>` atau `<span>` dan menghasilkan sebuah *string* `'div'` atau `'span'` yang dioper ke `React.createElement`. Pengetikan yang dimulai dengan huruf kapital seperti `<Foo />` dikompilasi ke `React.createElement(Foo)` dan sesuai dengan sebuah komponen yang didefinisikan atau diimpor dalam *file* JavaScript Anda.
 
-Kami merekomendasikan pemberian nama komponen dengan huruf kapital. Jika Andam memiliki sebuah komponen yang dimulai dengan sebuah huruf *lowercase*, serahkan komponen tersebut ke variabel yang dikapitalisasi sebelum menggunakannya dalam JSX.
+Kami merekomendasikan pemberian nama komponen dengan huruf kapital. Jika Anda memiliki sebuah komponen yang dimulai dengan sebuah huruf *lowercase*, serahkan komponen tersebut ke variabel yang dikapitalisasi sebelum menggunakannya dalam JSX.
 
 Sebagai contoh, kode ini tidak akan berjalan seperti yang diharapkan:
 
-```js {3,4,10,11}
+```js{3,4,10,11}
 import React from 'react';
 
 // Salah! Ini adalah sebuah komponen dan seharusnya dikapitalisasi:
@@ -116,7 +116,7 @@ function HelloWorld() {
 
 Untuk memperbaiki ini, kita akan menamakan ulang `hello` menjadi `Hello` dan menggunakan `<Hello />` ketika mengacu ke sana:
 
-```js {3,4,10,11}
+```js{3,4,10,11}
 import React from 'react';
 
 // Benar! Ini adalah sebuah komponen dan memang seharusnya dikapitalisasi:
@@ -135,7 +135,7 @@ function HelloWorld() {
 
 Anda tidak bisa menggunakan sebuah ekspresi umum sebagai jenis elemen React. Jika ingin menggunakan sebuah ekspresi umum untuk mengindikasikan jenis elemen, serahkan saja ekspresi umum tersebut ke variabel yang dikapitalisasi dahulu. Ini seringkali muncul ketika Anda ingin me-*render* sebuah komponen berbeda berdasarkan sebuah *prop*:
 
-```js {10,11}
+```js{10,11}
 import React from 'react';
 import { PhotoStory, VideoStory } from './stories';
 
@@ -152,7 +152,7 @@ function Story(props) {
 
 Untuk memperbaiki ini, kita akan menyerahkan jenis tersebut ke sebuah variabel yang dikapitalisasi terlebih dahulu:
 
-```js {10-12}
+```js{10-12}
 import React from 'react';
 import { PhotoStory, VideoStory } from './stories';
 
@@ -184,7 +184,7 @@ Untuk `MyComponent`, nilai `props.foo` akan menjadi `10` karena ekspresi `1 + 2
 
 Pernyataan-pernyataan `if` dan pengulangan-pengulangan (*loop*) `for` bukanlah ekspresi dalam JavaScript, jadi hal-hal tersebut tidak bisa digunakan secara langsung dalam JSX. Sebagai gantinya, Anda bisa menempatkan ini di dalam kode yang melingkupi. Contohnya:
 
-```js {3-7}
+```js{3-7}
 function NumberDescriber(props) {
   let description;
   if (props.number % 2 == 0) {
@@ -216,11 +216,11 @@ Ketika Anda mengoper sebuah *string literal*, nilainya tidak luput dari HTML (*H
 <MyComponent message={'<3'} />
 ```
 
-Perilaku (*behavior*) biasanya tidak relevan. Dan hanya disebutkan di sini untuk melengkapi.
+Perilaku ini biasanya tidak relevan. Dan hanya disebutkan di sini untuk melengkapi.
 
-### Prop secara mendasar Diatur menjadi "True" {#props-default-to-true}
+### Nilai *Default* Prop adalah "True" {#props-default-to-true}
 
-If you pass no value for a prop, it defaults to `true`. These two JSX expressions are equivalent:
+Jika Anda tidak mengoper nilai apapun ke sebuah *prop*, nilai *default*-nya adalah 'true'. Kedua ekspresi JSX ini adalah sama:
 
 ```js
 <MyTextBox autocomplete />
@@ -228,13 +228,13 @@ If you pass no value for a prop, it defaults to `true`. These two JSX expression
 <MyTextBox autocomplete={true} />
 ```
 
-Secara umum, kami tidak merekomendasikan menggunakan cara ii karena bisa membingungkan Anda dengan [*shorthand* objek *ES6*](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) `{foo}` yang mana kependekan dari `{foo: foo}` ketimbang `{foo: true}`. *Behavior* ini demikian adanya karena cocok dengan *behavior*-nya HTML.
+Secara umum, kami tidak merekomendasikan menggunakan cara ini karena bisa membingungkan Anda dengan [*shorthand* objek *ES6*](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) `{foo}` yang merupakan kependekan dari `{foo: foo}` ketimbang `{foo: true}`. *Behavior* ini demikian adanya karena cocok dengan perilaku HTML.
 
 ### Menyebarkan Atribut {#spread-attributes}
 
 Jika Anda memiliki `props` sebagai sebuah objek, dan ingin mengopernya ke JSX, Anda bisa gunakan `...` sebagai sebuah operator "penyebaran" (*spread*) untuk mengoper ke objek *prop* yang utuh. Kedua komponen ini adalah sama:
 
-```js {7}
+```js{7}
 function App1() {
   return <Greeting firstName="Ben" lastName="Hector" />;
 }
@@ -247,7 +247,7 @@ function App2() {
 
 Anda juga bisa mengambil *prop* tertentu yang mana komponen Anda akan gunakan ketika mengoperkan semua *prop* lainnya menggunakan operator penyebaran.
 
-```js {2}
+```js{2}
 const Button = props => {
   const { kind, ...other } = props;
   const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
@@ -265,12 +265,12 @@ const App = () => {
 };
 ```
 
-Pada contoh di atas, *jenis* (`kind`) *prop* tersebut secara aman digunakan dan *tidak* dioper kepada elemen `<button>` dalam DOM.
+Pada contoh di atas, *prop* `kind` tersebut secara aman digunakan dan *tidak* dioper kepada elemen `<button>` dalam DOM.
 Semua *prop* lainnya dioper melalui objek `...other` membuat komponen ini begitu fleksibel. Anda bisa lihat bahwa komponen tersebut mengoper sebuah *prop* `onClick` dan *prop* `children`.
 
 Penyebaran atribut bisa berguna tetapi juga membuatnya mudah mengoper *prop* yang tidak perlu ke komponen-komponen yang tidak memperdulikan *prop* tersebut atau mengoper atribut-atribut HTML yang tidak valid ke DOM. Kami rekomendasikan menggunakan sintaks ini seperlunya.  
 
-## Turunan (*Children*) dalam JSX {#children-in-jsx}
+## *Children* dalam JSX {#children-in-jsx}
 
 Dalam ekspresi JSX yang mengandung penanda (*tag*) pembuka dan *tag* penutup, konten yang ada di antara penanda tersebut dioper sebagai *prop* khusus: `props.children`. Ada beberapa cara berbeda untuk mengoper turunan (*children*):
 
@@ -345,7 +345,7 @@ render() {
 }
 ```
 
-### Ekspresi JavaScript as Turunan (*Children*) {#javascript-expressions-as-children}
+### Ekspresi JavaScript sebagai *Children* {#javascript-expressions-as-children}
 
 Anda dapat mengoper ekspresi JavaScript apapun sebagai turunan, dengan cara memenyertakannya di antara `{}`. Sebagai contoh, ekspresi-ekspresi ini adalah sama:
 
@@ -357,7 +357,7 @@ Anda dapat mengoper ekspresi JavaScript apapun sebagai turunan, dengan cara meme
 
 Ini seringkali berguna untuk me-*render* sebuah daftar ekspresi JSX yang panjangnya dapat berubah-ubah. Contohnya, berikut ini me-*render* sebuah daftar HTML:
 
-```js {2,9}
+```js{2,9}
 function Item(props) {
   return <li>{props.message}</li>;
 }
@@ -374,7 +374,7 @@ function TodoList() {
 
 Ekspresi-ekspresi JavaScript juga dapat dicampurkan dengan jenis-jenis turunan lain. Ini seringkali berguna dalam pengganti *string template*:
 
-```js {2}
+```js{2}
 function Hello(props) {
   return <div>Hello {props.addressee}!</div>;
 }
@@ -384,7 +384,7 @@ function Hello(props) {
 
 Normalnya, ekspresi JavaScript dimasukkan ke dalam JSX akan ditaksir menjadis sebuah *string*, sebuah elemen React, atau menjadi daftar hal-hal semacam itu. Bagaimanapun, `props.children` bekerja seperti halnya *prop* apapun yang mana bisa mengoper jenis data apapun, tidak hanya jenis data yang React tahu bagaimana cara untuk me-*render*-nya. Contohnya, jika Anda memiliki sebuah komponen *custom*, Anda bisa melakukan *callback* pada komponen tersebut sebagai `props.children`:
 
-```js {4,13}
+```js{4,13}
 // Memanggil callback turunan numTimes untuk menghasilkan sebuah komponen berulang
 function Repeat(props) {
   let items = [];
@@ -425,7 +425,7 @@ Turunan dioper ke sebuah komponen *custom* bisa berarti apa saja, selama kompone
 
 Ini berguna untuk secara kondisional me-*render* elemen-elemen React. JSX ini me-*render* komponen `<Header />` hanya jika `showHeader` bernilai `true`:
 
-```js {2}
+```js{2}
 <div>
   {showHeader && <Header />}
   <Content />
@@ -444,7 +444,7 @@ Satu peringatan bahwa beberapa [nilai "salah"](https://developer.mozilla.org/en-
 
 Untuk memperbaiki ini, pastikan bahwa ekspresi sebelum `&&` adalah *boolean*:
 
-```js {2}
+```js{2}
 <div>
   {props.messages.length > 0 &&
     <MessageList messages={props.messages} />
@@ -454,7 +454,7 @@ Untuk memperbaiki ini, pastikan bahwa ekspresi sebelum `&&` adalah *boolean*:
 
 Sebaliknya, jika Anda ingin sebuah nilai seperti `false`, `true`, `null`, atau `undefined` untuk muncul di *output*, Anda harus [mengkonversinya menjadi sebuah *string*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion) terlebih dahulu:
 
-```js {2}
+```js{2}
 <div>
   My JavaScript variable is {String(myVariable)}.
 </div>

From 092a8e7914c557c88766fa8148b873ea4394a763 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Mon, 2 Dec 2019 17:59:12 +0700
Subject: [PATCH 11/14] remove stray whitespace in .eslintignore

---
 .eslintignore | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index a4ae99f8b..96a4c64db 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,3 @@
-  
 node_modules/*
 
 # Ignore markdown files and examples
@@ -8,4 +7,4 @@ content/*
 public/*
 
 # Ignore examples
-examples/*
\ No newline at end of file
+examples/*

From 24d15c74465aa80a3d7c6a694d6c324c5bd284c7 Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Mon, 2 Dec 2019 18:00:11 +0700
Subject: [PATCH 12/14] remove additional accidental whitespace


From 0a99663b39251dd4fc08f63f1067f71e0a93f1c6 Mon Sep 17 00:00:00 2001
From: dummyeuy <ghalib12.euy16@gmail.com>
Date: Fri, 6 Dec 2019 13:20:44 +0700
Subject: [PATCH 13/14] bring back the previous deleted work on Hooks FAQ,
 according to
 https://github.com/reactjs/id.reactjs.org/pull/123#issuecomment-562411085

---
 content/docs/hooks-faq.md | 615 +++++++++++++++++++-------------------
 1 file changed, 306 insertions(+), 309 deletions(-)

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index 9034ed817..4d5ba61ab 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -5,12 +5,12 @@ permalink: docs/hooks-faq.html
 prev: hooks-reference.html
 ---
 
-*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
+*Hooks* adalah tambahan baru dalam React 16.8. React memungkinkan anda untuk menggunakan *state* dan fitur-fitur React lainnya tanpa perlu menuliskan sebuah kelas. 
 
-This page answers some of the frequently asked questions about [Hooks](/docs/hooks-overview.html).
+Laman ini menjawab beberapa pertanyaan yang sering diajukan (*frequently asked questions*) tentang [*Hooks*](/docs/hooks-overview.html).
 
 <!--
-  if you ever need to regenerate this, this snippet in the devtools console might help:
+  jika Anda perlu me-rgenerate ini, snippet dalam konsol devtools ini bisa membantu:
 
   $$('.anchor').map(a =>
     `${' '.repeat(2 * +a.parentNode.nodeName.slice(1))}` +
@@ -18,50 +18,50 @@ This page answers some of the frequently asked questions about [Hooks](/docs/hoo
   ).join('\n')
 -->
 
-* **[Adoption Strategy](#adoption-strategy)**
-  * [Which versions of React include Hooks?](#which-versions-of-react-include-hooks)
-  * [Do I need to rewrite all my class components?](#do-i-need-to-rewrite-all-my-class-components)
-  * [What can I do with Hooks that I couldn't with classes?](#what-can-i-do-with-hooks-that-i-couldnt-with-classes)
-  * [How much of my React knowledge stays relevant?](#how-much-of-my-react-knowledge-stays-relevant)
-  * [Should I use Hooks, classes, or a mix of both?](#should-i-use-hooks-classes-or-a-mix-of-both)
-  * [Do Hooks cover all use cases for classes?](#do-hooks-cover-all-use-cases-for-classes)
-  * [Do Hooks replace render props and higher-order components?](#do-hooks-replace-render-props-and-higher-order-components)
-  * [What do Hooks mean for popular APIs like Redux connect() and React Router?](#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router)
-  * [Do Hooks work with static typing?](#do-hooks-work-with-static-typing)
-  * [How to test components that use Hooks?](#how-to-test-components-that-use-hooks)
-  * [What exactly do the lint rules enforce?](#what-exactly-do-the-lint-rules-enforce)
-* **[From Classes to Hooks](#from-classes-to-hooks)**
-  * [How do lifecycle methods correspond to Hooks?](#how-do-lifecycle-methods-correspond-to-hooks)
-  * [How can I do data fetching with Hooks?](#how-can-i-do-data-fetching-with-hooks)
-  * [Is there something like instance variables?](#is-there-something-like-instance-variables)
-  * [Should I use one or many state variables?](#should-i-use-one-or-many-state-variables)
-  * [Can I run an effect only on updates?](#can-i-run-an-effect-only-on-updates)
-  * [How to get the previous props or state?](#how-to-get-the-previous-props-or-state)
-  * [Why am I seeing stale props or state inside my function?](#why-am-i-seeing-stale-props-or-state-inside-my-function)
-  * [How do I implement getDerivedStateFromProps?](#how-do-i-implement-getderivedstatefromprops)
-  * [Is there something like forceUpdate?](#is-there-something-like-forceupdate)
-  * [Can I make a ref to a function component?](#can-i-make-a-ref-to-a-function-component)
-  * [How can I measure a DOM node?](#how-can-i-measure-a-dom-node)
-  * [What does const [thing, setThing] = useState() mean?](#what-does-const-thing-setthing--usestate-mean)
-* **[Performance Optimizations](#performance-optimizations)**
-  * [Can I skip an effect on updates?](#can-i-skip-an-effect-on-updates)
-  * [Is it safe to omit functions from the list of dependencies?](#is-it-safe-to-omit-functions-from-the-list-of-dependencies)
-  * [What can I do if my effect dependencies change too often?](#what-can-i-do-if-my-effect-dependencies-change-too-often)
-  * [How do I implement shouldComponentUpdate?](#how-do-i-implement-shouldcomponentupdate)
-  * [How to memoize calculations?](#how-to-memoize-calculations)
-  * [How to create expensive objects lazily?](#how-to-create-expensive-objects-lazily)
-  * [Are Hooks slow because of creating functions in render?](#are-hooks-slow-because-of-creating-functions-in-render)
-  * [How to avoid passing callbacks down?](#how-to-avoid-passing-callbacks-down)
-  * [How to read an often-changing value from useCallback?](#how-to-read-an-often-changing-value-from-usecallback)
-* **[Under the Hood](#under-the-hood)**
-  * [How does React associate Hook calls with components?](#how-does-react-associate-hook-calls-with-components)
-  * [What is the prior art for Hooks?](#what-is-the-prior-art-for-hooks)
-
-## Adoption Strategy {#adoption-strategy}
-
-### Which versions of React include Hooks? {#which-versions-of-react-include-hooks}
-
-Starting with 16.8.0, React includes a stable implementation of React Hooks for:
+* **[Strategi Adopsi](#adoption-strategy)**
+  * [Versi React mana yang termasuk *Hooks* di dalamnya?](#which-versions-of-react-include-hooks)
+  * [Apakah perlu menulis ulang semua komponen kelas saya?](#do-i-need-to-rewrite-all-my-class-components)
+  * [Apa yang dapat saya lakukan dengan *Hooks* namun tidak bisa saya lakukan dengan kelas?](#what-can-i-do-with-hooks-that-i-couldnt-with-classes)
+  * [Seberapa banyak pengetahuan saya tentang React yang tetap relevan?](#how-much-of-my-react-knowledge-stays-relevant)
+  * [Haruskah saya menggunakan Hooks, kelas atau gabungan keduanya?](#should-i-use-hooks-classes-or-a-mix-of-both)
+  * [Apakah *Hooks* mencakup seluruh kasus yang digunakan untuk kelas?](#do-hooks-cover-all-use-cases-for-classes)
+  * [Apakah *Hooks* menggantikan *render props* dan *higher-order components*?](#do-hooks-replace-render-props-and-higher-order-components)
+  * [Apa yang *Hooks* peruntukan untuk API populer seperti *Redux connect()* dan *React router*?](#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router)
+  * [Apakah *Hooks* dapat berjalan dengan *static typing*?](#do-hooks-work-with-static-typing)
+  * [Bagaimana cara menguji komponen-komponen yang menggunakan Hooks?](#how-to-test-components-that-use-hooks)
+  * [Apa yang sebenarnya aturan-aturan *lint* terapkan?](#what-exactly-do-the-lint-rules-enforce)
+* **[Dari Kelas ke Hooks](#from-classes-to-hooks)**
+  * [Bagaimana cara *lifecycle method* dapat sesuai dengan Hooks?](#how-do-lifecycle-methods-correspond-to-hooks)
+  * [Bagaimana cara saya dapat memperoleh data dengan Hooks?](#how-can-i-do-data-fetching-with-hooks)
+  * [Apakah ada hal seperti *instance variable*?](#is-there-something-like-instance-variables)
+  * [Apa saya harus menggunakan satu atau beberapa *state variable*?](#should-i-use-one-or-many-state-variables)
+  * [Bisakah saya menjalakan sebuah efek hanya pada pembaruan?](#can-i-run-an-effect-only-on-updates)
+  * [Bagimana cara untuk mendapatkan kembali *prop* atau *state* sebelumnya?](#how-to-get-the-previous-props-or-state)
+  * [Mengapa saya melihat *stale prop* atau *state* dalam fungsi yang saya buat?](#why-am-i-seeing-stale-props-or-state-inside-my-function)
+  * [Bagaimana cara mengimplementasikan *getDerivedStateFromProps*?](#how-do-i-implement-getderivedstatefromprops)
+  * [Apakah ada suatu hal seperti *forceUpdate*?](#is-there-something-like-forceupdate)
+  * [Bisakah saya membuat sebuah *ref* pada sebuah komponen fungsi?](#can-i-make-a-ref-to-a-function-component)
+  * [Bagaimana cara mengukur sebuah node *DOM*](#how-can-i-measure-a-dom-node)
+  * [Apa yang dimaksud dengan *const [thing, setThing] = useState()*?](#what-does-const-thing-setthing--usestate-mean)
+* **[Optimasi Performa](#performance-optimizations)**
+  * [Bisakah saya melewatkan sebuah efek pada pembaruan?](#can-i-skip-an-effect-on-updates)
+  * [Apakah aman untuk menghilangkan fungsi dari daftar *dependency*?](#is-it-safe-to-omit-functions-from-the-list-of-dependencies)
+  * [Apa yang bisa saya lakukan jika efek *dependency* berganti terlalu sering?](#what-can-i-do-if-my-effect-dependencies-change-too-often)
+  * [Bagaimana cara mengimplementasikan *shouldComponentUpdate*?](#how-do-i-implement-shouldcomponentupdate)
+  * [Bagaimana cara *memoize* perhitungan?](#how-to-memoize-calculations)
+  * [Bagaimana cara membuat objek *expensive* secara *lazy*?](#how-to-create-expensive-objects-lazily)
+  * [Apakah *Hooks* lamban karena membuat fungsi di saat *render*?](#are-hooks-slow-because-of-creating-functions-in-render)
+  * [Bagaimana cara menghindari pengoperan *callback* menjadi *down*?](#how-to-avoid-passing-callbacks-down)
+  * [Bagimana cara membaca sebuah nilai yang sering berubah dari *useCallback*?](#how-to-read-an-often-changing-value-from-usecallback)
+* **[*Under the Hood*](#under-the-hood)**
+  * [Bagaimana React menghubungkan panggilan *Hook* dengan komponen?](#how-does-react-associate-hook-calls-with-components)
+  * [Bagaimana *seni awal*-nya *Hooks*?](#what-is-the-prior-art-for-hooks)
+
+## Strategi Adopsi {#adoption-strategy}
+
+### Versi React mana yang termasuk *Hooks* di dalamnya? {#which-versions-of-react-include-hooks}
+
+Mulai dari 16.8.0, implementasi stabil dari React Hooks sudah tersedia untuk:
 
 * React DOM
 * React Native
@@ -69,86 +69,83 @@ Starting with 16.8.0, React includes a stable implementation of React Hooks for:
 * React Test Renderer
 * React Shallow Renderer
 
-Note that **to enable Hooks, all React packages need to be 16.8.0 or higher**. Hooks won't work if you forget to update, for example, React DOM.
+Perhatikan bahwa **untuk menjalankan Hooks, semua *package* React perlu setidaknya pada versi 16.8.0 atau lebih tinggi**. *Hooks* tidak akan bekerja jika Anda lupa melakukan pembaruan, sebagai contohnya, React *DOM*.
 
-[React Native 0.59](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059) and above support Hooks.
+[React Native 0.59](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059) dan versi di atasnya sudah mendukung Hooks.
 
-### Do I need to rewrite all my class components? {#do-i-need-to-rewrite-all-my-class-components}
+### Apakah perlu menulis ulang semua komponen kelas saya?{#do-i-need-to-rewrite-all-my-class-components}
 
-No. There are [no plans](/docs/hooks-intro.html#gradual-adoption-strategy) to remove classes from React -- we all need to keep shipping products and can't afford rewrites. We recommend trying Hooks in new code.
+Tidak. [Tidak ada rencana](/docs/hooks-intro.html#gradual-adoption-strategy) untuk menghilangkan kelas dari React -- kita semua perlu mengirimkan produk baru dan tidak memiliki waktu untuk penulisan ulang. Kami rekomendasikan untuk mencoba *Hooks* dalam kode baru.
 
-### What can I do with Hooks that I couldn't with classes? {#what-can-i-do-with-hooks-that-i-couldnt-with-classes}
+### Apa yang dapat saya lakukan dengan *Hooks* namun tidak bisa saya lakukan dengan kelas? {#what-can-i-do-with-hooks-that-i-couldnt-with-classes}
 
-Hooks offer a powerful and expressive new way to reuse functionality between components. ["Building Your Own Hooks"](/docs/hooks-custom.html) provides a glimpse of what's possible. [This article](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) by a React core team member dives deeper into the new capabilities unlocked by Hooks.
+Hooks menawarkan sebuah cara baru yang kuat dan ekpresif untuk menggunakan kembali fungsionalitas antara komponen. ["Buat Hooks-mu Sendiri"](/docs/hooks-custom.html) menyajikan sekilas apa saja yang mungkin dilakukan. [Artikel ini](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889), oleh seorang anggota inti tim React, menyelam lebih dalam lagi kemampuan-kemampuan baru yang dibuka oleh Hooks.
 
-### How much of my React knowledge stays relevant? {#how-much-of-my-react-knowledge-stays-relevant}
+### Seberapa banyak pengetahuan saya tentang React yang tetap relevan? {#how-much-of-my-react-knowledge-stays-relevant}
 
-Hooks are a more direct way to use the React features you already know -- such as state, lifecycle, context, and refs. They don't fundamentally change how React works, and your knowledge of components, props, and top-down data flow is just as relevant.
+Hooks adalah cara yang lebih langsung untuk menggunakan fitur-fitur React yang sudah Anda ketahui -- seperti *state, lifecycle, context,* dan *ref*. Hal-hal tersebut tidak secara mendasar merubah bagaimana React bekerja, dan pengetahuan Anda tentang komponen, *props*, dan *top-down data flow* tetaplah relevan.
 
-Hooks do have a learning curve of their own. If there's something missing in this documentation, [raise an issue](https://github.com/reactjs/reactjs.org/issues/new) and we'll try to help.
+Hooks memiliki sebuah alur kurva pembelajarannya sendiri. Jika terdapat sesuatu yang hilang dalam dokumentasi ini, [ajukan isu](https://github.com/reactjs/reactjs.org/issues/new) dan kami akan coba membantu.
 
-### Should I use Hooks, classes, or a mix of both? {#should-i-use-hooks-classes-or-a-mix-of-both}
+### Haruskah saya menggunakan Hooks, kelas atau gabungan keduanya?{#should-i-use-hooks-classes-or-a-mix-of-both}
 
-When you're ready, we'd encourage you to start trying Hooks in new components you write. Make sure everyone on your team is on board with using them and familiar with this documentation. We don't recommend rewriting your existing classes to Hooks unless you planned to rewrite them anyway (e.g. to fix bugs).
+Ketika Anda siap, kami menganjurkan Anda untuk mulai mencoba *Hooks* dalam komponen-komponen baru yang Anda tulis. Pastikan setiap orang dalam tim Anda siap dan tidak asing dengan dokumentasi ini. Kami tidak merekomendasikan menulis ulang kelas-kelas Anda yang sudah ada ke *Hooks* kecuali Anda sudah berencana menulis ulang (seperti, memperbaiki *bug*).
 
-You can't use Hooks *inside* of a class component, but you can definitely mix classes and function components with Hooks in a single tree. Whether a component is a class or a function that uses Hooks is an implementation detail of that component. In the longer term, we expect Hooks to be the primary way people write React components.
+Anda tidak bisa menggunakan *Hooks* *di dalam* sebuah komponen kelas, tetapi Anda bisa mencampurkan komponen kelas dan fungsi dengan *Hooks* dalam sebuah tatanan. Tak peduli apakah sebuah komponen adalah kelas atau fungsi yang menggunakan Hooks, itu semua adalah implementasi rinci dari komponen tersebut. Dalam jangka waktu panjang, kami harap *Hooks* menjadi cara utama semua orang untuk menulis komponen React.
 
-### Do Hooks cover all use cases for classes? {#do-hooks-cover-all-use-cases-for-classes}
+### Apakah *Hooks* mencakup seluruh kasus yang digunakan untuk kelas? {#do-hooks-cover-all-use-cases-for-classes}
 
-Our goal is for Hooks to cover all use cases for classes as soon as possible. There are no Hook equivalents to the uncommon `getSnapshotBeforeUpdate` and `componentDidCatch` lifecycles yet, but we plan to add them soon.
+Tujuan kami untuk *Hooks* yakni mencakup seluruh kasus yang digunakan untuk kelas sesegera mungkin. Tidak ada persamaan (*equivalent*) *Hooks* untuk *lifecyle* yang tidak umum seperti `getSnapshotBeforeUpdate` dan `componentDidCatch` sementara ini, namun kami berencana untuk menambahkannya segera.
 
-It is an early time for Hooks, and some third-party libraries might not be compatible with Hooks at the moment.
+Sekarang adalah masa-masa awal untuk Hooks, dan *library* pihak ketiga bisa jadi tidak kompatibel dengan *Hooks* saat ini.
 
-### Do Hooks replace render props and higher-order components? {#do-hooks-replace-render-props-and-higher-order-components}
+### Apakah *Hooks* menggantikan *render props* dan *higher-order components*? {#do-hooks-replace-render-props-and-higher-order-components}
 
-Often, render props and higher-order components render only a single child. We think Hooks are a simpler way to serve this use case. There is still a place for both patterns (for example, a virtual scroller component might have a `renderItem` prop, or a visual container component might have its own DOM structure). But in most cases, Hooks will be sufficient and can help reduce nesting in your tree.
+Seringkali, *render props* dan *higher-order components* hanya (me)*render* sebuah turunan. Kami pikir *Hooks* adalah cara yang lebih sederhana untuk menyajikan kasus penggunaan ini. Masih ada tempat untuk kedua pola (contohnya, sebuah *virtual scroller component* bisa saja memiliki sebuah *prop* `renderItem`, atau sebuah *visual container component* bisa saja memiliki struktur *DOM*-nya sendiri). Namun dalam banyak kasus, *Hooks* sudahlah cukup dan akan membantu mengurangi *nesting* dalam tatanan Anda.
 
-### What do Hooks mean for popular APIs like Redux `connect()` and React Router? {#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router}
+### Apa yang *Hooks* peruntukan untuk API populer seperti *Redux `connect()` dan *React router*? {#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router}
 
-You can continue to use the exact same APIs as you always have; they'll continue to work.
+Anda dapat terus menggunakan *API* yang sama seperti yang selama ini dilakukan; *API* tersebut akan tetap bekerja.
 
-React Redux since v7.1.0 [supports Hooks API](https://react-redux.js.org/api/hooks) and exposes hooks like `useDispatch` or `useSelector`.
+React Redux sejak versi v7.1.0 [mendukung API Hooks](https://react-redux.js.org/api/hooks) dan memaparkan *Hooks* seperti `useDispatch` atau `useSelector`.
 
-React Router [supports hooks](https://reacttraining.com/react-router/web/api/Hooks) since v5.1.
+*Library* seperti React Router akan mendukung *Hooks* di masa yang akan datang.
 
-Other libraries might support hooks in the future too.
+### Apakah *Hooks* dapat berjalan dengan *static typing*?{#do-hooks-work-with-static-typing}
 
-### Do Hooks work with static typing? {#do-hooks-work-with-static-typing}
+*Hooks* didesain dengan *static typing* pada dasarnya. Karena hal-hal tersebut adalah fungsi, *static typing* lebih mudah ditulis dengan benar daripada pola-pola seperti *higher-order components*. Definisi *Flow* dan *TypeScript React* untuk React sudah mendukung untuk React Hooks di dalamnya.
 
-Hooks were designed with static typing in mind. Because they're functions, they are easier to type correctly than patterns like higher-order components. The latest Flow and TypeScript React definitions include support for React Hooks.
+Penting untuk diingat, *custom Hooks* memberikan Anda kewenangan untuk memaksa *API* React jika Anda ingin menuliskannya dengan lebih ketat dalam beberapa hal. React memberikan Anda *primitives*, tapi Anda bisa menggabungkannya dengan cara-cara lain yang unik selain dari yang kami sediakan untuk Anda.
 
-Importantly, custom Hooks give you the power to constrain React API if you'd like to type them more strictly in some way. React gives you the primitives, but you can combine them in different ways than what we provide out of the box.
+### Bagaimana cara menguji komponen-komponen yang menggunakan Hooks? {#how-to-test-components-that-use-hooks}
 
-### How to test components that use Hooks? {#how-to-test-components-that-use-hooks}
+Dari sudut pandang React, sebuah komponen yang menggunakan *Hooks* hanyalah sekedar komponen biasa. Jika solusi *testing* Anda tidak bergantung pada fitur-fitur di dalam React, menguji komponen dengan *Hooks* tidak akan berbeda halnya dengan uji komponen yang normalnya Anda lakukan.
 
-From React's point of view, a component using Hooks is just a regular component. If your testing solution doesn't rely on React internals, testing components with Hooks shouldn't be different from how you normally test components.
-
->Note
+>Catatan
 >
->[Testing Recipes](/docs/testing-recipes.html) include many examples that you can copy and paste.
+>[Testing Recipes](/docs/testing-recipes.html) memuat banyak contoh yang bisa Anda salin dan terapkan.
 
-For example, let's say we have this counter component:
+Sebagai contoh, umpamakan kita memiliki komponen penghitung (*counter*) berikut:
 
 ```js
 function Example() {
   const [count, setCount] = useState(0);
   useEffect(() => {
-    document.title = `You clicked ${count} times`;
+    document.title = `Anda meng-klik sebanyak ${count} kali`;
   });
   return (
     <div>
-      <p>You clicked {count} times</p>
+      <p>Anda meng-klik sebanyak {count} kali</p>
       <button onClick={() => setCount(count + 1)}>
-        Click me
+        Klik saya
       </button>
     </div>
   );
 }
 ```
+Kami akan mengujinya dengan React DOM. Pastikan bahwa perilakunya dengan yang terjadi di peramban, kami akan mengemas proses *rendering* kode dan memperbaruinya ke dalam [`ReactTestUtils.act()`](/docs/test-utils.html#act) beberapa pemanggilan:
 
-We'll test it using React DOM. To make sure that the behavior matches what happens in the browser, we'll wrap the code rendering and updating it into [`ReactTestUtils.act()`](/docs/test-utils.html#act) calls:
-
-```js{3,20-22,29-31}
+```js {3,20-22,29-31}
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
@@ -166,71 +163,71 @@ afterEach(() => {
   container = null;
 });
 
-it('can render and update a counter', () => {
-  // Test first render and effect
+it('bisa me-render dan memperbarui sebuah counter', () => {
+  // Uji render dan efek pertama
   act(() => {
     ReactDOM.render(<Counter />, container);
   });
   const button = container.querySelector('button');
   const label = container.querySelector('p');
-  expect(label.textContent).toBe('You clicked 0 times');
-  expect(document.title).toBe('You clicked 0 times');
+  expect(label.textContent).toBe('Anda meng-klik 0 kali');
+  expect(document.title).toBe('Anda meng-klik 0 kali');
 
-  // Test second render and effect
+  // Uji render dan efek kedua
   act(() => {
     button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
   });
-  expect(label.textContent).toBe('You clicked 1 times');
-  expect(document.title).toBe('You clicked 1 times');
+  expect(label.textContent).toBe('Anda meng-klik 1 kali');
+  expect(document.title).toBe('Anda meng-klik 1 kali');
 });
 ```
 
-The calls to `act()` will also flush the effects inside of them.
+Pemanggilan `act()` juga akan menghilangkan efek di dalamnya.
 
-If you need to test a custom Hook, you can do so by creating a component in your test, and using your Hook from it. Then you can test the component you wrote.
+Jika perlu menguji sebuah *custom Hook*, Anda bisa melakukannya dengan cara membuat sebuah komponen dalam pengujian Anda, dan gunakan Hook dari situ. Kemudian Anda bisa menguji komponen yang Anda tulis.
 
-To reduce the boilerplate, we recommend using [React Testing Library](https://testing-library.com/react) which is designed to encourage writing tests that use your components as the end users do.
+Untuk mengurangi terjadinya *boilerplate*, kami rekomendasikan menggunakan [React Testing Library](https://testing-library.com/react) yang mana didesain untuk mendorong menulis pengujian-pengujian yang menggunakan komponen Anda selayaknya yang dilakukan *end user*.
 
-For more information, check out [Testing Recipes](/docs/testing-recipes.html).
+Untuk informasi lebih lanjut, cek [Testing Recipes](/docs/testing-recipes.html).
 
-### What exactly do the [lint rules](https://www.npmjs.com/package/eslint-plugin-react-hooks) enforce? {#what-exactly-do-the-lint-rules-enforce}
+### Apa yang sebenarnya [aturan lint](https://www.npmjs.com/package/eslint-plugin-react-hooks) terapkan? {#what-exactly-do-the-lint-rules-enforce}
 
-We provide an [ESLint plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) that enforces [rules of Hooks](/docs/hooks-rules.html) to avoid bugs. It assumes that any function starting with "`use`" and a capital letter right after it is a Hook. We recognize this heuristic isn't perfect and there may be some false positives, but without an ecosystem-wide convention there is just no way to make Hooks work well -- and longer names will discourage people from either adopting Hooks or following the convention.
+Kami menyediakan sebuah [*plugin* ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) yang menerapkan [aturan-aturan Hooks](/docs/hooks-rules.html) demi menghindari *bug*. *Plugin* tersebut mengasumsikan bahwa fungsi apapun yang diawali dengan "`use`" dan sebuah huruf kapital tepat setelahnya, adalah sebuah Hook. Kami menyadari pendekatan penemuan (heuristik) ini tidaklah sempurna dan bisa jadi masih ada beberapa *false positive*, akan tetapi tanpa sebuah perjanjian (konvensi) seluruh lingkup ekosistem tidak akan mungkin *Hooks* akan berjalan dengan baik -- dan nama-nama yang lebih panjang akan mengecilkan minat orang-orang baik untuk mengadopsi *Hooks* maupun mengikuti konvensinya.
 
-In particular, the rule enforces that:
+Khususnya, aturan tersebut menekankan bahwa:
 
-* Calls to Hooks are either inside a `PascalCase` function (assumed to be a component) or another `useSomething` function (assumed to be a custom Hook).
-* Hooks are called in the same order on every render.
+* Panggilan untuk *Hooks* bisa terdapat di dalam sebuah fungsi `PascalCase` (diasumsikan sebagai sebuah komponen) atau fungsi `useSomething` lainnya (diasumsikan sebagai sebuah *custom Hook*).
+* *Hooks* dipanggil dalam urutan yang sama pada setiap *render*.
 
-There are a few more heuristics, and they might change over time as we fine-tune the rule to balance finding bugs with avoiding false positives.
+Terdapat beberapa heuristik lagi, dan hal tersebut bisa saja berubah sepanjang waktu selama kita memperbaiki terus aturan yang ada demi menyeimbangkan temuan *bug* dengan menghindari *false positive*.
 
-## From Classes to Hooks {#from-classes-to-hooks}
+## Dari Kelas ke *Hooks* {#from-classes-to-hooks}
 
-### How do lifecycle methods correspond to Hooks? {#how-do-lifecycle-methods-correspond-to-hooks}
+### Bagaimana cara *lifecycle method* dapat sesuai dengan Hooks? {#how-do-lifecycle-methods-correspond-to-hooks}
 
-* `constructor`: Function components don't need a constructor. You can initialize the state in the [`useState`](/docs/hooks-reference.html#usestate) call. If computing the initial state is expensive, you can pass a function to `useState`.
+* `constructor`: Komponen fungsi tidak memerlukan sebuah *constructor*. Anda bisa menginisiasikan *state* di dalam panggilan [`useState`](/docs/hooks-reference.html#usestate). Jika komputasi *state* awal itu *expensive*, Anda bisa mengoper sebuah fungsi ke `useState`.
 
-* `getDerivedStateFromProps`: Schedule an update [while rendering](#how-do-i-implement-getderivedstatefromprops) instead.
+* `getDerivedStateFromProps`: Jadwalkan sebuah pembaruan [ketika proses *render*](#how-do-i-implement-getderivedstatefromprops).
 
-* `shouldComponentUpdate`: See `React.memo` [below](#how-do-i-implement-shouldcomponentupdate).
+* `shouldComponentUpdate`: Lihat `React.memo` [di bawah ini](#how-do-i-implement-shouldcomponentupdate).
 
-* `render`: This is the function component body itself.
+* `render`: Ini adalah komponen fungsi *body* itu sendiri.
 
-* `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`: The [`useEffect` Hook](/docs/hooks-reference.html#useeffect) can express all combinations of these (including [less](#can-i-skip-an-effect-on-updates) [common](#can-i-run-an-effect-only-on-updates) cases).
+* `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`: [`useEffect` *Hook*](/docs/hooks-reference.html#useeffect) dapat mengekspresikan semua kombinasi ini (termasuk kasus-kasus yang [kurang](#can-i-skip-an-effect-on-updates) [awam](#can-i-run-an-effect-only-on-updates)).
 
-* `componentDidCatch` and `getDerivedStateFromError`: There are no Hook equivalents for these methods yet, but they will be added soon.
+* `componentDidCatch` dan `getDerivedStateFromError`: Tidak ada persamaan Hook untuk *method* ini sementara ini, tetapi akan segera ditambahkan.
 
-### How can I do data fetching with Hooks? {#how-can-i-do-data-fetching-with-hooks}
+### Bagaimana cara saya dapat memperoleh data dengan Hooks?{#how-can-i-do-data-fetching-with-hooks}
 
-Here is a [small demo](https://codesandbox.io/s/jvvkoo8pq3) to get you started. To learn more, check out [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) about data fetching with Hooks.
+Berikut ini sebuah [demo kecil](https://codesandbox.io/s/jvvkoo8pq3) untuk permulaan Anda. Untuk mempelajari lebih lanjut, lihat [artikel ini](https://www.robinwieruch.de/react-hooks-fetch-data/) tentang memperoleh (*fetching*) data dengan menggunakan Hooks.
 
-### Is there something like instance variables? {#is-there-something-like-instance-variables}
+### Apakah ada hal seperti *instance variable*? {#is-there-something-like-instance-variables}
 
-Yes! The [`useRef()`](/docs/hooks-reference.html#useref) Hook isn't just for DOM refs. The "ref" object is a generic container whose `current` property is mutable and can hold any value, similar to an instance property on a class.
+Ya! [`useRef()`](/docs/hooks-reference.html#useref) Hook tidak hanya untuk *ref* DOM. Objek *"ref"* adalah sebuah *container* umum yang mana memiliki properti `current` yang berubah-ubah serta dapat memegang nilai apapun, serupa dengan *instance property* pada sebuah kelas.
 
-You can write to it from inside `useEffect`:
+Anda dapat menuliskannya dari dalam 'useEffect':
 
-```js{2,8}
+```js {2,8}
 function Timer() {
   const intervalRef = useRef();
 
@@ -248,9 +245,9 @@ function Timer() {
 }
 ```
 
-If we just wanted to set an interval, we wouldn't need the ref (`id` could be local to the effect), but it's useful if we want to clear the interval from an event handler:
+Jika kita hanya ingin mengatur sebuah interval, kita tidak perlu *ref* ('id' bisa jadi lokal pada efek tersebut), tapi akan berguna jika kita ingin membersihkan interval dari sebuah *event handler*:
 
-```js{3}
+```js {3}
   // ...
   function handleCancelClick() {
     clearInterval(intervalRef.current);
@@ -258,11 +255,11 @@ If we just wanted to set an interval, we wouldn't need the ref (`id` could be lo
   // ...
 ```
 
-Conceptually, you can think of refs as similar to instance variables in a class. Unless you're doing [lazy initialization](#how-to-create-expensive-objects-lazily), avoid setting refs during rendering -- this can lead to surprising behavior. Instead, typically you want to modify refs in event handlers and effects.
+Secara konsep, Anda bisa pikirkan *ref* itu serupa dengan *instance variables* dalam sebuah kelas. Kecuali, Anda menerapkan [lazy initialization](#how-to-create-expensive-objects-lazily), hindari pengaturan ref selama proses *render* -- hal ini akan mengakibatkan *behavior* yang tidak terduga. Sebagai gantinya, biasanya Anda ingin untuk memodifikasi *ref* dalam *event handler* dan efek.
 
-### Should I use one or many state variables? {#should-i-use-one-or-many-state-variables}
+### Apa saya harus menggunakan satu atau beberapa *state variable*? {#should-i-use-one-or-many-state-variables}
 
-If you're coming from classes, you might be tempted to always call `useState()` once and put all state into a single object. You can do it if you'd like. Here is an example of a component that follows the mouse movement. We keep its position and size in the local state:
+Jika Anda memulai dari kelas, Anda mungkin ingin tetap memanggil `useState()` satu kali dan menempatkan semua *state* ke dalam sebuah objek tunggal. Anda bisa melakukan hal demikian jika suka. Berikut ini sebuah contoh sebuah komponen yang mengikuti pergerakan tetikus. Kita menetapkan posisi dan ukurannya dalam *local state*:
 
 ```js
 function Box() {
@@ -271,29 +268,29 @@ function Box() {
 }
 ```
 
-Now let's say we want to write some logic that changes `left` and `top` when the user moves their mouse. Note how we have to merge these fields into the previous state object manually:
+Sekarang umpamakan kita ingin menuliskan beberapa logika yang mana merubah `left` (sisi kiri) dan `top` (sisi atas) ketika pengguna menggerakan tetikusnya. Perhatikan bagaimana kita harus menggabungkan area-area ini ke dalam objek *state* sebelumnya secara manual:
 
-```js{4,5}
+```js {4,5}
   // ...
   useEffect(() => {
     function handleWindowMouseMove(e) {
-      // Spreading "...state" ensures we don't "lose" width and height
+      // Menyebarkan "...state" memastikan kita tidak "kehilangan" lebar dan tinggi
       setState(state => ({ ...state, left: e.pageX, top: e.pageY }));
     }
-    // Note: this implementation is a bit simplified
+    // Catatan: implementasi ini agak sedikit disederhanakan
     window.addEventListener('mousemove', handleWindowMouseMove);
     return () => window.removeEventListener('mousemove', handleWindowMouseMove);
   }, []);
   // ...
 ```
 
-This is because when we update a state variable, we *replace* its value. This is different from `this.setState` in a class, which *merges* the updated fields into the object.
+Ini karena ketika kita memperbarui sebuah *state variable*, kita merubah (*replace*) nilainya. Ini berbeda dari `this.setState` dalam sebuah kelas, yang mana menggabungkan (*merges*) area-area yang diperbarui ke dalam objek.
 
-If you miss automatic merging, you can write a custom `useLegacyState` Hook that merges object state updates. However, instead **we recommend to split state into multiple state variables based on which values tend to change together.**
+Jika Anda melihatkan penggabungan otomatis (*automatic merging*), Anda bisa menulis sebuah *custom Hook* `useLegacyState` yang menggabungkan pembaruan-pembaruan *state* objek.  Namun, sebagai gantinya **kami merekomendasikan untuk membagi *state* menjadi beberapa _state variable_ berdasarkan nilai mana yang cenderung berubah bersamaan.**
 
-For example, we could split our component state into `position` and `size` objects, and always replace the `position` with no need for merging:
+Sebagai contohnya, kita bisa membagi *state* komponen menjadi `position` dan `size` objek, serta selalu merubah `position` tanpa harus proses penggabungan:
 
-```js{2,7}
+```js {2,7}
 function Box() {
   const [position, setPosition] = useState({ left: 0, top: 0 });
   const [size, setSize] = useState({ width: 100, height: 100 });
@@ -305,9 +302,9 @@ function Box() {
     // ...
 ```
 
-Separating independent state variables also has another benefit. It makes it easy to later extract some related logic into a custom Hook, for example:
+Memisahkan *state variable* independen juga memiliki keuntungan lain. Hal tersebut membuatnya mudah untuk mengekstrak beberapa logika ke dalam sebuah *custom Hook* nantinya, sebagai contoh:
 
-```js{2,7}
+```js {2,7}
 function Box() {
   const position = useWindowPosition();
   const [size, setSize] = useState({ width: 100, height: 100 });
@@ -323,19 +320,19 @@ function useWindowPosition() {
 }
 ```
 
-Note how we were able to move the `useState` call for the `position` state variable and the related effect into a custom Hook without changing their code. If all state was in a single object, extracting it would be more difficult.
+Perhatikan bagaimana kita dapat memindahkan panggilan `useState` untuk *state variable* `position` serta efek yang terhubung ke dalam sebuah *custom Hook* tanpa merubah kodenya. Jika semua *state* ada dalam sebuah objek, mengekstrak *state* tersebut akan jadi lebih sulit.
 
-Both putting all state in a single `useState` call, and having a `useState` call per each field can work. Components tend to be most readable when you find a balance between these two extremes, and group related state into a few independent state variables. If the state logic becomes complex, we recommend [managing it with a reducer](/docs/hooks-reference.html#usereducer) or a custom Hook.
+Baik memasang semua *state* ke dalam sebuah panggilan `useState`, serta memiliki sebuah panggilan `useState` pada setiap area, keduanya sama-sama berfungsi. Komponen-komponen cenderung paling mudah dibaca ketika Anda menemukan keseimbangan antara (penerapan) kedua cara tersebut, dan kelompok yang terhubung dengan *state* ke dalam beberapa *state variable* independen. Jika logika *state* tersebut menjadi kompleks, kami rekomendasikan [mengelolanya dengan sebuah *reducer*](/docs/hooks-reference.html#usereducer) atau sebuah *custom Hook*.
 
-### Can I run an effect only on updates? {#can-i-run-an-effect-only-on-updates}
+### Bisakah saya menjalakan sebuah efek hanya pada pembaruan? {#can-i-run-an-effect-only-on-updates}
 
-This is a rare use case. If you need it, you can [use a mutable ref](#is-there-something-like-instance-variables) to manually store a boolean value corresponding to whether you are on the first or a subsequent render, then check that flag in your effect. (If you find yourself doing this often, you could create a custom Hook for it.)
+Ini adalah kasus penggunaan yang langka. Jika butuh, Anda bisa [gunakan sebuah *ref* yang bisa diubah-ubah](#is-there-something-like-instance-variables) menjadi secara manual menyetorkan nilai *boolean* sesuai dengan apakah Anda berada pada *render* pertama atau selanjutnya, kemudia memeriksa penandanya (*flag*) pada efek yang Anda buat. (Jika sering melakukan hal ini, ada baiknya Anda membuat sebuah *custom Hook*.)
 
-### How to get the previous props or state? {#how-to-get-the-previous-props-or-state}
+### Bagaimana cara untuk mendapatkan kembali *prop* atau *state* sebelumnya? {#how-to-get-the-previous-props-or-state}
 
-Currently, you can do it manually [with a ref](#is-there-something-like-instance-variables):
+Kini, Anda bisa melakukannya secara manual [dengan *ref*](#is-there-something-like-instance-variables):
 
-```js{6,8}
+```js {6,8}
 function Counter() {
   const [count, setCount] = useState(0);
 
@@ -349,9 +346,9 @@ function Counter() {
 }
 ```
 
-This might be a bit convoluted but you can extract it into a custom Hook:
+Ini bisa jadi agak berbelit tetapi Anda bisa mengekstraknya ke dalam sebuah *custom Hook*:
 
-```js{3,7}
+```js {3,7}
 function Counter() {
   const [count, setCount] = useState(0);
   const prevCount = usePrevious(count);
@@ -367,24 +364,24 @@ function usePrevious(value) {
 }
 ```
 
-Note how this would work for props, state, or any other calculated value.
+Perhatikan bagaimana hal ini dapat bekerja pada *props, state,* atau nilai apapun yang diperhitungkan.
 
-```js{5}
+```js {5}
 function Counter() {
   const [count, setCount] = useState(0);
 
-  const calculation = count + 100;
+  const calculation = count * 100;
   const prevCalculation = usePrevious(calculation);
   // ...
 ```
 
-It's possible that in the future React will provide a `usePrevious` Hook out of the box since it's a relatively common use case.
+Di masa yang akan datang, React mungkin akan menyediakan sebuah `usePrevious` Hook* yang unik mengingat hal tersebut adalah kasus yang cukup sering digunakan.
 
-See also [the recommended pattern for derived state](#how-do-i-implement-getderivedstatefromprops).
+Lihat juga [pola yang direkomendasikan untuk *derived state*](#how-do-i-implement-getderivedstatefromprops).
 
-### Why am I seeing stale props or state inside my function? {#why-am-i-seeing-stale-props-or-state-inside-my-function}
+### Mengapa saya melihat *stale prop* atau *state* dalam fungsi yang saya buat?  {#why-am-i-seeing-stale-props-or-state-inside-my-function}
 
-Any function inside a component, including event handlers and effects, "sees" the props and state from the render it was created in. For example, consider code like this:
+Fungsi apapun yang ada dalam sebuah komponen, termasuk *event handler* dan efek, "melihat" *prop* dan *state* dari dalam proses *render* mana fungsi tersebut diciptakan. Sebagai contohnya, pertimbangkan kode seperi berikut ini:
 
 ```js
 function Example() {
@@ -392,7 +389,7 @@ function Example() {
 
   function handleAlertClick() {
     setTimeout(() => {
-      alert('You clicked on: ' + count);
+      alert('Anda meng-klik: ' + count);
     }, 3000);
   }
 
@@ -410,21 +407,21 @@ function Example() {
 }
 ```
 
-If you first click "Show alert" and then increment the counter, the alert will show the `count` variable **at the time you clicked the "Show alert" button**. This prevents bugs caused by the code assuming props and state don't change.
+Jika Anda meng-klik "Show alert" dan kemudian memberi penambahan (*increment*) pada *counter*, penandanya akan menunjukkan variabel `count` **pada saat Anda meng-klik tombol "Show alert"**. Ini mencegah *bug* yang disebabkan oleh kode yang mengasumsikan *prop* dan *state* tidak berubah.
 
-If you intentionally want to read the *latest* state from some asynchronous callback, you could keep it in [a ref](/docs/hooks-faq.html#is-there-something-like-instance-variables), mutate it, and read from it.
+Jika ingin membaca *state* *terkini* dari beberapa *asynchronous callback*, baiknya Anda menyimpannya dalam [sebuah *ref*](/docs/hooks-faq.html#is-there-something-like-instance-variables), mengubahnya, dan membaca dari situ.
 
-Finally, another possible reason you're seeing stale props or state is if you use the "dependency array" optimization but didn't correctly specify all the dependencies. For example, if an effect specifies `[]` as the second argument but reads `someProp` inside, it will keep "seeing" the initial value of `someProp`. The solution is to either remove the dependency array, or to fix it. Here's [how you can deal with functions](#is-it-safe-to-omit-functions-from-the-list-of-dependencies), and here's [other common strategies](#what-can-i-do-if-my-effect-dependencies-change-too-often) to run effects less often without incorrectly skipping dependencies.
+Pada akhirnya, alasan lain Anda melihat *stale prop* atau *state* yakni jika Anda menggunakan optimasi "dependency array" tapi tidak secara benar dalam menspesifikasi semua *dependency*-nya. Sebagai contohnya, jika sebuah efek menspesifikasikan `[]` sebagai argumen kedua tetapi membaca `someProp` di dalamnya, efek tersebut akan tetap "melihat" nilai awal dari `someProp`. Solusinya yakni antara menghilangkan *dependency array*, atau memperbaikinya. Ini adalah cara [bagaimana Anda bisa memperlakukan fungsi](#is-it-safe-to-omit-functions-from-the-list-of-dependencies), dan ini adalah [strategi umum lainnya](#what-can-i-do-if-my-effect-dependencies-change-too-often) untuk menjalankan efek lebih jarang tanpa keliru melewatkan *dependency*.
 
->Note
+>Catatan
 >
->We provide an [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) ESLint rule as a part of the [`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.
+>Kami menyediakan sebuah aturan *ESLint* [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) sebagai bagian dari *package*[`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Itu akan memberi peringatan ketika *dependency* keliru dispesifikasikan dan akan memberikan saran perbaikan.
 
-### How do I implement `getDerivedStateFromProps`? {#how-do-i-implement-getderivedstatefromprops}
+### Bagaimana cara mengimplementasikan `getDerivedStateFromProps`? {#how-do-i-implement-getderivedstatefromprops}
 
-While you probably [don't need it](/blog/2018/06/07/you-probably-dont-need-derived-state.html), in rare cases that you do (such as implementing a `<Transition>` component), you can update the state right during rendering. React will re-run the component with updated state immediately after exiting the first render so it wouldn't be expensive.
+Ketika Anda mungkin [tidak memerlukannya](/blog/2018/06/07/you-probably-dont-need-derived-state.html), dalam kasus-kasus yang jarang Anda alami (seperti mengimplementasikan sebuah komponen `<Transition>`), Anda bisa memperbarui *state* tepat saat proses *render*. React akan menjalankan ulang komponen tersebut dengan *state* yang sudah diperbarui tepat setelah keluar dari *render* pertama sehingga tidak akan memakan banyak ruang (*expensive*).
 
-Here, we store the previous value of the `row` prop in a state variable so that we can compare:
+Berikut ini, kita menyetorkan nilai sebelumnya dari *prop* `row` dalam sebuah *state variable* sehingga kita bisa bandingkan:
 
 ```js
 function ScrollView({row}) {
@@ -432,7 +429,7 @@ function ScrollView({row}) {
   let [prevRow, setPrevRow] = useState(null);
 
   if (row !== prevRow) {
-    // Row changed since last render. Update isScrollingDown.
+    // Baris berubah karena render terakhir. Memperbarui isScrollingDown.
     setIsScrollingDown(prevRow !== null && row > prevRow);
     setPrevRow(row);
   }
@@ -441,13 +438,13 @@ function ScrollView({row}) {
 }
 ```
 
-This might look strange at first, but an update during rendering is exactly what `getDerivedStateFromProps` has always been like conceptually.
+Hal ini bisa jadi terlihat aneh pada awalnya, tetapi sebuah pembaruan selama proses *render* adalah hal yang persis secara konsep sejak `getDerivedStateFromProps` dibuat.
 
-### Is there something like forceUpdate? {#is-there-something-like-forceupdate}
+### Apakah ada suatu hal seperti *forceUpdate*? {#is-there-something-like-forceupdate}
 
-Both `useState` and `useReducer` Hooks [bail out of updates](/docs/hooks-reference.html#bailing-out-of-a-state-update) if the next value is the same as the previous one. Mutating state in place and calling `setState` will not cause a re-render.
+Baik `useState` *Hook* maupun `useReducer` *Hook* [akan keluar dari pembaruan](/docs/hooks-reference.html#bailing-out-of-a-state-update) jika nilai selanjutnya sama dengan nilai sebelumnya. Mengubah *state* saat itu juga dan memanggil `setState` tidak akan mengakibatkan *render* ulang.
 
-Normally, you shouldn't mutate local state in React. However, as an escape hatch, you can use an incrementing counter to force a re-render even if the state has not changed:
+Normalnya, Anda tidak akan mengubah *local state* dalam React. Meski demikian, sebagai sebuah solusi darurat, Anda bisa menggunakan sebuah *incrementing counter* untuk memaksa terjadinya *render* ulang walaupun jika *state*-nya tidak berubah:
 
 ```js
   const [ignored, forceUpdate] = useReducer(x => x + 1, 0);
@@ -457,17 +454,17 @@ Normally, you shouldn't mutate local state in React. However, as an escape hatch
   }
 ```
 
-Try to avoid this pattern if possible.
+Coba hindari pola berikut ini sebisa mungkin.
 
-### Can I make a ref to a function component? {#can-i-make-a-ref-to-a-function-component}
+### Bisakah saya membuat *ref* pada sebuah komponen fungsi? {#can-i-make-a-ref-to-a-function-component}
 
-While you shouldn't need this often, you may expose some imperative methods to a parent component with the [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle) Hook.
+Saat Anda seharusnya tidak sering memerlukan hal ini, Anda bisa saja mengekspos beberapa metode perintah pada sebuah *parent component* dengan menggunakan [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle) *Hook*.
 
-### How can I measure a DOM node? {#how-can-i-measure-a-dom-node}
+### Bagaimana cara mengukur *DOM node*? {#how-can-i-measure-a-dom-node}
 
-In order to measure the position or size of a DOM node, you can use a [callback ref](/docs/refs-and-the-dom.html#callback-refs). React will call that callback whenever the ref gets attached to a different node. Here is a [small demo](https://codesandbox.io/s/l7m0v5x4v9):
+Untuk mengukur posisi atau ukuran dari sebuah *DOM node*, Anda bisa gunakan [*callback ref*](/docs/refs-and-the-dom.html#callback-refs). React akan memanggil *callback* itu kapanpun *ref* terikat pada sebuah *node* yang berbeda. Berikut ini [demo kecil](https://codesandbox.io/s/l7m0v5x4v9):
 
-```js{4-8,12}
+```js {4-8,12}
 function MeasureExample() {
   const [height, setHeight] = useState(0);
 
@@ -480,26 +477,26 @@ function MeasureExample() {
   return (
     <>
       <h1 ref={measuredRef}>Hello, world</h1>
-      <h2>The above header is {Math.round(height)}px tall</h2>
+      <h2>Header di atas memiliki tinggi {Math.round(height)}px</h2>
     </>
   );
 }
 ```
 
-We didn't choose `useRef` in this example because an object ref doesn't notify us about *changes* to the current ref value. Using a callback ref ensures that [even if a child component displays the measured node later](https://codesandbox.io/s/818zzk8m78) (e.g. in response to a click), we still get notified about it in the parent component and can update the measurements.
+Kita tidak memilih `useRef` dalam contoh ini karena sebuah objek *ref* tidak memberitahukan kita tentang *perubahan* pada nilai *ref* yang sekarang. Menggunakan sebuah *callback ref* akan memastikan bahwa [walaupun jika sebuah *child component* menampilkan *node* yang diukur setelah ini](https://codesandbox.io/s/818zzk8m78) (sebagai contoh, dalam respon pada sebuah klik), kita masih akan dapat pemberitahuan tentang hal itu dalam *parent component* dan bisa memperbarui pengukurannya.
 
-Note that we pass `[]` as a dependency array to `useCallback`. This ensures that our ref callback doesn't change between the re-renders, and so React won't call it unnecessarily.
+Perhatikan bahwa kita mengoper `[]` sebagai sebuah *dependency array* untuk `useCallback`. Ini memastikan bahwa *ref callback* tidak berubah di antara *render* ulang, serta agar React tidak akan memanggilnya tanpa sebab.
 
-If you want, you can [extract this logic](https://codesandbox.io/s/m5o42082xy) into a reusable Hook:
+Jika mau, Anda bisa [mengekstrak logika ini](https://codesandbox.io/s/m5o42082xy) ke dalam sebuah Hook yang bisa digunakan ulang:
 
-```js{2}
+```js {2}
 function MeasureExample() {
   const [rect, ref] = useClientRect();
   return (
     <>
       <h1 ref={ref}>Hello, world</h1>
       {rect !== null &&
-        <h2>The above header is {Math.round(rect.height)}px tall</h2>
+        <h2>Header di atas memiliki tinggi {Math.round(rect.height)}px</h2>
       }
     </>
   );
@@ -517,22 +514,22 @@ function useClientRect() {
 ```
 
 
-### What does `const [thing, setThing] = useState()` mean? {#what-does-const-thing-setthing--usestate-mean}
+### Apa yang dimaksud dengan `const [thing, setThing] = useState()`? {#what-does-const-thing-setthing--usestate-mean}
 
-If you're not familiar with this syntax, check out the [explanation](/docs/hooks-state.html#tip-what-do-square-brackets-mean) in the State Hook documentation.
+Jika Anda asing dengan *syntax* ini, cek [penjelasannya](/docs/hooks-state.html#tip-what-do-square-brackets-mean) dalam dokumentasi *State Hook*.
 
 
-## Performance Optimizations {#performance-optimizations}
+## Optimasi Performa {#performance-optimizations}
 
-### Can I skip an effect on updates? {#can-i-skip-an-effect-on-updates}
+### Bisakah saya melewatkan sebuah efek pada pembaruan? {#can-i-skip-an-effect-on-updates}
 
-Yes. See [conditionally firing an effect](/docs/hooks-reference.html#conditionally-firing-an-effect). Note that forgetting to handle updates often [introduces bugs](/docs/hooks-effect.html#explanation-why-effects-run-on-each-update), which is why this isn't the default behavior.
+Ya. Lihat [pengaktifan efek secara kondisional](/docs/hooks-reference.html#conditionally-firing-an-effect). Perhatikan bahwa lupa menangani pembaruan seringkali [menimbulkan *bug*](/docs/hooks-effect.html#explanation-why-effects-run-on-each-update), yang mana  mengapa hal ini bukanlah *behavior* aslinya.
 
-### Is it safe to omit functions from the list of dependencies? {#is-it-safe-to-omit-functions-from-the-list-of-dependencies}
+### Apakah aman untuk menghilangkan fungsi dari daftar *dependency*? {#is-it-safe-to-omit-functions-from-the-list-of-dependencies}
 
-Generally speaking, no.
+Umumnya tidak aman.
 
-```js{3,8}
+```js {3,8}
 function Example({ someProp }) {
   function doSomething() {
     console.log(someProp);
@@ -540,13 +537,13 @@ function Example({ someProp }) {
 
   useEffect(() => {
     doSomething();
-  }, []); // 🔴 This is not safe (it calls `doSomething` which uses `someProp`)
+  }, []); // 🔴 Ini tidaklah aman (memanggil `doSomething` yang menggunakan `someProp`)
 }
 ```
 
-It's difficult to remember which props or state are used by functions outside of the effect. This is why **usually you'll want to declare functions needed by an effect *inside* of it.** Then it's easy to see what values from the component scope that effect depends on:
+Sulit untuk mengingat *prop* atau *state* yang digunakan oleh fungsi yang ada di luar efek. Inilah mengapa **biasanya Anda akan mendeklarasikan fungsi yang dibutuhkan dengan efek *di dalam*-nya.** Lalu kita bisa dengan mudah melihat nilai-nilai apa saja dari cakupan komponen yang jadi patokan efek tersebut:
 
-```js{4,8}
+```js {4,8}
 function Example({ someProp }) {
   useEffect(() => {
     function doSomething() {
@@ -554,59 +551,59 @@ function Example({ someProp }) {
     }
 
     doSomething();
-  }, [someProp]); // ✅ OK (our effect only uses `someProp`)
+  }, [someProp]); // ✅ OK (efek dari kita hanya menggunakan `someProp`)
 }
 ```
 
-If after that we still don't use any values from the component scope, it's safe to specify `[]`:
+Jika setelah itu kita masih tidak menggunakan nilai apapun dari cakupan komponen tersebut, sebaiknya spesifikasikan `[]` agar aman:
 
-```js{7}
+```js {7}
 useEffect(() => {
   function doSomething() {
     console.log('hello');
   }
 
   doSomething();
-}, []); // ✅ OK in this example because we don't use *any* values from component scope
+}, []); // ✅ OK dalam contoh ini karena kita tidak menggunakan nilai apapun dari cakupan komponen tersebut
 ```
 
-Depending on your use case, there are a few more options described below.
+Tergantung pada kasus penggunaan Anda, terdapat beberapa pilihan lainnya sebagaimana yang dideskripsikan di bawah ini.
 
->Note
+>Catatan
 >
->We provide the [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) ESLint rule as a part of the [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package. It helps you find components that don't handle updates consistently.
+>Kami menyediakan aturan *ESLint* [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) sebagai bagian dari *package* [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Itu akan membantu Anda menemukan komponen yang tidak konsisten menangani pembaruan.
 
-Let's see why this matters.
+Mari kita lihat mengapa hal ini penting.
 
-If you specify a [list of dependencies](/docs/hooks-reference.html#conditionally-firing-an-effect) as the last argument to `useEffect`, `useMemo`, `useCallback`, or `useImperativeHandle`, it must include all values used inside that participate in the React data flow. That includes props, state, and anything derived from them.
+Jika Anda menspesifikasikan sebuah [daftar *dependency*](/docs/hooks-reference.html#conditionally-firing-an-effect) sebagai sebuah argumen terakhir untuk `useEffect`, `useMemo`, `useCallback`, atau `useImperativeHandle`, haruslah termasuk semua nilai yang digunakan di dalamnya yang ikut andil dalam *data flow* React. Itu termasuk *prop, state,* dan apapun yang berasal dari keduanya.
 
-It is **only** safe to omit a function from the dependency list if nothing in it (or the functions called by it) references props, state, or values derived from them. This example has a bug:
+Hal tersebut **hanya akan** aman untuk menghilangkan sebuah fungsi dari daftar *dependency* jika tidak terjadi apa-apa di dalamnya (atau fungsi lain yang terpanggil) yang merujuk pada *prop, state,* atau nilai yang berasal dari keduanya. Contoh berikut memiliki *bug*:
 
-```js{5,12}
+```js {5,12}
 function ProductPage({ productId }) {
   const [product, setProduct] = useState(null);
 
   async function fetchProduct() {
-    const response = await fetch('http://myapi/product' + productId); // Uses productId prop
+    const response = await fetch('http://myapi/product' + productId); // Menggunakan productId prop
     const json = await response.json();
     setProduct(json);
   }
 
   useEffect(() => {
     fetchProduct();
-  }, []); // 🔴 Invalid because `fetchProduct` uses `productId`
+  }, []); // 🔴 Tidak valid karena `fetchProduct` menggunakan `productId`
   // ...
 }
 ```
 
-**The recommended fix is to move that function _inside_ of your effect**. That makes it easy to see which props or state your effect uses, and to ensure they're all declared:
+**Rekomendasi perbaikannya adalah dengan cara memindahkan fungsi itu _di dalam_ efek yang Anda buat**. Perbaikan tersebut akan memudahkan untuk melihat *prop* atau *state* mana yang efek Anda gunakan, serta memastikan semuanya terdeklarasikan:
 
-```js{5-10,13}
+```js {5-10,13}
 function ProductPage({ productId }) {
   const [product, setProduct] = useState(null);
 
   useEffect(() => {
-    // By moving this function inside the effect, we can clearly see the values it uses.
+    // Dengan memindahkan fungsi ini ke dalam efek, kita bisa dengan jelas melihat nilai-nilai yang digunakan.
     async function fetchProduct() {
       const response = await fetch('http://myapi/product' + productId);
       const json = await response.json();
@@ -614,14 +611,14 @@ function ProductPage({ productId }) {
     }
 
     fetchProduct();
-  }, [productId]); // ✅ Valid because our effect only uses productId
+  }, [productId]); // ✅ Valid karena efeknya hanya menggunakan productId
   // ...
 }
 ```
 
-This also allows you to handle out-of-order responses with a local variable inside the effect:
+Ini juga membebaskan Anda untuk menangani respon-respon yang tidak pada tempatnya (*out-of-order*) dengan sebuah *local variable* dalam efek tersebut:
 
-```js{2,6,10}
+```js {2,6,10}
   useEffect(() => {
     let ignore = false;
     async function fetchProduct() {
@@ -635,87 +632,87 @@ This also allows you to handle out-of-order responses with a local variable insi
   }, [productId]);
 ```
 
-We moved the function inside the effect so it doesn't need to be in its dependency list.
+Kita pindahkan fungsi dalam efek tersebut agar fungsi tersebut tidak perlu berada dalam daftar *dependency*-nya sendiri.
 
->Tip
+>Tips
 >
->Check out [this small demo](https://codesandbox.io/s/jvvkoo8pq3) and [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) to learn more about data fetching with Hooks.
+>Cek [demo kecil ini](https://codesandbox.io/s/jvvkoo8pq3) dan [artikel ini](https://www.robinwieruch.de/react-hooks-fetch-data/) untuk mempelajari lebih lanjut tentang data fetching menggunakan Hooks.
 
-**If for some reason you _can't_ move a function inside an effect, there are a few more options:**
+**Jika untuk beberapa alasan Anda _tidak bisa_ memindahkan sebuah fungsi ke dalam sebuah efek, terdapat beberapa pilihan lainnya:**
 
-* **You can try moving that function outside of your component**. In that case, the function is guaranteed to not reference any props or state, and also doesn't need to be in the list of dependencies.
-* If the function you're calling is a pure computation and is safe to call while rendering, you may **call it outside of the effect instead,** and make the effect depend on the returned value.
-* As a last resort, you can **add a function to effect dependencies but _wrap its definition_** into the [`useCallback`](/docs/hooks-reference.html#usecallback) Hook. This ensures it doesn't change on every render unless *its own* dependencies also change:
+* **Anda bisa mencoba menggeser fungsi tersebut keluar komponen**. Dalam kasus ini, fungsi dijamin tidak merujuk pada *prop* atau *state* apapun, dan juga tidak perlu berada dalam daftar *dependency*.
+* Jika fungsi yang Anda panggil adalah murni sebuah komputasi dan aman untuk dipanggil saat proses *render*, Anda boleh **memanggilnya di luar efek tersebut sebagai gantinya,** dan membuat efek tersebut bergantung pada nilai balikan (*return*).
+* Sebagai pilihan terakhir, Anda bisa**menambahkan sebuah fungsi ke _dependency_ efek tersebut namun _mengemas definisinya_** ke dalam [`useCallback`](/docs/hooks-reference.html#usecallback) *Hook*. Ini memastikan fungsi tersebut tidak berubah pada tiap *render* kecuali *dependency-nya sendiri* juga berubah:
 
-```js{2-5}
+```js {2-5}
 function ProductPage({ productId }) {
-  // ✅ Wrap with useCallback to avoid change on every render
+  // ✅ Dikemas dengan useCallback untuk menghindari berubah tiap kali render
   const fetchProduct = useCallback(() => {
-    // ... Does something with productId ...
-  }, [productId]); // ✅ All useCallback dependencies are specified
+    // ... Melakukan sesuatu dengan productId ...
+  }, [productId]); // ✅ Semua useCallback dependency terspesifikasikan
 
   return <ProductDetails fetchProduct={fetchProduct} />;
 }
 
-function ProductDetails({ fetchProduct }) {
+function ProductDetails({ fetchProduct })
   useEffect(() => {
     fetchProduct();
-  }, [fetchProduct]); // ✅ All useEffect dependencies are specified
+  }, [fetchProduct]); // ✅ Semua useEffect dependency terspesifikasikan
   // ...
 }
 ```
 
-Note that in the above example we **need** to keep the function in the dependencies list. This ensures that a change in the `productId` prop of `ProductPage` automatically triggers a refetch in the `ProductDetails` component.
+Perhatikan bahwa pada contoh di atas kita **perlu** untuk menjaga fungsi agar tetap dalam daftar dependency. Ini memastikan bahwa setiap perubahan dalam *prop* `productId`  dari `ProductPage` secara otomatis memicu pengumpulan ulang (*refetch*) dalam komponen `ProductDetails`.
 
-### What can I do if my effect dependencies change too often? {#what-can-i-do-if-my-effect-dependencies-change-too-often}
+### Apa yang bisa saya lakukan jika *dependency* efek berganti terlalu sering berubah? {#what-can-i-do-if-my-effect-dependencies-change-too-often}
 
-Sometimes, your effect may be using state that changes too often. You might be tempted to omit that state from a list of dependencies, but that usually leads to bugs:
+Terkadang, efek Anda bisa jadi menggunakan *state* yang terlalu sering berubah. Anda mungkin berkeinginan untuk menghilangkan *state* itu dari daftar *dependency*, namun biasanya berujung pada *bug*:
 
-```js{6,9}
+```js {6,9}
 function Counter() {
   const [count, setCount] = useState(0);
 
   useEffect(() => {
     const id = setInterval(() => {
-      setCount(count + 1); // This effect depends on the `count` state
+      setCount(count + 1); // Efek ini bergantung pada `count` state
     }, 1000);
     return () => clearInterval(id);
-  }, []); // 🔴 Bug: `count` is not specified as a dependency
+  }, []); // 🔴 Bug: `count` tidak dispesifikasikan sebagai sebuah dependency
 
   return <h1>{count}</h1>;
 }
 ```
 
-The empty set of dependencies, `[]`, means that the effect will only run once when the component mounts, and not on every re-render. The problem is that inside the `setInterval` callback, the value of `count` does not change, because we've created a closure with the value of `count` set to `0` as it was when the effect callback ran. Every second, this callback then calls `setCount(0 + 1)`, so the count never goes above 1.
+Kumpulan *dependency* yang kosong, `[]`, berarti bahwa efek tersebut hanya akan berjalan satu kali ketika komponen dimuat, dan tidak pada setiap kali *render* ulang. Masalahnya adalah di dalam `setInterval` callback*, nilai `count` tidaklah berubah, karena kita menciptakan sebuah pengakhiran dengan nilai `count` ditetapkan jadi `0` selayaknya ketika efek *callback* berjalan. Tiap detik, *callback* ini kemudian memanggil `setCount(0 + 1)`, jadi hitungan tersebut tidak pernah melebihi 1.
 
-Specifying `[count]` as a list of dependencies would fix the bug, but would cause the interval to be reset on every change. Effectively, each `setInterval` would get one chance to execute before being cleared (similar to a `setTimeout`.) That may not be desirable. To fix this, we can use the [functional update form of `setState`](/docs/hooks-reference.html#functional-updates). It lets us specify *how* the state needs to change without referencing the *current* state:
+Menspesifikasikan `[count]` sebagai sebauh daftar *dependency* dapat memperbaiki *bug*, tetapi juga bisa menyebabkan interval tersetel ulang (*reset*) pada setiap perubahan. Secara efektif, tiap `setInterval` akan mendapat satu kali kesempatan untuk mengeksekusi sebelum dikosongkan (mirip dengan `setTimeout`). Hal itu mungkin saja tidak diinginkan. Untuk memperbaikinya, kita bisa gunakan [bentuk pembaruan fungsional pada `setState`](/docs/hooks-reference.html#functional-updates). Hal tersebut membiarkan kita menspesifikasikan *bagaimana* *state* perlu berubah tanpa merujuk pada *state* yang *sekarang*:
 
-```js{6,9}
+```js {6,9}
 function Counter() {
   const [count, setCount] = useState(0);
 
   useEffect(() => {
     const id = setInterval(() => {
-      setCount(c => c + 1); // ✅ This doesn't depend on `count` variable outside
+      setCount(c => c + 1); // ✅ Ini tidak bergantung pada variabel `count` di luar,
     }, 1000);
     return () => clearInterval(id);
-  }, []); // ✅ Our effect doesn't use any variables in the component scope
+  }, []); // ✅ Efek kita tidak menggunakan *variabel* apapun dalam lingkup komponen
 
   return <h1>{count}</h1>;
 }
 ```
 
-(The identity of the `setCount` function is guaranteed to be stable so it's safe to omit.)
+(Identitas fungsi `setCount` dijamin akan lebih stabil serta aman untuk dihapus.)
 
-Now, the `setInterval` callback executes once a second, but each time the inner call to `setCount` can use an up-to-date value for `count` (called `c` in the callback here.)
+Sekarang, `setInterval` callback* mengeksekusi satu kali tiap detik, namun tiap yang ada di dalamnya memanggil `setCount` bisa menggunakan nilai yang terbaru untuk `count` (disebut `c` dalam *callback* disini.)
 
-In more complex cases (such as if one state depends on another state), try moving the state update logic outside the effect with the [`useReducer` Hook](/docs/hooks-reference.html#usereducer). [This article](https://adamrackis.dev/state-and-use-reducer/) offers an example of how you can do this. **The identity of the `dispatch` function from `useReducer` is always stable** — even if the reducer function is declared inside the component and reads its props.
+Dalam kasus-kasus yang lebih kompleks lagi (seperti halnya jika satu *state* bergantung pada *state*), cobalah untuk memindahkan logika pembaruan *state* keluar efek tersebut menggunakan [`useReducer` Hook*](/docs/hooks-reference.html#usereducer). [Artikel ini](https://adamrackis.dev/state-and-use-reducer/) menawarkan sebuah contoh bagaimana Anda daoat melakukan hal berikut ini. **Indentitas fungsi _`dispatch`_ dari _`useReducer`_ itu selalu stabil** — meskipun jika fungsi pengurangan (*reducer*) dideklarasikan dalam komponen serta membaca *prop*-nya.
 
-As a last resort, if you want something like `this` in a class, you can [use a ref](/docs/hooks-faq.html#is-there-something-like-instance-variables) to hold a mutable variable. Then you can write and read to it. For example:
+Sebagai pilihan terakhir, jika Anda ingin sesuatu seperti `this` dalam sebuah kelas, Anda bisa [gunakan *ref*](/docs/hooks-faq.html#is-there-something-like-instance-variables) untuk menahan sebuah variabel yang berubah-ubah. Kemudian Anda bisa menulis dan membacanya. Contohnya:
 
-```js{2-6,10-11,16}
+```js {2-6,10-11,16}
 function Example(props) {
-  // Keep latest props in a ref.
+  // Jaga prop terkini dalam sebuah ref.
   let latestProps = useRef(props);
   useEffect(() => {
     latestProps.current = props;
@@ -723,47 +720,47 @@ function Example(props) {
 
   useEffect(() => {
     function tick() {
-      // Read latest props at any time
+      // Membaca prop terkini kapanpun
       console.log(latestProps.current);
     }
 
     const id = setInterval(tick, 1000);
     return () => clearInterval(id);
-  }, []); // This effect never re-runs
+  }, []); // Efek ini tidak pernah berjalan ulang
 }
 ```
 
-Only do this if you couldn't find a better alternative, as relying on mutation makes components less predictable. If there's a specific pattern that doesn't translate well, [file an issue](https://github.com/facebook/react/issues/new) with a runnable example code and we can try to help.
+Lakukan ini jika hanya saat Anda tidak bisa menemukan alternatif yang lebih baik, sebagaimana mengandalkan pada perubahan (*mutation*) membuat komponen jadi kurang dapat diprediksi. Jika ada sebuah pola spesifik yang tidak menerjemahkan dengan baik, [layangkan *issue*](https://github.com/facebook/react/issues/new) dengan sebuah contoh kode yang dapat dijalankan dan kami akan coba bantu.
 
-### How do I implement `shouldComponentUpdate`? {#how-do-i-implement-shouldcomponentupdate}
+### Bagaimana cara mengimplementasikan `shouldComponentUpdate`? {#how-do-i-implement-shouldcomponentupdate}
 
-You can wrap a function component with `React.memo` to shallowly compare its props:
+Anda dapat mengemas sebuah komponen fungsi dengan `React.memo` untuk membandingkan secara tak mendalam *prop*-nya:
 
 ```js
 const Button = React.memo((props) => {
-  // your component
+  // komponen Anda
 });
 ```
 
-It's not a Hook because it doesn't compose like Hooks do. `React.memo` is equivalent to `PureComponent`, but it only compares props. (You can also add a second argument to specify a custom comparison function that takes the old and new props. If it returns true, the update is skipped.)
+Bukanlah sebuah *Hook* karena hal tersebut tidak melakukan penyusunan seperti yang *Hooks* lakukan. `React.memo` adalah persamaan untuk `PureComponent`, tapi hanya untuk membandingkan *prop*. (Anda juga bisa menambahkan argumen kedua untuk menspesifikasikan sebuah fungsi perbandingan yang menerima *prop* lama dan *prop* baru. Jika *return* dari fungsi tersebut adalah *true*, maka pembaruan akan dilewat.)
 
-`React.memo` doesn't compare state because there is no single state object to compare. But you can make children pure too, or even [optimize individual children with `useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations).
+`React.memo` tidak membandingkan *state* karena tidak ada satu pun objek *state* untuk dibandingkan. Tapi Anda dapat membuat *children* (turunan) murni pula, atau bahkan [mengoptimasi masing-masing *children* dengan menggunakan `useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations).
 
-### How to memoize calculations? {#how-to-memoize-calculations}
+### Bagaimana cara *memoize* perhitungan? {#how-to-memoize-calculations}
 
-The [`useMemo`](/docs/hooks-reference.html#usememo) Hook lets you cache calculations between multiple renders by "remembering" the previous computation:
+*Hook* [`useMemo`](/docs/hooks-reference.html#usememo) mengizinkan Anda untuk menyimpan (*cache*) perhitungan-perhitungan di antara berbagai *render* dengan cara *"mengingat"* komputasi sebelumnya:
 
 ```js
 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
 ```
 
-This code calls `computeExpensiveValue(a, b)`. But if the dependencies `[a, b]` haven't changed since the last value, `useMemo` skips calling it a second time and simply reuses the last value it returned.
+Kode ini memanggil `computeExpensiveValue(a, b)`. Tapi jika *dependency* `[a, b]` tidak berubah semenjak nilai sebelumnya, `useMemo` tidak akan memanggil untuk kedua kalinya dan menggunakan kembali nilai terakhir yang di-*return*.
 
-Remember that the function passed to `useMemo` runs during rendering. Don't do anything there that you wouldn't normally do while rendering. For example, side effects belong in `useEffect`, not `useMemo`.
+Ingat bahwa fungsi tersebut dioper ke `useMemo` berjalan selama proses *render*. Jangan lakukan hal apapun yang tidak se-normalnya Anda lakukan ketika proses *render*. Sebagai contoh, efek samping (*side effect*) sudah seharusnya berada dalam `useEffect`, bukan `useMemo`.
 
-**You may rely on `useMemo` as a performance optimization, not as a semantic guarantee.** In the future, React may choose to "forget" some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without `useMemo` — and then add it to optimize performance. (For rare cases when a value must *never* be recomputed, you can [lazily initialize](#how-to-create-expensive-objects-lazily) a ref.)
+**Anda bisa jadi mengandalkan _`useMemo`_ sebagai salah satu optimasi performa, bukan sebagai jaminan _semantic_.** Di masa yang akan datang, React bisa saja memilih untuk *"forget"* beberapa nilai-nilai hasil *memoize* sebelumnya dan menghitung ulang pada *render* selanjutnya, contohnya untuk mengosongkan memori dari komponen-komponen *offscreen*. Tulis kode Anda agar kode tersebut dapat terus berjalan tanpa `useMemo` — dan menambahkannya ke performa yang teroptimasi. (Untuk kasus yang langka ketika sebuah nilai harus *tidak pernah* dikomputasi ulang, Anda bisa [menginisiasi secara *lazy* *(initialize lazily)*](#how-to-create-expensive-objects-lazily) sebuah *ref*.)
 
-Conveniently, `useMemo` also lets you skip an expensive re-render of a child:
+Dengan mudah, `useMemo` juga memperbolehkan Anda untuk melewatkan sebuah *render* ulang yang *expensive* pada sebuah turunan (*child*):
 
 ```js
 function Parent({ a, b }) {
@@ -780,51 +777,51 @@ function Parent({ a, b }) {
 }
 ```
 
-Note that this approach won't work in a loop because Hook calls [can't](/docs/hooks-rules.html) be placed inside loops. But you can extract a separate component for the list item, and call `useMemo` there.
+Perhatikan bahwa pendekatan ini tidak akan berhasil dalam sebuah pengulangan (*loop*) karena panggilan *Hook* [tidak bisa](/docs/hooks-rules.html) digantikan di dalam *loop*. Tapi Anda bisa mengekstrak komponen yang terpisah untuk daftar *item*, dan memanggil `useMemo` di sana.
 
-### How to create expensive objects lazily? {#how-to-create-expensive-objects-lazily}
+### Bagaimana cara membuat objek *expensive* secara *lazy*? {#how-to-create-expensive-objects-lazily}
 
-`useMemo` lets you [memoize an expensive calculation](#how-to-memoize-calculations) if the dependencies are the same. However, it only serves as a hint, and doesn't *guarantee* the computation won't re-run. But sometimes you need to be sure an object is only created once.
+`useMemo` mengizinkan Anda untuk [me-*memoize* sebuah perhitungan yang *expensive*](#how-to-memoize-calculations) jika *dependency*-nya sama. Bagimanapun, itu hanya berfungsi sebagai sebuah penanda, dan tidak *menjamin* komputasi tersebut tidak akan diulang. Tapi terkadang Anda harus memastikan sebuah objek hanya diciptakan sekali.
 
-**The first common use case is when creating the initial state is expensive:**
+**Kasus penggunaan pertama yang umum yakni ketika menciptakan sebuah _initial state_ itu _expensive_:**
 
 ```js
 function Table(props) {
-  // ⚠️ createRows() is called on every render
+  // ⚠️ createRows() dipanggil setiap render
   const [rows, setRows] = useState(createRows(props.count));
   // ...
 }
 ```
 
-To avoid re-creating the ignored initial state, we can pass a **function** to `useState`:
+Untuk menghindari pembuatan ulang *initial state* yang dibiarkan, kita bisa mengoper sebuah **function** ke `useState`:
 
 ```js
 function Table(props) {
-  // ✅ createRows() is only called once
+  // ✅ createRows() hanya dipanggil satu kali
   const [rows, setRows] = useState(() => createRows(props.count));
   // ...
 }
 ```
 
-React will only call this function during the first render. See the [`useState` API reference](/docs/hooks-reference.html#usestate).
+React hanya akan memanggil fungsi ini selama *render* pertama. Lihat [referensi `useState` API*](/docs/hooks-reference.html#usestate).
 
-**You might also occasionally want to avoid re-creating the `useRef()` initial value.** For example, maybe you want to ensure some imperative class instance only gets created once:
+**Anda adakalanya juga ingin menghindari pembuatan ulang nilai awal `useRef()`.** Contohnya, mungkin Anda ingin memastikan beberapa contoh kelas penting hanya bisa dibuat satu kali:
 
 ```js
 function Image(props) {
-  // ⚠️ IntersectionObserver is created on every render
+  // ⚠️ IntersectionObserver dibuat di tiap render
   const ref = useRef(new IntersectionObserver(onIntersect));
   // ...
 }
 ```
 
-`useRef` **does not** accept a special function overload like `useState`. Instead, you can write your own function that creates and sets it lazily:
+`useRef` **tidak** menerima fungsi khusus yang berlebih seperti `useState`. Sebagai gantinya, Anda bisa menuliskan fungsi sendiri yang membuat dan mengaturnya secara *lazy*:
 
 ```js
 function Image(props) {
   const ref = useRef(null);
 
-  // ✅ IntersectionObserver is created lazily once
+  // ✅ IntersectionObserver dibuat satu kali secara lazy
   function getObserver() {
     if (ref.current === null) {
       ref.current = new IntersectionObserver(onIntersect);
@@ -832,50 +829,50 @@ function Image(props) {
     return ref.current;
   }
 
-  // When you need it, call getObserver()
+  // Ketika Anda butuh, panggil getObserver()
   // ...
 }
 ```
 
-This avoids creating an expensive object until it's truly needed for the first time. If you use Flow or TypeScript, you can also give `getObserver()` a non-nullable type for convenience.
+Ini menghindari pembuatan objek yang *expensive* hingga objek tersebut benar-benar dibutuhkan untuk pertama kalinya. Jika Anda menggunakan *Flow* atau *TypeScript*, Anda juga bisa memberikan `getObserver()` sebuah nilai yang tidak bisa dikosongkan (*non-nullable*) demi kenyamanan.
 
 
-### Are Hooks slow because of creating functions in render? {#are-hooks-slow-because-of-creating-functions-in-render}
+### Apakah *Hooks* lamban karena membuat fungsi di saat *render*? {#are-hooks-slow-because-of-creating-functions-in-render}
 
-No. In modern browsers, the raw performance of closures compared to classes doesn't differ significantly except in extreme scenarios.
+Tidak. Dalam peramban-peramban modern, performa kasar penutupan (*closure*) dibandingkan dengan kelas tidaklah berbeda secara signifikan kecuali dalam skenario-skenario ekstrim.
 
-In addition, consider that the design of Hooks is more efficient in a couple ways:
+Sebagai tambahan, pertimbangkan bahwa desain *Hooks* itu lebih efisien dalam beberapa hal:
 
-* Hooks avoid a lot of the overhead that classes require, like the cost of creating class instances and binding event handlers in the constructor.
+* *Hooks* menghindari banyak awalan yang kelas butuhkan, seperti ongkos untuk membuat contoh kelas dan mengikat *event handler* di dalam konstruktor.
 
-* **Idiomatic code using Hooks doesn't need the deep component tree nesting** that is prevalent in codebases that use higher-order components, render props, and context. With smaller component trees, React has less work to do.
+* **Kode idiomatis yang menggunakan _Hooks_ tidak memerlukan _nesting_ pohon komponen mendalam** yang lazim dalam basis kode yang mana menggunakan *higher-order component*, *render props*, dan *context*. Dengan pohon komponen yang lebih kecil, React jadi punya lebih sedikit tugas untuk dikerjakan.
 
-Traditionally, performance concerns around inline functions in React have been related to how passing new callbacks on each render breaks `shouldComponentUpdate` optimizations in child components. Hooks approach this problem from three sides.
+Secara tradisional, performa menyangkut seputar fugsi-fungsi *inline* React sudah dihubungkan dengan bagaimana cara untuk mengoper *callback* baru setiap *render* yang memotong optimasi `shouldComponentUpdate` dalam komponen turunan. *Hooks* mendekati masalah dari tiga sisi.
 
-* The [`useCallback`](/docs/hooks-reference.html#usecallback) Hook lets you keep the same callback reference between re-renders so that `shouldComponentUpdate` continues to work:
+* *Hook* [`useCallback`](/docs/hooks-reference.html#usecallback) mengizinkan Anda untuk tetap menggunakan rujukan *callback* yang sama di antara *render* ulang sehingga `shouldComponentUpdate` akan terus bekerja:
 
-    ```js{2}
-    // Will not change unless `a` or `b` changes
+    ```js {2}
+    // Tidak akan berubah kecuali `a` atau `b` berubah
     const memoizedCallback = useCallback(() => {
       doSomething(a, b);
     }, [a, b]);
     ```
 
-* The [`useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations) Hook makes it easier to control when individual children update, reducing the need for pure components.
+* *Hook* [`useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations) membuat jadi lebih mudah untuk mengontrol ketika ada satu-satu pembaruan turunan (*children*), mengurangi kebutuhan untuk komponen murni.
 
-* Finally, the [`useReducer`](/docs/hooks-reference.html#usereducer) Hook reduces the need to pass callbacks deeply, as explained below.
+* Pada akhirnya, *Hook* [`useReducer`](/docs/hooks-reference.html#usereducer) mengurangi kebutuhan untuk mengoper *callback* secara mendalam, seperti yang dijelaskan di bawah ini.
 
-### How to avoid passing callbacks down? {#how-to-avoid-passing-callbacks-down}
+### Bagaimana cara menghindari pengoperan *callback* jadi *down*? {#how-to-avoid-passing-callbacks-down}
 
-We've found that most people don't enjoy manually passing callbacks through every level of a component tree. Even though it is more explicit, it can feel like a lot of "plumbing".
+Kami menemukan bahwa kebanyakan orang tidak menikmati pengoperan *callback* secara manual di sepanjang tiap tingkatan sebuah pohon komponen. Walaupun hal tersebut lebih gamblang, pengoperan *callback* secara manual bisa terasa seperti pekerjaan yang menguras tenaga.
 
-In large component trees, an alternative we recommend is to pass down a `dispatch` function from [`useReducer`](/docs/hooks-reference.html#usereducer) via context:
+Dalam pohon komponen yang luas, sebuah alternatif yang kami rekomendasikan adalah untuk mengoper sebuah fungsi `dispatch` dari [`useReducer`](/docs/hooks-reference.html#usereducer) melalui *context*:
 
-```js{4,5}
+```js {4,5}
 const TodosDispatch = React.createContext(null);
 
 function TodosApp() {
-  // Note: `dispatch` won't change between re-renders
+  // Catatan: `dispatch` tidak akan berubah di antara render ulang
   const [todos, dispatch] = useReducer(todosReducer);
 
   return (
@@ -886,11 +883,11 @@ function TodosApp() {
 }
 ```
 
-Any child in the tree inside `TodosApp` can use the `dispatch` function to pass actions up to `TodosApp`:
+Turunan apapun dalam pohon yang ada di dalam `TodosApp` bisa menggunakan fungsi `dispatch` untuk mengoper tindakan kepada `TodosApp`:
 
-```js{2,3}
+```js {2,3}
 function DeepChild(props) {
-  // If we want to perform an action, we can get dispatch from context.
+  // Jika kita ingin melakukan sebuah tindakan, kita bisa mendapatkan dispatch dari context.
   const dispatch = useContext(TodosDispatch);
 
   function handleClick() {
@@ -903,33 +900,33 @@ function DeepChild(props) {
 }
 ```
 
-This is both more convenient from the maintenance perspective (no need to keep forwarding callbacks), and avoids the callback problem altogether. Passing `dispatch` down like this is the recommended pattern for deep updates.
+Hal ini lebih memudahkan dari sudut pandang pemeliharaan (tidak perlu untuk terus meneruskan *callback*), dan juga menghindari masalah-masalah *callback*. Mengoper `dispatch` seperti ini merupakan rekomendasi pola untuk pembaruan-pembaruan mendalam.
 
-Note that you can still choose whether to pass the application *state* down as props (more explicit) or as context (more convenient for very deep updates). If you use context to pass down the state too, use two different context types -- the `dispatch` context never changes, so components that read it don't need to rerender unless they also need the application state.
+Perlu diingat bahawa Anda masih bisa memilih antara mengoper *state* aplikasi sebagai *prop* (lebih gamblang) atau sebagai *context* (lebih memudahkan untuk pembaruan yang sangat mendalam). Jika Anda menggunakan *context* untuk mengoper *state* juga, gunakan dua jenis *context* berbeda -- `dispatch` context* tidak pernah berubah, jadi komponen yang membacanya tidak perlu melakukan *render* ulang kecuali juga membutuhkan *state* aplikasi.
 
-### How to read an often-changing value from `useCallback`? {#how-to-read-an-often-changing-value-from-usecallback}
+### Bagimana cara membaca sebuah nilai yang sering berubah dari `useCallback`? {#how-to-read-an-often-changing-value-from-usecallback}
 
->Note
+>Catatan
 >
->We recommend to [pass `dispatch` down in context](#how-to-avoid-passing-callbacks-down) rather than individual callbacks in props. The approach below is only mentioned here for completeness and as an escape hatch.
+>Kami rekomendasikan untuk [mengoper `dispatch` dalam *context*](#how-to-avoid-passing-callbacks-down) daripada satu-persatu *callback* dalam *prop*. Pendekatan di bawah hanya disebutkan di sini sebagai pelengkap dan juga cara darurat.
 >
->Also note that this pattern might cause problems in the [concurrent mode](/blog/2018/03/27/update-on-async-rendering.html). We plan to provide more ergonomic alternatives in the future, but the safest solution right now is to always invalidate the callback if some value it depends on changes.
+>Perhatikan juga bahwa pola ini bisa menyebabkan masalah dalam [mode *concurrent*](/blog/2018/03/27/update-on-async-rendering.html). Kami berencana untuk menyediakan alternatif yang lebih ergonomis di masa yang akan datang, tapi solusi teraman sekarang adalah untuk selalu meng-invalidasi callback jika beberapa nilai bergantung pada perubahan.
 
-In some rare cases you might need to memoize a callback with [`useCallback`](/docs/hooks-reference.html#usecallback) but the memoization doesn't work very well because the inner function has to be re-created too often. If the function you're memoizing is an event handler and isn't used during rendering, you can use [ref as an instance variable](#is-there-something-like-instance-variables), and save the last committed value into it manually:
+Dalam beberapa kasus langka Anda mungkin butuh untuk *memoize* sebuah *callback* dengan menggunakan [`useCallback`](/docs/hooks-reference.html#usecallback) tetapi proses *memoize* tidak berjalan dengan baik karena fungsi dalam harus dibuat ulang terlalu sering. Jika fungsi yang Anda *memoize* adalah sebuah *event handler* dan tidak digunakan selama proses *render*, Anda bisa gunakan [*ref* sebagai sebuah *instance variable*](#is-there-something-like-instance-variables), dan menyimpan nilai yang terakhir di-*commit* ke dalam *ref* tersebut secara manual:
 
-```js{6,10}
+```js {6,10}
 function Form() {
   const [text, updateText] = useState('');
   const textRef = useRef();
 
   useEffect(() => {
-    textRef.current = text; // Write it to the ref
+    textRef.current = text; // Tuliskan ke ref
   });
 
   const handleSubmit = useCallback(() => {
-    const currentText = textRef.current; // Read it from the ref
+    const currentText = textRef.current; // Membaca dari ref
     alert(currentText);
-  }, [textRef]); // Don't recreate handleSubmit like [text] would do
+  }, [textRef]); // Tidak membuat ulang handleSubmit seperti [text] 
 
   return (
     <>
@@ -940,12 +937,12 @@ function Form() {
 }
 ```
 
-This is a rather convoluted pattern but it shows that you can do this escape hatch optimization if you need it. It's more bearable if you extract it to a custom Hook:
+Ini bisa saja pola yang berbelit namun menunjukkan pada Anda bahwa Anda bisa melakukan optimasi darurat ini jika membutuhkannya. Bahkan lebih bisa ditangani jika Anda mengekstraknya ke dalam sebuah *custom Hook*:
 
-```js{4,16}
+```js {4,16}
 function Form() {
   const [text, updateText] = useState('');
-  // Will be memoized even if `text` changes:
+  // Akan di memoize bahkan jika `text` berubah:
   const handleSubmit = useEventCallback(() => {
     alert(text);
   }, [text]);
@@ -960,7 +957,7 @@ function Form() {
 
 function useEventCallback(fn, dependencies) {
   const ref = useRef(() => {
-    throw new Error('Cannot call an event handler while rendering.');
+    throw new Error('Tidak bisa memanggil event handler ketika proses render.');
   });
 
   useEffect(() => {
@@ -974,27 +971,27 @@ function useEventCallback(fn, dependencies) {
 }
 ```
 
-In either case, we **don't recommend this pattern** and only show it here for completeness. Instead, it is preferable to [avoid passing callbacks deep down](#how-to-avoid-passing-callbacks-down).
+Dalam kasus-kasus tersebut, kami **tidak merekomendasikan pola ini** dan hanya untuk menunjukannya sebagai pelengkap di sini. Sebagai gantinya, akan lebih baik untuk [meghindari pengoperan *callback* lebih mendalam](#how-to-avoid-passing-callbacks-down).
 
 
-## Under the Hood {#under-the-hood}
+## *Under the Hood* {#under-the-hood}
 
-### How does React associate Hook calls with components? {#how-does-react-associate-hook-calls-with-components}
+### Bagaimana React menghubungkan panggilan *Hook* dengan komponen? {#how-does-react-associate-hook-calls-with-components}
 
-React keeps track of the currently rendering component. Thanks to the [Rules of Hooks](/docs/hooks-rules.html), we know that Hooks are only called from React components (or custom Hooks -- which are also only called from React components).
+React merekam jejak komponen yang baru saja mulai di-*render*. Terima kasih pada [aturan *Hooks*](/docs/hooks-rules.html), kita tahu bahwa *Hooks* hanya dipanggil dari komponen React (atau *custom Hooks* -- yang mana juga dipanggil dari komponen React).
 
-There is an internal list of "memory cells" associated with each component. They're just JavaScript objects where we can put some data. When you call a Hook like `useState()`, it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple `useState()` calls each get independent local state.
+Terdapat daftar internal dari *"memory cells"* yang berhubungkan dengan tiap komponen. Itu semua hanyalah objek-objek JavaScript dimana kita bisa menaruh data. Ketika Anda memanggil sebuah *Hook* seperti `useState()`, ia membaca *cell* terkini (atau menginisialisasikannya selama *render* pertama), dan memindahkan *pointer* ke *cell* selanjutnya. Inilah bagaimana masing-masing panggilan `useState()` mendapat *local state* sendiri-sendiri.
 
-### What is the prior art for Hooks? {#what-is-the-prior-art-for-hooks}
+### Bagaimana *seni awal*-nya *Hooks*? {#what-is-the-prior-art-for-hooks}
 
-Hooks synthesize ideas from several different sources:
+*Hooks* mempersatukan ide-ide dari beberapa sumber berbeda:
 
-* Our old experiments with functional APIs in the [react-future](https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State) repository.
-* React community's experiments with render prop APIs, including [Ryan Florence](https://github.com/ryanflorence)'s [Reactions Component](https://github.com/reactions/component).
-* [Dominic Gannaway](https://github.com/trueadm)'s [`adopt` keyword](https://gist.github.com/trueadm/17beb64288e30192f3aa29cad0218067) proposal as a sugar syntax for render props.
-* State variables and state cells in [DisplayScript](http://displayscript.org/introduction.html).
-* [Reducer components](https://reasonml.github.io/reason-react/docs/en/state-actions-reducer.html) in ReasonReact.
-* [Subscriptions](http://reactivex.io/rxjs/class/es6/Subscription.js~Subscription.html) in Rx.
-* [Algebraic effects](https://github.com/ocamllabs/ocaml-effects-tutorial#2-effectful-computations-in-a-pure-setting) in Multicore OCaml.
+* Eksperimen lama kami dengan API fungsional dalam repositori[*react-future*](https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State).
+* Eksperimen-eksperimen komunitas React dengan me-*render prop API*, termasuk [Reactions Component](https://github.com/reactions/component) dari [Ryan Florence](https://github.com/ryanflorence).
+* Pengajuan [kata kunci `adopt`](https://gist.github.com/trueadm/17beb64288e30192f3aa29cad0218067) dari [Dominic Gannaway](https://github.com/trueadm) sebagai *sugar syntax* untuk me-*render* *prop*.
+* *State variable* dan *state cell* dalam [DisplayScript](http://displayscript.org/introduction.html).
+* [Reducer components](https://reasonml.github.io/reason-react/docs/en/state-actions-reducer.html) dalam *ReasonReact*.
+* [Subscriptions](http://reactivex.io/rxjs/class/es6/Subscription.js~Subscription.html) dalam Rx.
+* [Algebraic effects](https://github.com/ocamllabs/ocaml-effects-tutorial#2-effectful-computations-in-a-pure-setting) dalam *Multicore OCaml*.
 
-[Sebastian Markbåge](https://github.com/sebmarkbage) came up with the original design for Hooks, later refined by [Andrew Clark](https://github.com/acdlite), [Sophie Alpert](https://github.com/sophiebits), [Dominic Gannaway](https://github.com/trueadm), and other members of the React team.
+[Sebastian Markbåge](https://github.com/sebmarkbage) muncul dengan desain orisinil untuk *Hooks*, yang nantinya akan disempurnakan oleh [Andrew Clark](https://github.com/acdlite), [Sophie Alpert](https://github.com/sophiebits), [Dominic Gannaway](https://github.com/trueadm), serta anggota-anggota lain tim React.

From 4863422610a2a600baa66cebaca14f3a59405fbc Mon Sep 17 00:00:00 2001
From: dummyeuy <ghalib12.euy16@gmail.com>
Date: Wed, 18 Dec 2019 12:46:58 +0700
Subject: [PATCH 14/14] resolved all suggested changes according to
 https://github.com/reactjs/id.reactjs.org/pull/123#pullrequestreview-333234347

---
 content/docs/hooks-faq.md | 74 +++++++++++++++++++--------------------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index 4d5ba61ab..1ee9d0a2f 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -26,8 +26,8 @@ Laman ini menjawab beberapa pertanyaan yang sering diajukan (*frequently asked q
   * [Haruskah saya menggunakan Hooks, kelas atau gabungan keduanya?](#should-i-use-hooks-classes-or-a-mix-of-both)
   * [Apakah *Hooks* mencakup seluruh kasus yang digunakan untuk kelas?](#do-hooks-cover-all-use-cases-for-classes)
   * [Apakah *Hooks* menggantikan *render props* dan *higher-order components*?](#do-hooks-replace-render-props-and-higher-order-components)
-  * [Apa yang *Hooks* peruntukan untuk API populer seperti *Redux connect()* dan *React router*?](#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router)
-  * [Apakah *Hooks* dapat berjalan dengan *static typing*?](#do-hooks-work-with-static-typing)
+  * [Apa kegunaan *Hooks* untuk API populer seperti Redux connect() dan React router?](#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router)
+  * [Apakah *Hooks* dapat bekerja dengan *static typing*?](#do-hooks-work-with-static-typing)
   * [Bagaimana cara menguji komponen-komponen yang menggunakan Hooks?](#how-to-test-components-that-use-hooks)
   * [Apa yang sebenarnya aturan-aturan *lint* terapkan?](#what-exactly-do-the-lint-rules-enforce)
 * **[Dari Kelas ke Hooks](#from-classes-to-hooks)**
@@ -37,7 +37,7 @@ Laman ini menjawab beberapa pertanyaan yang sering diajukan (*frequently asked q
   * [Apa saya harus menggunakan satu atau beberapa *state variable*?](#should-i-use-one-or-many-state-variables)
   * [Bisakah saya menjalakan sebuah efek hanya pada pembaruan?](#can-i-run-an-effect-only-on-updates)
   * [Bagimana cara untuk mendapatkan kembali *prop* atau *state* sebelumnya?](#how-to-get-the-previous-props-or-state)
-  * [Mengapa saya melihat *stale prop* atau *state* dalam fungsi yang saya buat?](#why-am-i-seeing-stale-props-or-state-inside-my-function)
+  * [Mengapa saya melihat *prop* atau *state* yang basi dalam fungsi yang saya buat?](#why-am-i-seeing-stale-props-or-state-inside-my-function)
   * [Bagaimana cara mengimplementasikan *getDerivedStateFromProps*?](#how-do-i-implement-getderivedstatefromprops)
   * [Apakah ada suatu hal seperti *forceUpdate*?](#is-there-something-like-forceupdate)
   * [Bisakah saya membuat sebuah *ref* pada sebuah komponen fungsi?](#can-i-make-a-ref-to-a-function-component)
@@ -103,19 +103,19 @@ Sekarang adalah masa-masa awal untuk Hooks, dan *library* pihak ketiga bisa jadi
 
 Seringkali, *render props* dan *higher-order components* hanya (me)*render* sebuah turunan. Kami pikir *Hooks* adalah cara yang lebih sederhana untuk menyajikan kasus penggunaan ini. Masih ada tempat untuk kedua pola (contohnya, sebuah *virtual scroller component* bisa saja memiliki sebuah *prop* `renderItem`, atau sebuah *visual container component* bisa saja memiliki struktur *DOM*-nya sendiri). Namun dalam banyak kasus, *Hooks* sudahlah cukup dan akan membantu mengurangi *nesting* dalam tatanan Anda.
 
-### Apa yang *Hooks* peruntukan untuk API populer seperti *Redux `connect()` dan *React router*? {#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router}
+### Apa kegunaan *Hooks* untuk API populer seperti Redux `connect()` dan React router? {#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router}
 
-Anda dapat terus menggunakan *API* yang sama seperti yang selama ini dilakukan; *API* tersebut akan tetap bekerja.
+Anda dapat terus menggunakan API yang sama seperti yang selama ini dilakukan; API tersebut akan tetap bekerja.
 
 React Redux sejak versi v7.1.0 [mendukung API Hooks](https://react-redux.js.org/api/hooks) dan memaparkan *Hooks* seperti `useDispatch` atau `useSelector`.
 
 *Library* seperti React Router akan mendukung *Hooks* di masa yang akan datang.
 
-### Apakah *Hooks* dapat berjalan dengan *static typing*?{#do-hooks-work-with-static-typing}
+### Apakah *Hooks* dapat bekerja dengan *static typing*?{#do-hooks-work-with-static-typing}
 
-*Hooks* didesain dengan *static typing* pada dasarnya. Karena hal-hal tersebut adalah fungsi, *static typing* lebih mudah ditulis dengan benar daripada pola-pola seperti *higher-order components*. Definisi *Flow* dan *TypeScript React* untuk React sudah mendukung untuk React Hooks di dalamnya.
+*Hooks* didesain dengan *static typing* pada dasarnya. Karena *Hooks* adalah sekumpulan fungsi, *static typing* lebih mudah ditulis dengan benar daripada pola-pola seperti *higher-order components*. Definisi Flow dan TypeScript React untuk React sudah mendukung React Hooks.
 
-Penting untuk diingat, *custom Hooks* memberikan Anda kewenangan untuk memaksa *API* React jika Anda ingin menuliskannya dengan lebih ketat dalam beberapa hal. React memberikan Anda *primitives*, tapi Anda bisa menggabungkannya dengan cara-cara lain yang unik selain dari yang kami sediakan untuk Anda.
+Penting untuk diingat, *custom Hooks* memberikan Anda kewenangan untuk memaksa API React jika Anda ingin menuliskannya dengan lebih ketat dalam beberapa hal. React memberikan Anda *primitives*, tapi Anda bisa menggabungkannya dengan cara-cara lain yang unik selain dari yang kami sediakan untuk Anda.
 
 ### Bagaimana cara menguji komponen-komponen yang menggunakan Hooks? {#how-to-test-components-that-use-hooks}
 
@@ -145,7 +145,7 @@ function Example() {
 ```
 Kami akan mengujinya dengan React DOM. Pastikan bahwa perilakunya dengan yang terjadi di peramban, kami akan mengemas proses *rendering* kode dan memperbaruinya ke dalam [`ReactTestUtils.act()`](/docs/test-utils.html#act) beberapa pemanggilan:
 
-```js {3,20-22,29-31}
+```js{3,20-22,29-31}
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
@@ -227,7 +227,7 @@ Ya! [`useRef()`](/docs/hooks-reference.html#useref) Hook tidak hanya untuk *ref*
 
 Anda dapat menuliskannya dari dalam 'useEffect':
 
-```js {2,8}
+```js{2,8}
 function Timer() {
   const intervalRef = useRef();
 
@@ -247,7 +247,7 @@ function Timer() {
 
 Jika kita hanya ingin mengatur sebuah interval, kita tidak perlu *ref* ('id' bisa jadi lokal pada efek tersebut), tapi akan berguna jika kita ingin membersihkan interval dari sebuah *event handler*:
 
-```js {3}
+```js{3}
   // ...
   function handleCancelClick() {
     clearInterval(intervalRef.current);
@@ -270,7 +270,7 @@ function Box() {
 
 Sekarang umpamakan kita ingin menuliskan beberapa logika yang mana merubah `left` (sisi kiri) dan `top` (sisi atas) ketika pengguna menggerakan tetikusnya. Perhatikan bagaimana kita harus menggabungkan area-area ini ke dalam objek *state* sebelumnya secara manual:
 
-```js {4,5}
+```js{4,5}
   // ...
   useEffect(() => {
     function handleWindowMouseMove(e) {
@@ -290,7 +290,7 @@ Jika Anda melihatkan penggabungan otomatis (*automatic merging*), Anda bisa menu
 
 Sebagai contohnya, kita bisa membagi *state* komponen menjadi `position` dan `size` objek, serta selalu merubah `position` tanpa harus proses penggabungan:
 
-```js {2,7}
+```js{2,7}
 function Box() {
   const [position, setPosition] = useState({ left: 0, top: 0 });
   const [size, setSize] = useState({ width: 100, height: 100 });
@@ -304,7 +304,7 @@ function Box() {
 
 Memisahkan *state variable* independen juga memiliki keuntungan lain. Hal tersebut membuatnya mudah untuk mengekstrak beberapa logika ke dalam sebuah *custom Hook* nantinya, sebagai contoh:
 
-```js {2,7}
+```js{2,7}
 function Box() {
   const position = useWindowPosition();
   const [size, setSize] = useState({ width: 100, height: 100 });
@@ -332,7 +332,7 @@ Ini adalah kasus penggunaan yang langka. Jika butuh, Anda bisa [gunakan sebuah *
 
 Kini, Anda bisa melakukannya secara manual [dengan *ref*](#is-there-something-like-instance-variables):
 
-```js {6,8}
+```js{6,8}
 function Counter() {
   const [count, setCount] = useState(0);
 
@@ -348,7 +348,7 @@ function Counter() {
 
 Ini bisa jadi agak berbelit tetapi Anda bisa mengekstraknya ke dalam sebuah *custom Hook*:
 
-```js {3,7}
+```js{3,7}
 function Counter() {
   const [count, setCount] = useState(0);
   const prevCount = usePrevious(count);
@@ -366,7 +366,7 @@ function usePrevious(value) {
 
 Perhatikan bagaimana hal ini dapat bekerja pada *props, state,* atau nilai apapun yang diperhitungkan.
 
-```js {5}
+```js{5}
 function Counter() {
   const [count, setCount] = useState(0);
 
@@ -379,7 +379,7 @@ Di masa yang akan datang, React mungkin akan menyediakan sebuah `usePrevious` Ho
 
 Lihat juga [pola yang direkomendasikan untuk *derived state*](#how-do-i-implement-getderivedstatefromprops).
 
-### Mengapa saya melihat *stale prop* atau *state* dalam fungsi yang saya buat?  {#why-am-i-seeing-stale-props-or-state-inside-my-function}
+### Mengapa saya melihat *prop* atau *state* yang basi dalam fungsi yang saya buat?  {#why-am-i-seeing-stale-props-or-state-inside-my-function}
 
 Fungsi apapun yang ada dalam sebuah komponen, termasuk *event handler* dan efek, "melihat" *prop* dan *state* dari dalam proses *render* mana fungsi tersebut diciptakan. Sebagai contohnya, pertimbangkan kode seperi berikut ini:
 
@@ -411,7 +411,7 @@ Jika Anda meng-klik "Show alert" dan kemudian memberi penambahan (*increment*) p
 
 Jika ingin membaca *state* *terkini* dari beberapa *asynchronous callback*, baiknya Anda menyimpannya dalam [sebuah *ref*](/docs/hooks-faq.html#is-there-something-like-instance-variables), mengubahnya, dan membaca dari situ.
 
-Pada akhirnya, alasan lain Anda melihat *stale prop* atau *state* yakni jika Anda menggunakan optimasi "dependency array" tapi tidak secara benar dalam menspesifikasi semua *dependency*-nya. Sebagai contohnya, jika sebuah efek menspesifikasikan `[]` sebagai argumen kedua tetapi membaca `someProp` di dalamnya, efek tersebut akan tetap "melihat" nilai awal dari `someProp`. Solusinya yakni antara menghilangkan *dependency array*, atau memperbaikinya. Ini adalah cara [bagaimana Anda bisa memperlakukan fungsi](#is-it-safe-to-omit-functions-from-the-list-of-dependencies), dan ini adalah [strategi umum lainnya](#what-can-i-do-if-my-effect-dependencies-change-too-often) untuk menjalankan efek lebih jarang tanpa keliru melewatkan *dependency*.
+Pada akhirnya, alasan lain Anda melihat *prop* atau *state* yang basi yakni jika Anda menggunakan optimasi "dependency array" tapi tidak secara benar dalam menspesifikasi semua *dependency*-nya. Sebagai contohnya, jika sebuah efek menspesifikasikan `[]` sebagai argumen kedua tetapi membaca `someProp` di dalamnya, efek tersebut akan tetap "melihat" nilai awal dari `someProp`. Solusinya yakni antara menghilangkan *dependency array*, atau memperbaikinya. Ini adalah cara [bagaimana Anda bisa memperlakukan fungsi](#is-it-safe-to-omit-functions-from-the-list-of-dependencies), dan ini adalah [strategi umum lainnya](#what-can-i-do-if-my-effect-dependencies-change-too-often) untuk menjalankan efek lebih jarang tanpa keliru melewatkan *dependency*.
 
 >Catatan
 >
@@ -462,9 +462,9 @@ Saat Anda seharusnya tidak sering memerlukan hal ini, Anda bisa saja mengekspos
 
 ### Bagaimana cara mengukur *DOM node*? {#how-can-i-measure-a-dom-node}
 
-Untuk mengukur posisi atau ukuran dari sebuah *DOM node*, Anda bisa gunakan [*callback ref*](/docs/refs-and-the-dom.html#callback-refs). React akan memanggil *callback* itu kapanpun *ref* terikat pada sebuah *node* yang berbeda. Berikut ini [demo kecil](https://codesandbox.io/s/l7m0v5x4v9):
+Untuk mengukur posisi atau ukuran dari sebuah *node* DOM, Anda bisa gunakan [*callback ref*](/docs/refs-and-the-dom.html#callback-refs). React akan memanggil *callback* itu kapanpun *ref* terikat pada sebuah *node* yang berbeda. Berikut ini [demo kecil](https://codesandbox.io/s/l7m0v5x4v9):
 
-```js {4-8,12}
+```js{4-8,12}
 function MeasureExample() {
   const [height, setHeight] = useState(0);
 
@@ -489,7 +489,7 @@ Perhatikan bahwa kita mengoper `[]` sebagai sebuah *dependency array* untuk `use
 
 Jika mau, Anda bisa [mengekstrak logika ini](https://codesandbox.io/s/m5o42082xy) ke dalam sebuah Hook yang bisa digunakan ulang:
 
-```js {2}
+```js{2}
 function MeasureExample() {
   const [rect, ref] = useClientRect();
   return (
@@ -529,7 +529,7 @@ Ya. Lihat [pengaktifan efek secara kondisional](/docs/hooks-reference.html#condi
 
 Umumnya tidak aman.
 
-```js {3,8}
+```js{3,8}
 function Example({ someProp }) {
   function doSomething() {
     console.log(someProp);
@@ -543,7 +543,7 @@ function Example({ someProp }) {
 
 Sulit untuk mengingat *prop* atau *state* yang digunakan oleh fungsi yang ada di luar efek. Inilah mengapa **biasanya Anda akan mendeklarasikan fungsi yang dibutuhkan dengan efek *di dalam*-nya.** Lalu kita bisa dengan mudah melihat nilai-nilai apa saja dari cakupan komponen yang jadi patokan efek tersebut:
 
-```js {4,8}
+```js{4,8}
 function Example({ someProp }) {
   useEffect(() => {
     function doSomething() {
@@ -557,7 +557,7 @@ function Example({ someProp }) {
 
 Jika setelah itu kita masih tidak menggunakan nilai apapun dari cakupan komponen tersebut, sebaiknya spesifikasikan `[]` agar aman:
 
-```js {7}
+```js{7}
 useEffect(() => {
   function doSomething() {
     console.log('hello');
@@ -579,7 +579,7 @@ Jika Anda menspesifikasikan sebuah [daftar *dependency*](/docs/hooks-reference.h
 
 Hal tersebut **hanya akan** aman untuk menghilangkan sebuah fungsi dari daftar *dependency* jika tidak terjadi apa-apa di dalamnya (atau fungsi lain yang terpanggil) yang merujuk pada *prop, state,* atau nilai yang berasal dari keduanya. Contoh berikut memiliki *bug*:
 
-```js {5,12}
+```js{5,12}
 function ProductPage({ productId }) {
   const [product, setProduct] = useState(null);
 
@@ -598,7 +598,7 @@ function ProductPage({ productId }) {
 
 **Rekomendasi perbaikannya adalah dengan cara memindahkan fungsi itu _di dalam_ efek yang Anda buat**. Perbaikan tersebut akan memudahkan untuk melihat *prop* atau *state* mana yang efek Anda gunakan, serta memastikan semuanya terdeklarasikan:
 
-```js {5-10,13}
+```js{5-10,13}
 function ProductPage({ productId }) {
   const [product, setProduct] = useState(null);
 
@@ -618,7 +618,7 @@ function ProductPage({ productId }) {
 
 Ini juga membebaskan Anda untuk menangani respon-respon yang tidak pada tempatnya (*out-of-order*) dengan sebuah *local variable* dalam efek tersebut:
 
-```js {2,6,10}
+```js{2,6,10}
   useEffect(() => {
     let ignore = false;
     async function fetchProduct() {
@@ -644,7 +644,7 @@ Kita pindahkan fungsi dalam efek tersebut agar fungsi tersebut tidak perlu berad
 * Jika fungsi yang Anda panggil adalah murni sebuah komputasi dan aman untuk dipanggil saat proses *render*, Anda boleh **memanggilnya di luar efek tersebut sebagai gantinya,** dan membuat efek tersebut bergantung pada nilai balikan (*return*).
 * Sebagai pilihan terakhir, Anda bisa**menambahkan sebuah fungsi ke _dependency_ efek tersebut namun _mengemas definisinya_** ke dalam [`useCallback`](/docs/hooks-reference.html#usecallback) *Hook*. Ini memastikan fungsi tersebut tidak berubah pada tiap *render* kecuali *dependency-nya sendiri* juga berubah:
 
-```js {2-5}
+```js{2-5}
 function ProductPage({ productId }) {
   // ✅ Dikemas dengan useCallback untuk menghindari berubah tiap kali render
   const fetchProduct = useCallback(() => {
@@ -668,7 +668,7 @@ Perhatikan bahwa pada contoh di atas kita **perlu** untuk menjaga fungsi agar te
 
 Terkadang, efek Anda bisa jadi menggunakan *state* yang terlalu sering berubah. Anda mungkin berkeinginan untuk menghilangkan *state* itu dari daftar *dependency*, namun biasanya berujung pada *bug*:
 
-```js {6,9}
+```js{6,9}
 function Counter() {
   const [count, setCount] = useState(0);
 
@@ -687,7 +687,7 @@ Kumpulan *dependency* yang kosong, `[]`, berarti bahwa efek tersebut hanya akan
 
 Menspesifikasikan `[count]` sebagai sebauh daftar *dependency* dapat memperbaiki *bug*, tetapi juga bisa menyebabkan interval tersetel ulang (*reset*) pada setiap perubahan. Secara efektif, tiap `setInterval` akan mendapat satu kali kesempatan untuk mengeksekusi sebelum dikosongkan (mirip dengan `setTimeout`). Hal itu mungkin saja tidak diinginkan. Untuk memperbaikinya, kita bisa gunakan [bentuk pembaruan fungsional pada `setState`](/docs/hooks-reference.html#functional-updates). Hal tersebut membiarkan kita menspesifikasikan *bagaimana* *state* perlu berubah tanpa merujuk pada *state* yang *sekarang*:
 
-```js {6,9}
+```js{6,9}
 function Counter() {
   const [count, setCount] = useState(0);
 
@@ -710,7 +710,7 @@ Dalam kasus-kasus yang lebih kompleks lagi (seperti halnya jika satu *state* ber
 
 Sebagai pilihan terakhir, jika Anda ingin sesuatu seperti `this` dalam sebuah kelas, Anda bisa [gunakan *ref*](/docs/hooks-faq.html#is-there-something-like-instance-variables) untuk menahan sebuah variabel yang berubah-ubah. Kemudian Anda bisa menulis dan membacanya. Contohnya:
 
-```js {2-6,10-11,16}
+```js{2-6,10-11,16}
 function Example(props) {
   // Jaga prop terkini dalam sebuah ref.
   let latestProps = useRef(props);
@@ -851,7 +851,7 @@ Secara tradisional, performa menyangkut seputar fugsi-fungsi *inline* React suda
 
 * *Hook* [`useCallback`](/docs/hooks-reference.html#usecallback) mengizinkan Anda untuk tetap menggunakan rujukan *callback* yang sama di antara *render* ulang sehingga `shouldComponentUpdate` akan terus bekerja:
 
-    ```js {2}
+    ```js{2}
     // Tidak akan berubah kecuali `a` atau `b` berubah
     const memoizedCallback = useCallback(() => {
       doSomething(a, b);
@@ -868,7 +868,7 @@ Kami menemukan bahwa kebanyakan orang tidak menikmati pengoperan *callback* seca
 
 Dalam pohon komponen yang luas, sebuah alternatif yang kami rekomendasikan adalah untuk mengoper sebuah fungsi `dispatch` dari [`useReducer`](/docs/hooks-reference.html#usereducer) melalui *context*:
 
-```js {4,5}
+```js{4,5}
 const TodosDispatch = React.createContext(null);
 
 function TodosApp() {
@@ -885,7 +885,7 @@ function TodosApp() {
 
 Turunan apapun dalam pohon yang ada di dalam `TodosApp` bisa menggunakan fungsi `dispatch` untuk mengoper tindakan kepada `TodosApp`:
 
-```js {2,3}
+```js{2,3}
 function DeepChild(props) {
   // Jika kita ingin melakukan sebuah tindakan, kita bisa mendapatkan dispatch dari context.
   const dispatch = useContext(TodosDispatch);
@@ -914,7 +914,7 @@ Perlu diingat bahawa Anda masih bisa memilih antara mengoper *state* aplikasi se
 
 Dalam beberapa kasus langka Anda mungkin butuh untuk *memoize* sebuah *callback* dengan menggunakan [`useCallback`](/docs/hooks-reference.html#usecallback) tetapi proses *memoize* tidak berjalan dengan baik karena fungsi dalam harus dibuat ulang terlalu sering. Jika fungsi yang Anda *memoize* adalah sebuah *event handler* dan tidak digunakan selama proses *render*, Anda bisa gunakan [*ref* sebagai sebuah *instance variable*](#is-there-something-like-instance-variables), dan menyimpan nilai yang terakhir di-*commit* ke dalam *ref* tersebut secara manual:
 
-```js {6,10}
+```js{6,10}
 function Form() {
   const [text, updateText] = useState('');
   const textRef = useRef();
@@ -939,7 +939,7 @@ function Form() {
 
 Ini bisa saja pola yang berbelit namun menunjukkan pada Anda bahwa Anda bisa melakukan optimasi darurat ini jika membutuhkannya. Bahkan lebih bisa ditangani jika Anda mengekstraknya ke dalam sebuah *custom Hook*:
 
-```js {4,16}
+```js{4,16}
 function Form() {
   const [text, updateText] = useState('');
   // Akan di memoize bahkan jika `text` berubah: