Skip to content

Commit 9d19123

Browse files
committed
update: translate useDebugValue
1 parent 4b0f0ae commit 9d19123

File tree

1 file changed

+19
-19
lines changed

1 file changed

+19
-19
lines changed

src/content/reference/react/useDebugValue.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: useDebugValue
44

55
<Intro>
66

7-
`useDebugValue` is a React Hook that lets you add a label to a custom Hook in [React DevTools.](/learn/react-developer-tools)
7+
`useDebugValue` merupakan React Hook yang memungkinkan Anda untuk menambahkan label ke sebuah kustom Hook di dalam [React DevTools.](/learn/react-developer-tools)
88

99
```js
1010
useDebugValue(value, format?)
@@ -20,7 +20,7 @@ useDebugValue(value, format?)
2020
2121
### `useDebugValue(value, format?)` {/*usedebugvalue*/}
2222
23-
Call `useDebugValue` at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable debug value:
23+
Panggil `useDebugValue` di bagian atas [kustom Hook](/learn/reusing-logic-with-custom-hooks) Anda untuk manampilkan nilai debug yang dapat dibaca:
2424
2525
```js
2626
import { useDebugValue } from 'react';
@@ -32,22 +32,22 @@ function useOnlineStatus() {
3232
}
3333
```
3434
35-
[See more examples below.](#usage)
35+
[Lihat lebih banyak contoh di bawah ini.](#usage)
3636
37-
#### Parameters {/*parameters*/}
37+
#### Parameter {/*parameters*/}
3838
39-
* `value`: The value you want to display in React DevTools. It can have any type.
40-
* **optional** `format`: A formatting function. When the component is inspected, React DevTools will call the formatting function with the `value` as the argument, and then display the returned formatted value (which may have any type). If you don't specify the formatting function, the original `value` itself will be displayed.
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.
4141
42-
#### Returns {/*returns*/}
42+
#### Kembalian {/*returns*/}
4343
44-
`useDebugValue` does not return anything.
44+
`useDebugValue` tidak mengembalikan apapun.
4545
46-
## Usage {/*usage*/}
46+
## Penggunaan {/*usage*/}
4747
48-
### Adding a label to a custom Hook {/*adding-a-label-to-a-custom-hook*/}
48+
### Menambahkan sebuah label ke sebuah kustom Hook {/*adding-a-label-to-a-custom-hook*/}
4949
50-
Call `useDebugValue` at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable <CodeStep step={1}>debug value</CodeStep> for [React DevTools.](/learn/react-developer-tools)
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)
5151
5252
```js [[1, 5, "isOnline ? 'Online' : 'Offline'"]]
5353
import { useDebugValue } from 'react';
@@ -59,11 +59,11 @@ function useOnlineStatus() {
5959
}
6060
```
6161
62-
This gives components calling `useOnlineStatus` a label like `OnlineStatus: "Online"` when you inspect them:
62+
Ini membiarkan komponen memanggil `useOnlineStatus` sebuah label seperti `OnlineStatus: "Online"` ketika Anda memeriksa mereka:
6363
64-
![A screenshot of React DevTools showing the debug value](/images/docs/react-devtools-usedebugvalue.png)
64+
![Sebuah tangkapan layar React DevTools yang menunjukan nilai debug](/images/docs/react-devtools-usedebugvalue.png)
6565
66-
Without the `useDebugValue` call, only the underlying data (in this example, `true`) would be displayed.
66+
Tanpa panggilan `useDebugValue`, hanya data yang mendasarinya (dalam contoh ini, `true`) akan ditampilkan.
6767
6868
<Sandpack>
6969
@@ -103,20 +103,20 @@ function subscribe(callback) {
103103
104104
<Note>
105105
106-
Don't add debug values to every custom Hook. It's most valuable for custom Hooks that are part of shared libraries and that have a complex internal data structure that's difficult to inspect.
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.
107107
108108
</Note>
109109
110110
---
111111
112-
### Deferring formatting of a debug value {/*deferring-formatting-of-a-debug-value*/}
112+
### Menunda pemformatan nilai debug {/*deferring-formatting-of-a-debug-value*/}
113113
114-
You can also pass a formatting function as the second argument to `useDebugValue`:
114+
Anda juga bisa meneruskan fungsi pemformatan sebagai argumen kedua ke `useDebugValue`:
115115
116116
```js [[1, 1, "date", 18], [2, 1, "date.toDateString()"]]
117117
useDebugValue(date, date => date.toDateString());
118118
```
119119
120-
Your formatting function will receive the <CodeStep step={1}>debug value</CodeStep> as a parameter and should return a <CodeStep step={2}>formatted display value</CodeStep>. When your component is inspected, React DevTools will call this function and display its result.
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.
121121
122-
This lets you avoid running potentially expensive formatting logic unless the component is actually inspected. For example, if `date` is a Date value, this avoids calling `toDateString()` on it for every render.
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.

0 commit comments

Comments
 (0)