From 589e61e9b481263505497be779679cf5b14e5c76 Mon Sep 17 00:00:00 2001 From: Argana Phangquestian Date: Wed, 26 Apr 2023 23:39:54 +0700 Subject: [PATCH 1/6] update: translate `useDebugValue` --- src/content/reference/react/useDebugValue.md | 38 ++++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index 8826665e7..7feadd1cb 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -4,7 +4,7 @@ title: useDebugValue -`useDebugValue` is a React Hook that lets you add a label to a custom Hook in [React DevTools.](/learn/react-developer-tools) +`useDebugValue` merupakan React Hook yang memungkinkan Anda untuk menambahkan label ke sebuah kustom Hook di dalam [React DevTools.](/learn/react-developer-tools) ```js useDebugValue(value, format?) @@ -20,7 +20,7 @@ useDebugValue(value, format?) ### `useDebugValue(value, format?)` {/*usedebugvalue*/} -Call `useDebugValue` at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable debug value: +Panggil `useDebugValue` di bagian atas [kustom Hook](/learn/reusing-logic-with-custom-hooks) Anda untuk manampilkan nilai debug yang dapat dibaca: ```js import { useDebugValue } from 'react'; @@ -32,22 +32,22 @@ function useOnlineStatus() { } ``` -[See more examples below.](#usage) +[Lihat lebih banyak contoh di bawah ini.](#usage) -#### Parameters {/*parameters*/} +#### Parameter {/*parameters*/} -* `value`: The value you want to display in React DevTools. It can have any type. -* **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. +* `value`: Nilai yang Anda inginkan untuk ditampilkan di dalam React DevTools. Nilai tersebut dapat memiliki tipe apa pun. +* `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. -#### Returns {/*returns*/} +#### Kembalian {/*returns*/} -`useDebugValue` does not return anything. +`useDebugValue` tidak mengembalikan apapun. -## Usage {/*usage*/} +## Penggunaan {/*usage*/} -### Adding a label to a custom Hook {/*adding-a-label-to-a-custom-hook*/} +### Menambahkan sebuah label ke sebuah kustom Hook {/*adding-a-label-to-a-custom-hook*/} -Call `useDebugValue` at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable debug value for [React DevTools.](/learn/react-developer-tools) +Panggil `useDebugValue` pada bagian atas [kustom Hook](/learn/reusing-logic-with-custom-hooks) Anda untuk menampilkan nilai debug yang dapat dibaca untuk [React DevTools.](/learn/react-developer-tools) ```js [[1, 5, "isOnline ? 'Online' : 'Offline'"]] import { useDebugValue } from 'react'; @@ -59,11 +59,11 @@ function useOnlineStatus() { } ``` -This gives components calling `useOnlineStatus` a label like `OnlineStatus: "Online"` when you inspect them: +Ini membiarkan komponen memanggil `useOnlineStatus` sebuah label seperti `OnlineStatus: "Online"` ketika Anda memeriksa mereka: -![A screenshot of React DevTools showing the debug value](/images/docs/react-devtools-usedebugvalue.png) +![Sebuah tangkapan layar React DevTools yang menunjukan nilai debug](/images/docs/react-devtools-usedebugvalue.png) -Without the `useDebugValue` call, only the underlying data (in this example, `true`) would be displayed. +Tanpa panggilan `useDebugValue`, hanya data yang mendasarinya (dalam contoh ini, `true`) akan ditampilkan. @@ -103,20 +103,20 @@ function subscribe(callback) { -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. +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. --- -### Deferring formatting of a debug value {/*deferring-formatting-of-a-debug-value*/} +### Menunda pemformatan nilai debug {/*deferring-formatting-of-a-debug-value*/} -You can also pass a formatting function as the second argument to `useDebugValue`: +Anda juga bisa meneruskan fungsi pemformatan sebagai argumen kedua ke `useDebugValue`: ```js [[1, 1, "date", 18], [2, 1, "date.toDateString()"]] useDebugValue(date, date => date.toDateString()); ``` -Your formatting function will receive the debug value as a parameter and should return a formatted display value. When your component is inspected, React DevTools will call this function and display its result. +Fungsi pemformatan Anda akan menerima nilai debug sebagai sebuah parameter dan akan kembali sebuah nilai tampilan yang diformat. Ketika komponen Anda diperiksa, React DevTools akan memanggil fungsi ini dan menampilkan hasilnya. -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. +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. From d2a92d5b94926500f1413c0902df9d84d5c55ec9 Mon Sep 17 00:00:00 2001 From: Argana Phangquestian Date: Wed, 26 Apr 2023 23:45:55 +0700 Subject: [PATCH 2/6] update: `Reference` header --- src/content/reference/react/useDebugValue.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index 7feadd1cb..21b64445f 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -16,7 +16,7 @@ useDebugValue(value, format?) --- -## Reference {/*reference*/} +## Referensi {/*reference*/} ### `useDebugValue(value, format?)` {/*usedebugvalue*/} From 1d19054f982a67d19562c40d516f00fbfd21edd5 Mon Sep 17 00:00:00 2001 From: Argana Phangquestian Date: Thu, 27 Apr 2023 00:50:26 +0700 Subject: [PATCH 3/6] update: formatting for `debug` --- src/content/reference/react/useDebugValue.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index 21b64445f..83b7cff79 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -20,7 +20,7 @@ useDebugValue(value, format?) ### `useDebugValue(value, format?)` {/*usedebugvalue*/} -Panggil `useDebugValue` di bagian atas [kustom Hook](/learn/reusing-logic-with-custom-hooks) Anda untuk manampilkan nilai debug yang dapat dibaca: +Panggil `useDebugValue` di bagian atas [kustom Hook](/learn/reusing-logic-with-custom-hooks) Anda untuk manampilkan nilai *debug* yang dapat dibaca: ```js import { useDebugValue } from 'react'; @@ -103,13 +103,13 @@ function subscribe(callback) { -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. +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. --- -### Menunda pemformatan nilai debug {/*deferring-formatting-of-a-debug-value*/} +### Menunda pemformatan nilai *debug* {/*deferring-formatting-of-a-debug-value*/} Anda juga bisa meneruskan fungsi pemformatan sebagai argumen kedua ke `useDebugValue`: From f50d27bc79f229e7404b33d1aeb0e61ab84df248 Mon Sep 17 00:00:00 2001 From: Argana Phangquestian Date: Thu, 27 Apr 2023 10:31:44 +0700 Subject: [PATCH 4/6] update: proofreading --- src/content/reference/react/useDebugValue.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index 83b7cff79..c995eea8d 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -4,7 +4,7 @@ title: useDebugValue -`useDebugValue` merupakan React Hook yang memungkinkan Anda untuk menambahkan label ke sebuah kustom Hook di dalam [React DevTools.](/learn/react-developer-tools) +`useDebugValue` merupakan React Hook yang memungkinkan Anda untuk menambahkan label ke sebuah Hook kustom di dalam [React DevTools.](/learn/react-developer-tools) ```js useDebugValue(value, format?) @@ -20,7 +20,7 @@ useDebugValue(value, format?) ### `useDebugValue(value, format?)` {/*usedebugvalue*/} -Panggil `useDebugValue` di bagian atas [kustom Hook](/learn/reusing-logic-with-custom-hooks) Anda untuk manampilkan nilai *debug* yang dapat dibaca: +Panggil `useDebugValue` di bagian atas [Hook kustom](/learn/reusing-logic-with-custom-hooks) Anda untuk manampilkan nilai *debug* yang dapat dibaca: ```js import { useDebugValue } from 'react'; @@ -37,7 +37,7 @@ function useOnlineStatus() { #### Parameter {/*parameters*/} * `value`: Nilai yang Anda inginkan untuk ditampilkan di dalam React DevTools. Nilai tersebut dapat memiliki tipe apa pun. -* `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. +* `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. #### Kembalian {/*returns*/} @@ -45,9 +45,9 @@ function useOnlineStatus() { ## Penggunaan {/*usage*/} -### Menambahkan sebuah label ke sebuah kustom Hook {/*adding-a-label-to-a-custom-hook*/} +### Menambahkan sebuah label ke sebuah Hook kustom {/*adding-a-label-to-a-custom-hook*/} -Panggil `useDebugValue` pada bagian atas [kustom Hook](/learn/reusing-logic-with-custom-hooks) Anda untuk menampilkan nilai debug yang dapat dibaca untuk [React DevTools.](/learn/react-developer-tools) +Panggil `useDebugValue` pada bagian atas [Hook kustom](/learn/reusing-logic-with-custom-hooks) Anda untuk menampilkan nilai debug yang dapat dibaca untuk [React DevTools.](/learn/react-developer-tools) ```js [[1, 5, "isOnline ? 'Online' : 'Offline'"]] import { useDebugValue } from 'react'; @@ -59,7 +59,7 @@ function useOnlineStatus() { } ``` -Ini membiarkan komponen memanggil `useOnlineStatus` sebuah label seperti `OnlineStatus: "Online"` ketika Anda memeriksa mereka: +Hal ini akan mengakibatkan komponen yang memanggil `useOnlineStatus` memiliki label seperti `OnlineStatus: "Online"` ketika Anda memeriksanya: ![Sebuah tangkapan layar React DevTools yang menunjukan nilai debug](/images/docs/react-devtools-usedebugvalue.png) @@ -103,7 +103,7 @@ function subscribe(callback) { -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. +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. @@ -117,6 +117,6 @@ Anda juga bisa meneruskan fungsi pemformatan sebagai argumen kedua ke `useDebugV useDebugValue(date, date => date.toDateString()); ``` -Fungsi pemformatan Anda akan menerima nilai debug sebagai sebuah parameter dan akan kembali sebuah nilai tampilan yang diformat. Ketika komponen Anda diperiksa, React DevTools akan memanggil fungsi ini dan menampilkan hasilnya. +Fungsi pemformatan Anda akan menerima nilai debug sebagai sebuah parameter dan akan mengembalikan sebuah nilai tampilan yang telah diformat. Ketika komponen Anda diperiksa, React DevTools akan memanggil fungsi ini dan menampilkan hasilnya. -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. +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. From 970bb065ee8127b3866f20450a475658956dd212 Mon Sep 17 00:00:00 2001 From: Argana Phangquestian Date: Thu, 27 Apr 2023 23:50:09 +0700 Subject: [PATCH 5/6] update: improving detail docs --- src/content/reference/react/useDebugValue.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index c995eea8d..bbc839082 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -63,7 +63,7 @@ Hal ini akan mengakibatkan komponen yang memanggil `useOnlineStatus` memiliki l ![Sebuah tangkapan layar React DevTools yang menunjukan nilai debug](/images/docs/react-devtools-usedebugvalue.png) -Tanpa panggilan `useDebugValue`, hanya data yang mendasarinya (dalam contoh ini, `true`) akan ditampilkan. +Tanpa panggilan `useDebugValue`, hanya data yang mendasarinya (dalam contoh ini, `true`) yang akan ditampilkan. @@ -103,7 +103,7 @@ function subscribe(callback) { -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. +Jangan menambahkan nilai *debug* untuk setiap Hook kustom. Nilai tersebut paling berharga untuk Hooks kustom yang merupakan bagian dari pustaka bersama dan memiliki struktur data internal yang kompleks sehingga sulit untuk diperiksa. @@ -119,4 +119,4 @@ useDebugValue(date, date => date.toDateString()); Fungsi pemformatan Anda akan menerima nilai debug sebagai sebuah parameter dan akan mengembalikan sebuah nilai tampilan yang telah diformat. Ketika komponen Anda diperiksa, React DevTools akan memanggil fungsi ini dan menampilkan hasilnya. -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. +Ini memungkinkan Anda menghindari menjalankan logika pemformatan yang berpotensi mahal kecuali komponen benar-benar diperiksa. Sebagai contoh, jika `date` merupakan sebuah nilai *Date*, ini menghindari pemanggilan `toDateString()` pada setiap render. From 6a4d3e9571c9dae88a7fb9914ad14e9081daea59 Mon Sep 17 00:00:00 2001 From: Argana Phangquestian <113628066+arganaphang@users.noreply.github.com> Date: Mon, 1 May 2023 12:43:41 +0700 Subject: [PATCH 6/6] Update src/content/reference/react/useDebugValue.md Co-authored-by: M Haidar Hanif --- src/content/reference/react/useDebugValue.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index bbc839082..ed9b79bda 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -119,4 +119,4 @@ useDebugValue(date, date => date.toDateString()); Fungsi pemformatan Anda akan menerima nilai debug sebagai sebuah parameter dan akan mengembalikan sebuah nilai tampilan yang telah diformat. Ketika komponen Anda diperiksa, React DevTools akan memanggil fungsi ini dan menampilkan hasilnya. -Ini memungkinkan Anda menghindari menjalankan logika pemformatan yang berpotensi mahal kecuali komponen benar-benar diperiksa. Sebagai contoh, jika `date` merupakan sebuah nilai *Date*, ini menghindari pemanggilan `toDateString()` pada setiap render. +Ini memungkinkan Anda menghindari menjalankan logika pemformatan yang berpotensi mahal/berat (*potentially expensive formatting logic*) kecuali komponen benar-benar diperiksa. Sebagai contoh, jika `date` merupakan sebuah nilai *Date*, ini menghindari pemanggilan `toDateString()` pada setiap render.