You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/hooks-rules.md
+44-44Lines changed: 44 additions & 44 deletions
Original file line number
Diff line number
Diff line change
@@ -6,33 +6,33 @@ next: hooks-custom.html
6
6
prev: hooks-effect.html
7
7
---
8
8
9
-
*Hooks*are a new addition in React 16.8. They let you use state and other React features without writing a class.
9
+
*Hooks*adalah sebuah fitur tambahan baru di React 16.8. Mereka membantu Anda untuk menggunakan *state* and fitur-fitur React lainnya tanpa menulis sebuah kelas.
10
10
11
-
Hooks are JavaScript functions, but you need to follow two rules when using them. We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)to enforce these rules automatically:
11
+
Hooks adalah fungsi JavaScript, tetapi Anda perlu mengikuti dua aturan pada saat menggunakannya. Kami menyediakan sebuah [*linter plugin*](https://www.npmjs.com/package/eslint-plugin-react-hooks)untuk memberlakukan aturan-aturan ini secara otomatis:
12
12
13
-
### Only Call Hooks at the Top Level {#only-call-hooks-at-the-top-level}
13
+
### Hanya Panggil *Hooks* di Tingkat Atas {#only-call-hooks-at-the-top-level}
14
14
15
-
**Don't call Hooks inside loops, conditions, or nested functions.**Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That's what allows React to correctly preserve the state of Hooks between multiple `useState`and`useEffect` calls. (If you're curious, we'll explain this in depth [below](#explanation).)
15
+
**Jangan memanggil *Hooks* dari dalam *loops*, *conditions*, atau *nested functions*.**Melainkan, selalu gunakan *Hooks* di tingkat atas dari fungsi React Anda. Dengan mengikuti aturan ini, Anda dapat dengan yakin dapat memastikan bahwa *Hooks* akan dipanggil dengan urutan yang sama setiap kali sebuah komponen me-*render*. Hal itu yang menyebabkan React dapat menyimpan *state* dari *Hooks* dengan benar di antara banyak panggilan `useState`dan`useEffect`. (Jika Anda ingin tahu lebih lanjut, kami akan menjelaskan ini lebih dalam [di bawah](#explanation).)
16
16
17
-
### Only Call Hooks from React Functions {#only-call-hooks-from-react-functions}
17
+
### Hanya Panggil *Hooks* dari Fungsi-Fungsi React {#only-call-hooks-from-react-functions}
18
18
19
-
**Don't call Hooks from regular JavaScript functions.**Instead, you can:
19
+
**Jangan memanggil *Hooks* dari fungsi-fungsi JavaScript biasa.**Sebagai gantinya, Anda dapat:
20
20
21
-
* ✅ Call Hooks from React function components.
22
-
* ✅ Call Hooks from custom Hooks (we'll learn about them [on the next page](/docs/hooks-custom.html)).
21
+
* ✅ Memanggil *Hooks* dari komponen-komponen fungsi React.
22
+
* ✅ Memanggil *Hooks* dari *custom Hooks* (kita akan belajar tentang ini [di laman berikutnya](/docs/hooks-custom.html)).
23
23
24
-
By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.
24
+
Dengan mengikuti aturan ini, Anda dapat dengan yakin memastikan bahwa semua logika *stateful* di dalam sebuah komponen terlihat jelas dari *source code*-nya.
25
25
26
-
## ESLint Plugin {#eslint-plugin}
26
+
## *Plugin* ESLint {#eslint-plugin}
27
27
28
-
We released an ESLint plugin called [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)that enforces these two rules. You can add this plugin to your project if you'd like to try it:
28
+
Kami membuat sebuah *ESLint plugin* dengan nama [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)yang membantu menekankan dua aturan-aturan ini. Anda dapat menambahkan *plugin* ini ke proyek Anda jika Anda ingin mencobanya:
In the future, we intend to include this plugin by default into Create React App and similar toolkits.
48
+
Di masa mendatang, kami merencanakan untuk menyertakan *plugin* ini secara umum ke dalam *Create React App* dan *toolkit-tookit* sejenis.
49
49
50
-
**You can skip to the next page explaining how to write [your own Hooks](/docs/hooks-custom.html)now.**On this page, we'll continue by explaining the reasoning behind these rules.
50
+
**Anda dapat melompat ke laman selanjutnya yang menjelaskan bagaimana membuat [*Hooks* Anda sendiri](/docs/hooks-custom.html)sekarang.**Di laman ini, kita akan melanjutkan dengan menjelaskan pemikiran dibalik aturan-aturan ini.
51
51
52
-
## Explanation {#explanation}
52
+
## Penjelasan {#explanation}
53
53
54
-
As we [learned earlier](/docs/hooks-state.html#tip-using-multiple-state-variables), we can use multiple State or Effect Hooks in a single component:
54
+
Seperti yang telah [dipelajari sebelumnya](/docs/hooks-state.html#tip-using-multiple-state-variables), kita dapat menggunakan banyak *State* atau *Effect Hooks* di dalam sebuah komponen:
55
55
56
56
```js
57
57
functionForm() {
58
-
// 1. Use the name state variable
58
+
// 1. Menggunakan state variabel name
59
59
const [name, setName] =useState('Mary');
60
60
61
-
// 2. Use an effect for persisting the form
61
+
// 2. Menggunakan sebuah effect untuk mengukuhkan form
62
62
useEffect(functionpersistForm() {
63
63
localStorage.setItem('formData', name);
64
64
});
65
65
66
-
// 3. Use the surname state variable
66
+
// 3. Menggunakan state variabel surname
67
67
const [surname, setSurname] =useState('Poppins');
68
68
69
-
// 4. Use an effect for updating the title
69
+
// 4. Menggunakan sebuah effect untuk meng-update title
70
70
useEffect(functionupdateTitle() {
71
71
document.title= name +''+ surname;
72
72
});
@@ -75,63 +75,63 @@ function Form() {
75
75
}
76
76
```
77
77
78
-
So how does React know which state corresponds to which `useState`call? The answer is that **React relies on the order in which Hooks are called**. Our example works because the order of the Hook calls is the same on every render:
78
+
Bagaimana React mengetahui *state* mana yang sesuai dengan panggilan `useState`yang mana? Jawabannya adalah **React bergantung pada urutan bagaimana *Hooks* dipanggil**. Contoh kami berjalan dengan baik karena urutan dari panggilan-panggilan *Hook* sama setiap kali *render*:
79
79
80
80
```js
81
81
// ------------
82
-
//First render
82
+
//Render pertama
83
83
// ------------
84
-
useState('Mary') // 1. Initialize the name state variable with 'Mary'
85
-
useEffect(persistForm) // 2. Add an effect for persisting the form
86
-
useState('Poppins') // 3. Initialize the surname state variable with 'Poppins'
87
-
useEffect(updateTitle) // 4. Add an effect for updating the title
84
+
useState('Mary') // 1. Inisialisasi state variabel name dengan 'Mary'
85
+
useEffect(persistForm) // 2. Tambahkan sebuah effect untuk mengukuhkan form
86
+
useState('Poppins') // 3. Inisialisasi state variabel surname dengan 'Poppins'
87
+
useEffect(updateTitle) // 4. Tambahkan sebuah effect untuk meng-update title
88
88
89
89
// -------------
90
-
//Second render
90
+
//Render kedua
91
91
// -------------
92
-
useState('Mary') // 1. Read the name state variable (argument is ignored)
93
-
useEffect(persistForm) // 2. Replace the effect for persisting the form
94
-
useState('Poppins') // 3. Read the surname state variable (argument is ignored)
95
-
useEffect(updateTitle) // 4. Replace the effect for updating the title
92
+
useState('Mary') // 1. Baca state variabel name (argument diabaikan)
93
+
useEffect(persistForm) // 2. Ganti effect untuk mengukuhkan form
94
+
useState('Poppins') // 3. Baca state variabel surname (argument diabaikan)
95
+
useEffect(updateTitle) // 4. Ganti effect untuk meng-update title
96
96
97
97
// ...
98
98
```
99
99
100
-
As long as the order of the Hook calls is the same between renders, React can associate some local state with each of them. But what happens if we put a Hook call (for example, the`persistForm` effect) inside a condition?
100
+
Selama urutan panggilan-panggilan *Hook* sama dalam setiap *render*, React dapat mengasosiasikan beberapa *state* lokal dengannya. Tetapi apa yang akan terjadi jika menaruh sebuah panggilan *Hook* (contoh, *effect*`persistForm`) di dalam sebuah *condition*?
101
101
102
102
```js
103
-
// 🔴 We're breaking the first rule by using a Hook in a condition
103
+
// 🔴 Kita melanggar aturan pertama dengan menggunakan Hook di dalam sebuah condition
104
104
if (name !=='') {
105
105
useEffect(functionpersistForm() {
106
106
localStorage.setItem('formData', name);
107
107
});
108
108
}
109
109
```
110
110
111
-
The`name !== ''`condition is `true`on the first render, so we run this Hook. However, on the next render the user might clear the form, making the condition`false`. Now that we skip this Hook during rendering, the order of the Hook calls becomes different:
111
+
*Condition*`name !== ''`adalah `true`pada *render* pertama, jadi kita menjalankan *Hook* ini. Akan tetapi, pada *render* selanjutnya pengguna mungkin mengosongkan *form*, mengakibatkan *condition* menjadi `false`. Sekarang kita melangkahi *Hook* ini pada saat *rendering*, urutan panggilan-panggilan *Hook* menjadi tidak sama:
112
112
113
113
```js
114
-
useState('Mary') // 1. Read the name state variable (argument is ignored)
115
-
// useEffect(persistForm) // 🔴 This Hook was skipped!
116
-
useState('Poppins') // 🔴 2 (but was 3). Fail to read the surname state variable
117
-
useEffect(updateTitle) // 🔴 3 (but was 4). Fail to replace the effect
114
+
useState('Mary') // 1. Baca state variabel name (argument diabaikan)
115
+
// useEffect(persistForm) // 🔴 Hook ini dilangkahi!
116
+
useState('Poppins') // 🔴 2 (sebelumnya 3). Gagal membaca state variabel surname
117
+
useEffect(updateTitle) // 🔴 3 (sebelumnya 4). Gagal mengganti effect
118
118
```
119
119
120
-
React wouldn't know what to return for the second `useState`Hook call. React expected that the second Hook call in this component corresponds to the`persistForm` effect, just like during the previous render, but it doesn't anymore. From that point, every next Hook call after the one we skipped would also shift by one, leading to bugs.
120
+
React tidak akan mengetahui apa yang harus dikembalikan pada saat panggilan *Hook*`useState`kedua. React mengharapkan bahwa panggilan *Hook* kedua di komponen ini sesuai dengan *effect*`persistForm`, seperti *render* sebelumnya, tetapi tidak lagi. Sejak saat itu, setiap panggilan *Hook* selanjutnya setelah yang kita langkahi juga akan bergeser satu, mengakibatkan *bugs*.
121
121
122
-
**This is why Hooks must be called on the top level of our components.**If we want to run an effect conditionally, we can put that condition*inside* our Hook:
122
+
**Ini sebabnya Hooks harus dipanggil dari level atas komponen-komponen kita.**Jika kita ingin menjalankan sebuah *effect* secara *conditional*, kita dapat menaruh *condition* tersebut *di dalam**Hook* kita:
123
123
124
124
```js
125
125
useEffect(functionpersistForm() {
126
-
// 👍 We're not breaking the first rule anymore
126
+
// 👍 Kita tidak lagi melanggar aturan pertama
127
127
if (name !=='') {
128
128
localStorage.setItem('formData', name);
129
129
}
130
130
});
131
131
```
132
132
133
-
**Note that you don't need to worry about this problem if you use the [provided lint rule](https://www.npmjs.com/package/eslint-plugin-react-hooks).**But now you also know *why*Hooks work this way, and which issues the rule is preventing.
133
+
**Catatan Anda tidak perlu khawatir tentang masalah ini lagi jika Anda menggunakan [*lint rule* yang diberikan](https://www.npmjs.com/package/eslint-plugin-react-hooks).**Tetapi sekarang Anda juga mengetahui *mengapa**Hooks* bekerja dengan cara ini, dan masalah apa yang dihindari dengan mengikuti aturan-aturan ini.
134
134
135
-
## Next Steps {#next-steps}
135
+
## Langkah-Langkah Selanjutnya {#next-steps}
136
136
137
-
Finally, we're ready to learn about [writing your own Hooks](/docs/hooks-custom.html)! Custom Hooks let you combine Hooks provided by React into your own abstractions, and reuse common stateful logic between different components.
137
+
Akhirnya, kita siap untuk belajar mengenai [membuat *Hook* Anda sendiri](/docs/hooks-custom.html)! *Custom Hooks* memperbolehkan Anda untuk menggabungkan *Hooks* dari React ke dalam abstraksi milik Anda, dan menggunakan kembali logika *stateful* umum dalam komponen-komponen yang berbeda.
0 commit comments