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: src/content/reference/react/useDebugValue.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ title: useDebugValue
4
4
5
5
<Intro>
6
6
7
-
`useDebugValue` merupakan React Hook yang memungkinkan Anda untuk menambahkan label ke sebuah kustom Hook di dalam [React DevTools.](/learn/react-developer-tools)
7
+
`useDebugValue` merupakan React Hook yang memungkinkan Anda untuk menambahkan label ke sebuah Hook kustom di dalam [React DevTools.](/learn/react-developer-tools)
Panggil `useDebugValue` di bagian atas [kustom Hook](/learn/reusing-logic-with-custom-hooks) Anda untuk manampilkan nilai *debug* yang dapat dibaca:
23
+
Panggil `useDebugValue` di bagian atas [Hook kustom](/learn/reusing-logic-with-custom-hooks) Anda untuk manampilkan nilai *debug* yang dapat dibaca:
24
24
25
25
```js
26
26
import { useDebugValue } from'react';
@@ -37,17 +37,17 @@ function useOnlineStatus() {
37
37
#### Parameter {/*parameters*/}
38
38
39
39
* `value`: Nilai yang Anda inginkan untuk ditampilkan di dalam React DevTools. Nilai tersebut dapat memiliki tipe apa pun.
40
-
* `format` **opsional**: Sebuah fungsi format. Ketika komponen diperiksa, React DevTools akan memanggil fungsi pemformatan dengan `value` sebagai argumennya, dan kemudian menampilkan nilai kembalian yang telah diformat (yang mungkin memiliki jenis apapun). Jika Anda tidak menentukan fungsi pemformatan, `value` asli itu sendiri yang akan ditampilkan.
40
+
* `format` **opsional**: Fungsi untuk pemformatan. Ketika komponen diperiksa, React DevTools akan memanggil fungsi pemformatan dengan `value` sebagai argumennya, dan kemudian menampilkan nilai kembalian yang telah diformat (yang mungkin memiliki jenis apapun). Jika Anda tidak menentukan fungsi pemformatan, `value` asli itu sendiri yang akan ditampilkan.
41
41
42
42
#### Kembalian {/*returns*/}
43
43
44
44
`useDebugValue` tidak mengembalikan apapun.
45
45
46
46
## Penggunaan {/*usage*/}
47
47
48
-
### Menambahkan sebuah label ke sebuah kustom Hook {/*adding-a-label-to-a-custom-hook*/}
48
+
### Menambahkan sebuah label ke sebuah Hook kustom {/*adding-a-label-to-a-custom-hook*/}
49
49
50
-
Panggil `useDebugValue` pada bagian atas [kustom Hook](/learn/reusing-logic-with-custom-hooks) Anda untuk menampilkan <CodeStep step={1}>nilai debug</CodeStep> yang dapat dibaca untuk [React DevTools.](/learn/react-developer-tools)
50
+
Panggil `useDebugValue` pada bagian atas [Hook kustom](/learn/reusing-logic-with-custom-hooks) Anda untuk menampilkan <CodeStep step={1}>nilai debug</CodeStep> yang dapat dibaca untuk [React DevTools.](/learn/react-developer-tools)
51
51
52
52
```js [[1, 5, "isOnline ? 'Online' : 'Offline'"]]
53
53
import { useDebugValue } from'react';
@@ -59,7 +59,7 @@ function useOnlineStatus() {
59
59
}
60
60
```
61
61
62
-
Ini membiarkan komponen memanggil `useOnlineStatus`sebuah label seperti `OnlineStatus:"Online"` ketika Anda memeriksa mereka:
62
+
Hal ini akan mengakibatkan komponen yang memanggil `useOnlineStatus`memiliki label seperti `OnlineStatus:"Online"` ketika Anda memeriksanya:
63
63
64
64

65
65
@@ -103,7 +103,7 @@ function subscribe(callback) {
103
103
104
104
<Note>
105
105
106
-
Jangan menambahkan nilai *debug* untuk setiap kustom Hook. Itu paling berharga untuk kustom Hooks yang merupakan bagian dari pustaka bersama dan memiliki struktur data internal kompleks yang sulit untuk diperiksa.
106
+
Jangan menambahkan nilai *debug* untuk setiap Hook kustom. Itu paling berharga untuk kustom Hooks yang merupakan bagian dari pustaka bersama dan memiliki struktur data internal yang kompleks sehingga sulit untuk diperiksa.
107
107
108
108
</Note>
109
109
@@ -117,6 +117,6 @@ Anda juga bisa meneruskan fungsi pemformatan sebagai argumen kedua ke `useDebugV
117
117
useDebugValue(date, date=>date.toDateString());
118
118
```
119
119
120
-
Fungsi pemformatan Anda akan menerima <CodeStep step={1}>nilai debug</CodeStep> sebagai sebuah parameter dan akan kembali sebuah <CodeStep step={2}>nilai tampilan yang diformat</CodeStep>. Ketika komponen Anda diperiksa, React DevTools akan memanggil fungsi ini dan menampilkan hasilnya.
120
+
Fungsi pemformatan Anda akan menerima <CodeStep step={1}>nilai debug</CodeStep> sebagai sebuah parameter dan akan mengembalikan sebuah <CodeStep step={2}>nilai tampilan yang telah diformat</CodeStep>. Ketika komponen Anda diperiksa, React DevTools akan memanggil fungsi ini dan menampilkan hasilnya.
121
121
122
-
Ini memungkinkan Anda menghindari menjalankan logika pemformatan yang berpotensi mahal kecuali komponen benar-benar diperiksa. Sebagai contoh, jika `date` merupakan sebuah nilai Tanggal, ini menghindari pemanggilan `toDateString()` pada setiap render komponen.
122
+
Ini memungkinkan Anda menghindari menjalankan logika pemformatan yang berpotensi berat kecuali komponen benar-benar diperiksa. Sebagai contoh, jika `date` merupakan sebuah nilai Tanggal, ini menghindari pemanggilan `toDateString()` pada setiap render komponen.
0 commit comments