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
**Dengan perubahan ini, `ShippingForm` akan melewati *rendering* ulang jika semua *props* itu *sama* seperti *render* sebelumnya.** inilah kenapa meng-*cache* sebuah fungsi menjadi penting! misalkan Anda mendefinisikan `handleSubmit` tanpa `useCallback`:
116
+
**Dengan perubahan ini, `ShippingForm` akan melewati *rendering* ulang jika semua *props* itu sama seperti *render* sebelumnya.** inilah kenapa meng-*cache* sebuah fungsi menjadi penting! misalkan Anda mendefinisikan `handleSubmit` tanpa `useCallback`:
**Dengan membungkus `handleSubmit` dalam `useCallback`, Anda memastikan bahwa itu adalah fungsi yang *sama* antara setiap *render* ulang** (sampai dependensi berubah). Anda tidak *harus* bungkus sebuah fungsi dalam `useCallback` kecuali jika Anda melakukannya untuk beberapa alasan tertentu. Dalam contoh ini, alasannya adalah Anda oper itu ke komponen yang dibungkus dalam [`memo`,](/reference/react/memo) dan ini memungkinkannya untuk lewati *render* ulang. ada alasan lain mengapa Anda mungkin butuh `useCallback` yang dijelaskan lebih lanjut di halaman ini.
158
+
**Dengan membungkus `handleSubmit` dalam `useCallback`, Anda memastikan bahwa itu adalah fungsi yang sama antara setiap *render* ulang** (sampai dependensi berubah). Anda tidak harus bungkus sebuah fungsi dalam `useCallback` kecuali jika Anda melakukannya untuk beberapa alasan tertentu. Dalam contoh ini, alasannya adalah Anda oper itu ke komponen yang dibungkus dalam [`memo`,](/reference/react/memo) dan ini memungkinkannya untuk lewati *render* ulang. ada alasan lain mengapa Anda mungkin butuh `useCallback` yang dijelaskan lebih lanjut di halaman ini.
159
159
160
160
<Note>
161
161
@@ -197,7 +197,7 @@ function ProductPage({ productId, referrer }) {
197
197
Perbedaannya terletak pada *apa* yang Anda simpan dalam *cache*:
198
198
199
199
* **[`useMemo`](/reference/react/useMemo) meng-*cache* *hasil* dari panggilan fungsi Anda.** Dalam contoh ini, itu meng-*cache* hasil pemanggilan fungsi `computeRequirements(product)` sehingga hasilnya tidak akan berubah kecuali `product` berubah. ini memungkinkan Anda untuk oper objek `requirements` tanpa perlu *render* ulang `ShippingForm`. Jika diperlukan, React akan memanggil fungsi yang telah Anda oper selama *rendering* untuk menghitung hasilnya.
200
-
* **`useCallback` meng-*cache* *fungsi itu sendiri.*** Berbeda dengan `useMemo`, itu tidak akan memanggil fungsi yang Anda berikan. Sebaliknya, itu akan meng-*cache* fungsi yang telah Anda berikan sehingga `handleSubmit`*sendiri* tidak akan berubah kecuali `productId` atau `referrer` telah berubah. Ini memungkinan Anda untuk oper fungsi `handleSubmit` ke bawah tanpa perlu *render* ulang `ShippingForm`. Kode Anda tidak akan dijalankan sampai pengguna mengirimkan formulir.
200
+
* **`useCallback` meng-*cache* fungsi itu sendiri.** Berbeda dengan `useMemo`, itu tidak akan memanggil fungsi yang Anda berikan. Sebaliknya, itu akan meng-*cache* fungsi yang telah Anda berikan sehingga `handleSubmit` sendiri tidak akan berubah kecuali `productId` atau `referrer` telah berubah. Ini memungkinan Anda untuk oper fungsi `handleSubmit` ke bawah tanpa perlu *render* ulang `ShippingForm`. Kode Anda tidak akan dijalankan sampai pengguna mengirimkan formulir.
201
201
202
202
Jika Anda sudah terbiasa dengan [`useMemo`,](/reference/react/useMemo) Anda mungkin merasa terbantu dengan `useCallback` seperti ini:
203
203
@@ -225,7 +225,7 @@ Caching fungsi dengan `useCallback` hanya bermanfaat dalam beberapa kasus:
225
225
226
226
Jika tidak ada manfaat dari membungkus sebuah fungsi dengan `useCallback` pada kasus lain. Tidak ada kerugian yang signifikan dari melakukan itu juga, sehingga beberapa tim memilih untuk tidak memikirkan kasus-kasus individu, dan memoize sebanyak mungkin. Kekurangannya adalah kode menjadi kurang mudah dibaca. Selain itu, tidak semua memoize efektif: sebuah nilai tunggal yang "selalu baru" sudah cukup untuk menghancurkan memoisasi untuk seluruh komponen.
227
227
228
-
Perhatikan bahwa `useCallback` tidak mencegah *membuat* fungsi. Anda selalu membuat fungsi (dan itu bagus!), tapi React akan mengabaikannya dan memberi Anda kembali fungsi yang sudah di-*cache* jika tidak ada yang berubah.
228
+
Perhatikan bahwa `useCallback` tidak mencegah membuat fungsi. Anda selalu membuat fungsi (dan itu bagus!), tapi React akan mengabaikannya dan memberi Anda kembali fungsi yang sudah di-*cache* jika tidak ada yang berubah.
229
229
230
230
**Dalam praktiknya, Anda dapat menghindari penggunaan memoisasi yang berlebihan dengan mengikuti beberapa prinsip:**
231
231
@@ -691,7 +691,7 @@ function TodoList() {
691
691
// ...
692
692
```
693
693
694
-
Disini, bukannya menjadikan `todos` sebagai dependensi dan membacanya di dalamnya, Anda memberikan instruksi tentang *bagaimana* to memperbarui *state* (`todos=> [...todos, newTodo]`) ke React. [Baca lebih lanjut tentang *updater functions*.](/reference/react/useState#updating-state-based-on-the-previous-state)
694
+
Disini, bukannya menjadikan `todos` sebagai dependensi dan membacanya di dalamnya, Anda memberikan instruksi tentang bagaimana untuk memperbarui *state* (`todos=> [...todos, newTodo]`) ke React. [Baca lebih lanjut tentang *updater functions*.](/reference/react/useState#updating-state-based-on-the-previous-state)
695
695
696
696
---
697
697
@@ -752,7 +752,7 @@ function ChatRoom({ roomId }) {
752
752
// ...
753
753
```
754
754
755
-
Ini memastikan bahwa fungsi `createOptions` sama antara pengulangan *render* jika `roomId` sama. **Namun, lebih baik lagi untuk menghilangkan kebutuhan akan dependensi fungsi.** Pindahkan fungsi Anda *ke dalam* *Effect*:
755
+
Ini memastikan bahwa fungsi `createOptions` sama antara pengulangan *render* jika `roomId` sama. **Namun, lebih baik lagi untuk menghilangkan kebutuhan akan dependensi fungsi.** Pindahkan fungsi Anda ke dalam *Effect*:
0 commit comments