From 57701e5dfec1d337dfffe3adf3712e6ef38fff20 Mon Sep 17 00:00:00 2001 From: Emir Risyad Date: Sun, 30 Apr 2023 11:08:01 +0200 Subject: [PATCH 1/3] Translated profiler page --- src/content/reference/react/Profiler.md | 50 ++++++++++++------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 5bfa3b317..dfd6618c4 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -4,7 +4,7 @@ title: -`` lets you measure rendering performance of a React tree programmatically. +`` memungkinkan Anda mengukur performa *rendering* dari sebuah pohon React secara terprogram. ```js @@ -18,11 +18,11 @@ title: --- -## Reference {/*reference*/} +## Referensi {/*reference*/} ### `` {/*profiler*/} -Wrap a component tree in a `` to measure its rendering performance. +Bungkus pohon komponen dalam `` untuk mengukur performa *rendering*. ```js @@ -32,18 +32,18 @@ Wrap a component tree in a `` to measure its rendering performance. #### Props {/*props*/} -* `id`: A string identifying the part of the UI you are measuring. -* `onRender`: An [`onRender` callback](#onrender-callback) that React calls it every time components within the profiled tree update. It receives information about what was rendered and how much time it took. +* `id`: String yang mengidentifikasi bagian UI yang sedang Anda ukur. +* `onRender`: Sebuah [`onRender` *callback*](#onrender-callback) yang dipanggil oleh React setiap kali komponen dalam pohon yang diprofilkan diperbarui. Menerima informasi tentang apa yang di*render* dan berapa lama waktu yang dibutuhkan. -#### Caveats {/*caveats*/} +#### *Caveats* {/*caveats*/} -* Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling) +* Pembuatan *profiler* akan menambah waktu komputasi, sehingga **dinonaktifkan dalam *build* produksi secara *default*.** Untuk menggunakan *profiler* dalam produksi, Anda harus mengaktifkan sebuah [*build* produksi spesial dengan opsi pembuatan *profiler*.](https://fb.me/react-profiling) --- -### `onRender` callback {/*onrender-callback*/} +### `onRender` *callback* {/*onrender-callback*/} -React will call your `onRender` callback with information about what was rendered. +React akan memanggil `onRender` callback Anda dengan informasi tentang apa yang sudah di*render*. ```js function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) { @@ -53,20 +53,20 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime #### Parameters {/*onrender-parameters*/} -* `id`: The string `id` prop of the `` tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers. -* `phase`: `"mount"`, `"update"` or `"nested-update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks. -* `actualDuration`: The number of milliseconds spent rendering the `` and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. [`memo`](/reference/react/memo) and [`useMemo`](/reference/react/useMemo)). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change. -* `baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `` subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration` against it to see if memoization is working. -* `startTime`: A numeric timestamp for when React began rendering the current update. -* `endTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable. +* `id`: String `id` prop dari pohon `` yang baru saja di*commit*. Ini memungkinkan Anda mengidentifikasi bagian mana dari pohon yang di*commit* jika Anda menggunakan beberapa *profiler*. +* `phase`: `"mount"`, `"update"` atau `"nested-update"`. Hal ini memungkinkan Anda mengetahui, apakah pohon baru saja dipasang untuk pertama kali, atau di*render* ulang karena ada perubahan pada *props*, status, atau *hooks*. +* `actualDuration`: Jumlah milidetik yang dihabiskan untuk me*render* `` dan turunannya untuk pembaruan terkini. Ini mengindikasikan seberapa baik *sub*-pohon menggunakan memoisasi (contohnya [`memo`](/reference/react/memo) dan [`useMemo`](/reference/react/useMemo)). Idealnya, nilai ini akan berkurang secara signifikan setelah pemasangan awal, karena banyak keturunan yang hanya perlu me*render* ulang jika *props* tertentu mereka berubah. +* `baseDuration`: Jumlah milidetik yang memperkirakan berapa lama waktu yang dibutuhkan untuk me*render* ulang seluruh *sub*-pohon `` tanpa pengoptimalan apa pun. Dihitung dengan menjumlahkan durasi *render* terbaru dari setiap komponen dalam pohon. Nilai ini memperkirakan biaya kasus terburuk dari *rendering* (misalnya, pemasangan awal atau pohon tanpa memoisasi). Bandingkan `actualDuration` dengan nilai ini untuk melihat apakah memoisasi berfungsi. +* `startTime`: Stempel waktu numerik untuk mengetahui kapan React mulai me*render* pembaruan terkini. +* `endTime`: Stempel waktu numerik untuk mengetahui kapan React melakukan pembaruan terkini. Nilai ini dibagi di antara semua *profiler* dalam sebuah *commit*, sehingga memungkinkan untuk dikelompokkan jika diinginkan. --- -## Usage {/*usage*/} +## Penggunaan {/*usage*/} -### Measuring rendering performance programmatically {/*measuring-rendering-performance-programmatically*/} +### Mengukur performa *rendering* secara terprogram {/*measuring-rendering-performance-programmatically*/} -Wrap the `` component around a React tree to measure its rendering performance. +Bungkus komponen `` di sekitar pohon React untuk mengukur performa *rendering*nya. ```js {2,4} @@ -77,25 +77,25 @@ Wrap the `` component around a React tree to measure its rendering per ``` -It requires two props: an `id` (string) and an `onRender` callback (function) which React calls any time a component within the tree "commits" an update. +Dua *props* dibutuhkan untuk ini: sebuah `id` (string) dan *callback* `onRender` (fungsi) yang dipanggil oleh React kapan pun sebuah komponen di dalam pohon melakukan pembaruan. -Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling) +Pembuatan *profiler* akan menambah waktu komputasi, sehingga **dinonaktifkan dalam *build* produksi secara *default*.** Untuk menggunakan *profiler* dalam produksi, Anda harus mengaktifkan sebuah [*build* produksi spesial dengan opsi pembuatan *profiler*.](https://fb.me/react-profiling) -`` lets you gather measurements programmatically. If you're looking for an interactive profiler, try the Profiler tab in [React Developer Tools](/learn/react-developer-tools). It exposes similar functionality as a browser extension. +`` memungkinkan Anda mengumpulkan pengukuran secara terprogram. Jika Anda mencari *profiler* interaktif, cobalah tab *Profiler* di [React Developer Tools](/learn/react-developer-tools). Alat ini memiliki fungsionalitas yang serupa sebagai ekstensi peramban. --- -### Measuring different parts of the application {/*measuring-different-parts-of-the-application*/} +### Mengukur berbagai bagian aplikasi yang berbeda {/*measuring-different-parts-of-the-application*/} -You can use multiple `` components to measure different parts of your application: +Anda dapat menggunakan beberapa komponen `` untuk mengukur bagian yang berbeda dari aplikasi Anda: ```js {5,7} @@ -108,7 +108,7 @@ You can use multiple `` components to measure different parts of your ``` -You can also nest `` components: +Anda juga dapat menyarangkan komponen ``: ```js {5,7,9,12} @@ -126,7 +126,7 @@ You can also nest `` components: ``` -Although `` is a lightweight component, it should be used only when necessary. Each use adds some CPU and memory overhead to an application. +Meskipun `` adalah komponen yang ringan, komponen ini sebaiknya digunakan hanya jika diperlukan. Setiap penggunaan akan menambah beban CPU dan memori pada aplikasi. --- From a0884763f3f97e0fd11818684542d58aec4d75ca Mon Sep 17 00:00:00 2001 From: Emir Risyad Date: Sat, 6 May 2023 20:32:36 +0200 Subject: [PATCH 2/3] minor fixes --- src/content/reference/react/Profiler.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index dfd6618c4..9b6de5174 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -33,17 +33,17 @@ Bungkus pohon komponen dalam `` untuk mengukur performa *rendering*. #### Props {/*props*/} * `id`: String yang mengidentifikasi bagian UI yang sedang Anda ukur. -* `onRender`: Sebuah [`onRender` *callback*](#onrender-callback) yang dipanggil oleh React setiap kali komponen dalam pohon yang diprofilkan diperbarui. Menerima informasi tentang apa yang di*render* dan berapa lama waktu yang dibutuhkan. +* `onRender`: Sebuah [`onRender` *callback*](#onrender-callback) yang dipanggil oleh React setiap kali komponen dalam pohon yang diprofilkan diperbarui. Menerima informasi tentang apa yang di-*render* dan berapa lama waktu yang dibutuhkan. #### *Caveats* {/*caveats*/} -* Pembuatan *profiler* akan menambah waktu komputasi, sehingga **dinonaktifkan dalam *build* produksi secara *default*.** Untuk menggunakan *profiler* dalam produksi, Anda harus mengaktifkan sebuah [*build* produksi spesial dengan opsi pembuatan *profiler*.](https://fb.me/react-profiling) +* Pembuatan *profiler* akan menambah waktu komputasi, sehingga **dinonaktifkan dalam *build* produksi secara bawaan.** Untuk menggunakan *profiler* dalam produksi, Anda harus mengaktifkan sebuah [*build* produksi spesial dengan opsi pembuatan *profiler*.](https://fb.me/react-profiling) --- ### `onRender` *callback* {/*onrender-callback*/} -React akan memanggil `onRender` callback Anda dengan informasi tentang apa yang sudah di*render*. +React akan memanggil `onRender` callback Anda dengan informasi tentang apa yang sudah di-*render*. ```js function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) { @@ -54,10 +54,10 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime #### Parameters {/*onrender-parameters*/} * `id`: String `id` prop dari pohon `` yang baru saja di*commit*. Ini memungkinkan Anda mengidentifikasi bagian mana dari pohon yang di*commit* jika Anda menggunakan beberapa *profiler*. -* `phase`: `"mount"`, `"update"` atau `"nested-update"`. Hal ini memungkinkan Anda mengetahui, apakah pohon baru saja dipasang untuk pertama kali, atau di*render* ulang karena ada perubahan pada *props*, status, atau *hooks*. -* `actualDuration`: Jumlah milidetik yang dihabiskan untuk me*render* `` dan turunannya untuk pembaruan terkini. Ini mengindikasikan seberapa baik *sub*-pohon menggunakan memoisasi (contohnya [`memo`](/reference/react/memo) dan [`useMemo`](/reference/react/useMemo)). Idealnya, nilai ini akan berkurang secara signifikan setelah pemasangan awal, karena banyak keturunan yang hanya perlu me*render* ulang jika *props* tertentu mereka berubah. -* `baseDuration`: Jumlah milidetik yang memperkirakan berapa lama waktu yang dibutuhkan untuk me*render* ulang seluruh *sub*-pohon `` tanpa pengoptimalan apa pun. Dihitung dengan menjumlahkan durasi *render* terbaru dari setiap komponen dalam pohon. Nilai ini memperkirakan biaya kasus terburuk dari *rendering* (misalnya, pemasangan awal atau pohon tanpa memoisasi). Bandingkan `actualDuration` dengan nilai ini untuk melihat apakah memoisasi berfungsi. -* `startTime`: Stempel waktu numerik untuk mengetahui kapan React mulai me*render* pembaruan terkini. +* `phase`: `"mount"`, `"update"` atau `"nested-update"`. Hal ini memungkinkan Anda mengetahui, apakah pohon baru saja dipasang untuk pertama kali, atau di-*render* ulang karena ada perubahan pada *props*, status, atau *hooks*. +* `actualDuration`: Jumlah milidetik yang dihabiskan untuk me-*render* `` dan turunannya untuk pembaruan terkini. Ini mengindikasikan seberapa baik *sub*-pohon menggunakan memoisasi (contohnya [`memo`](/reference/react/memo) dan [`useMemo`](/reference/react/useMemo)). Idealnya, nilai ini akan berkurang secara signifikan setelah pemasangan awal, karena banyak keturunan yang hanya perlu me-*render* ulang jika *props* tertentu mereka berubah. +* `baseDuration`: Jumlah milidetik yang memperkirakan berapa lama waktu yang dibutuhkan untuk me-*render* ulang seluruh *sub*-pohon `` tanpa pengoptimalan apa pun. Dihitung dengan menjumlahkan durasi *render* terbaru dari setiap komponen dalam pohon. Nilai ini memperkirakan biaya kasus terburuk dari *rendering* (misalnya, pemasangan awal atau pohon tanpa memoisasi). Bandingkan `actualDuration` dengan nilai ini untuk melihat apakah memoisasi berfungsi. +* `startTime`: Stempel waktu numerik untuk mengetahui kapan React mulai me-*render* pembaruan terkini. * `endTime`: Stempel waktu numerik untuk mengetahui kapan React melakukan pembaruan terkini. Nilai ini dibagi di antara semua *profiler* dalam sebuah *commit*, sehingga memungkinkan untuk dikelompokkan jika diinginkan. --- From 5ce6090ad6930543a7ef4a50293f4cbd9cb80722 Mon Sep 17 00:00:00 2001 From: Emir Risyad Date: Sun, 4 Jun 2023 23:12:11 +0200 Subject: [PATCH 3/3] fix --- src/content/reference/react/Profiler.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 9b6de5174..eed6df888 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -43,7 +43,7 @@ Bungkus pohon komponen dalam `` untuk mengukur performa *rendering*. ### `onRender` *callback* {/*onrender-callback*/} -React akan memanggil `onRender` callback Anda dengan informasi tentang apa yang sudah di-*render*. +React akan memanggil `onRender` *callback* Anda dengan informasi tentang apa yang sudah di-*render*. ```js function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) { @@ -53,7 +53,7 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime #### Parameters {/*onrender-parameters*/} -* `id`: String `id` prop dari pohon `` yang baru saja di*commit*. Ini memungkinkan Anda mengidentifikasi bagian mana dari pohon yang di*commit* jika Anda menggunakan beberapa *profiler*. +* `id`: String `id` prop dari pohon `` yang baru saja di-*commit*. Ini memungkinkan Anda mengidentifikasi bagian mana dari pohon yang di-*commit* jika Anda menggunakan beberapa *profiler*. * `phase`: `"mount"`, `"update"` atau `"nested-update"`. Hal ini memungkinkan Anda mengetahui, apakah pohon baru saja dipasang untuk pertama kali, atau di-*render* ulang karena ada perubahan pada *props*, status, atau *hooks*. * `actualDuration`: Jumlah milidetik yang dihabiskan untuk me-*render* `` dan turunannya untuk pembaruan terkini. Ini mengindikasikan seberapa baik *sub*-pohon menggunakan memoisasi (contohnya [`memo`](/reference/react/memo) dan [`useMemo`](/reference/react/useMemo)). Idealnya, nilai ini akan berkurang secara signifikan setelah pemasangan awal, karena banyak keturunan yang hanya perlu me-*render* ulang jika *props* tertentu mereka berubah. * `baseDuration`: Jumlah milidetik yang memperkirakan berapa lama waktu yang dibutuhkan untuk me-*render* ulang seluruh *sub*-pohon `` tanpa pengoptimalan apa pun. Dihitung dengan menjumlahkan durasi *render* terbaru dari setiap komponen dalam pohon. Nilai ini memperkirakan biaya kasus terburuk dari *rendering* (misalnya, pemasangan awal atau pohon tanpa memoisasi). Bandingkan `actualDuration` dengan nilai ini untuk melihat apakah memoisasi berfungsi.