From 246377e2a01aa57ff03901728258fcf4b4a14e44 Mon Sep 17 00:00:00 2001 From: Resi Respati Date: Thu, 14 Nov 2019 18:42:14 +0700 Subject: [PATCH 1/6] Translate Optimizing Performance (production build) --- content/docs/optimizing-performance.md | 80 +++++++++++++------------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index 8354166e6..048daa4f9 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -1,57 +1,57 @@ --- id: optimizing-performance -title: Optimizing Performance +title: Mengoptimalkan Performa permalink: docs/optimizing-performance.html redirect_from: - "docs/advanced-performance.html" --- -Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. Nevertheless, there are several ways you can speed up your React application. +Secara internal, React menggunakan beberapa teknik cermat untuk meminimalkan jumlah operasi DOM mahal yang diperlukan untuk memperbarui UI. Bagi sebagian besar aplikasi, menggunakan React akan menghasilkan antaramuka pengguna yang cepat tanpa harus melakukan pekerjaan tambahan untuk mengoptimalkan performa secara spesifik. Meskipun demikian, ada beberapa cara Anda dapan mempercepat aplikasi React Anda. -## Use the Production Build {#use-the-production-build} +## Menggunakan Versi Produksi {#use-the-production-build} -If you're benchmarking or experiencing performance problems in your React apps, make sure you're testing with the minified production build. +Apabila Anda melakukan *benchmarking* atau mengalami masalah performa di aplikasi React Anda, pastikan Anda mencobanya dengan versi produksi yang telah *minified*. -By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app. +Secara *default*, React mengandung banyak pesan peringatan. Peringatan-peringatan ini sangat berguna dalam pengembangan aplikasi. Namun, pesan-pesan ini membuat React menjadi lebih besar dan lambat sehingga Anda harus memastikan menggunakan versi produksi ketika Anda men-*deploy* aplikasi. -If you aren't sure whether your build process is set up correctly, you can check it by installing [React Developer Tools for Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi). If you visit a site with React in production mode, the icon will have a dark background: +Jika Anda tidak yakin apakah proses *build* anda sudah diatur dengan benar atau belum, Anda bisa mengeceknya dengan menginstal [React Developer Tools untuk Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi). Jika Anda mengunjungi situs yang menggunakan React dalam versi produksi, ikon ekstensi akan memiliki latar belakang gelap: -React DevTools on a website with production version of React +React DevTools dalam situs dengan versi produksi React -If you visit a site with React in development mode, the icon will have a red background: +Jika Anda mengunjungi situs yang menggunakan React dalam mode pengembangan, ikon ekstensi akan memiliki latar belakang merah: -React DevTools on a website with development version of React +React DevTools dalam situs dengan versi pengembangan React. -It is expected that you use the development mode when working on your app, and the production mode when deploying your app to the users. +Anda diharapkan menggunakan mode pengembangan ketika mengerjakan aplikasi Anda, dan mode produksi ketika men-*deploy* aplikasi Anda kepada pengguna. -You can find instructions for building your app for production below. +Anda dapat menemukan instruksi untuk membangun aplikasi Anda untuk mode produksi di bawah. ### Create React App {#create-react-app} -If your project is built with [Create React App](https://github.com/facebookincubator/create-react-app), run: +Jika proyek Anda dibangun menggunakan [Create React App](https://github.com/facebookincubator/create-react-app), jalankan: ``` npm run build ``` -This will create a production build of your app in the `build/` folder of your project. +Ini akan membuat versi produksi untuk aplikasi Anda di dalam folder `build/` di proyek Anda. -Remember that this is only necessary before deploying to production. For normal development, use `npm start`. +Ingat bahwa ini hanya diperlukan sebelum men-*deploy* ke produksi. Untuk pengembangan normal, gunakan `npm start`. -### Single-File Builds {#single-file-builds} +### *Single-File Build* {#single-file-builds} -We offer production-ready versions of React and React DOM as single files: +Kami menyediakan versi siap produksi dari React dan React DOM sebagai *file* tunggal: ```html ``` -Remember that only React files ending with `.production.min.js` are suitable for production. +Ingat bahwa hanya *file* React yang berakhir dengan `.production.min.js` yang layak digunakan untuk produksi. ### Brunch {#brunch} -For the most efficient Brunch production build, install the [`terser-brunch`](https://github.com/brunch/terser-brunch) plugin: +Untuk *build* produksi yang efisien menggunakan Brunch, instal *plugin* [`terser-brunch`](https://github.com/brunch/terser-brunch): ``` # If you use npm @@ -61,17 +61,17 @@ npm install --save-dev terser-brunch yarn add --dev terser-brunch ``` -Then, to create a production build, add the `-p` flag to the `build` command: +Kemudian, untuk membuat *build* produksi, tambahkan *flag* `-p` ke *command* `build`: ``` brunch build -p ``` -Remember that you only need to do this for production builds. You shouldn't pass the `-p` flag or apply this plugin in development, because it will hide useful React warnings and make the builds much slower. +Ingat bahwa Anda hanya perlu melakukan ini di *build* produksi. Anda tidak perlu mengoper *flag* `-p` atau mengaplikasikan *plugin* ini dalam pengembangan, karena akan menyembunyikan peringatan React yang berguna dan membuat waktu *build* lebih lambat. ### Browserify {#browserify} -For the most efficient Browserify production build, install a few plugins: +Untuk *build* produksi yang efisien menggunakan Browserify, instal plugin-plugin berikut: ``` # If you use npm @@ -81,13 +81,13 @@ npm install --save-dev envify terser uglifyify yarn add --dev envify terser uglifyify ``` -To create a production build, make sure that you add these transforms **(the order matters)**: +Untuk membangun versi produksi, pastikan Anda menambahkan *transform* berikut **(urutan ini penting)**: -* The [`envify`](https://github.com/hughsk/envify) transform ensures the right build environment is set. Make it global (`-g`). -* The [`uglifyify`](https://github.com/hughsk/uglifyify) transform removes development imports. Make it global too (`-g`). -* Finally, the resulting bundle is piped to [`terser`](https://github.com/terser-js/terser) for mangling ([read why](https://github.com/hughsk/uglifyify#motivationusage)). +* *Transform* [`envify`](https://github.com/hughsk/envify) memastikan pengaturan *build environment* telah tepat. Aplikasikan secara global (`-g`). +* *Transform* [`uglifyify`](https://github.com/hughsk/uglifyify) menghapus *import-import* pengembangan. Aplikasikan secara global juga (`-g`). +* Akhirnya, bundel akhir di-pipe ke [`terser`](https://github.com/terser-js/terser) untuk proses *mangling* ([baca alasannya](https://github.com/hughsk/uglifyify#motivationusage)). -For example: +Contoh: ``` browserify ./index.js \ @@ -96,11 +96,11 @@ browserify ./index.js \ | terser --compress --mangle > ./bundle.js ``` -Remember that you only need to do this for production builds. You shouldn't apply these plugins in development because they will hide useful React warnings, and make the builds much slower. +Ingat bahwa Anda hanya perlu melakukan ini di *build* produksi. Anda tidak perlu mengaplikasikan mengaplikasikan *plugin* ini dalam pengembangan, karena akan menyembunyikan peringatan React yang berguna dan membuat waktu *build* lebih lambat. ### Rollup {#rollup} -For the most efficient Rollup production build, install a few plugins: +Untuk *build* produksi yang efisien menggunakan Rollup, instal plugin-plugin berikut: ```bash # If you use npm @@ -110,11 +110,11 @@ npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugi yarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser ``` -To create a production build, make sure that you add these plugins **(the order matters)**: +Untuk membangun versi produksi, pastikan Anda menambahkan plugin-plugin berikut **(urutan ini penting)**: -* The [`replace`](https://github.com/rollup/rollup-plugin-replace) plugin ensures the right build environment is set. -* The [`commonjs`](https://github.com/rollup/rollup-plugin-commonjs) plugin provides support for CommonJS in Rollup. -* The [`terser`](https://github.com/TrySound/rollup-plugin-terser) plugin compresses and mangles the final bundle. +* *Plugin* [`replace`](https://github.com/rollup/rollup-plugin-replace) memastikan pengaturan *build environment* telah tepat. +* *Plugin* [`commonjs`](https://github.com/rollup/rollup-plugin-commonjs) mengaktifkan dukungan CommonJS di Rollup. +* *Plugin* [`terser`](https://github.com/TrySound/rollup-plugin-terser) mengkompresikan dan melakukan proses *mangling* pada bundel akhir. ```js plugins: [ @@ -128,18 +128,18 @@ plugins: [ ] ``` -For a complete setup example [see this gist](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0). +[Lihat gist ini](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0) untuk contoh pengaturan lengkap. -Remember that you only need to do this for production builds. You shouldn't apply the `terser` plugin or the `replace` plugin with `'production'` value in development because they will hide useful React warnings, and make the builds much slower. +Ingat bahwa Anda hanya perlu melakukan ini di *build* produksi. Anda tidak perlu mengaplikasikan plugin `terser` atau plugin `replace` dengan *value* `'production'` dalam pengembangan karena akan menyembunyikan peringatan React yang berguna dan membuat waktu *build* lebih lambat. ### webpack {#webpack} ->**Note:** +>**Catatan:** > ->If you're using Create React App, please follow [the instructions above](#create-react-app).
->This section is only relevant if you configure webpack directly. +>Jika Anda menggunakan Create React App, ikuti [instruksi di atas](#create-react-app).
+>Bagian ini hanya relevan jika Anda melakukan konfigurasi webpack sendiri. -Webpack v4+ will minify your code by default in production mode. +Webpack v4+ akan me-*minify* kode Anda secara *default* di mode produksi. ```js const TerserPlugin = require('terser-webpack-plugin'); @@ -152,9 +152,9 @@ module.exports = { }; ``` -You can learn more about this in [webpack documentation](https://webpack.js.org/guides/production/). +Anda dapat mempelajari ini lebih lanjut di [dokumentasi webpack](https://webpack.js.org/guides/production/). -Remember that you only need to do this for production builds. You shouldn't apply `TerserPlugin` in development because it will hide useful React warnings, and make the builds much slower. +Ingat bahwa Anda hanya perlu melakukan ini di *build* produksi. Anda tidak perlu mengaplikasikan `TerserPlugin` dalam pengembangan karena akan menyembunyikan peringatan React yang berguna dan membuat waktu *build* lebih lambat. ## Profiling Components with the Chrome Performance Tab {#profiling-components-with-the-chrome-performance-tab} From ab794d2b80eb9c004a4383f9b69e83bbf24cce47 Mon Sep 17 00:00:00 2001 From: Resi Respati Date: Wed, 4 Dec 2019 21:12:50 +0700 Subject: [PATCH 2/6] translate up to "Avoid Recociliation" --- content/docs/optimizing-performance.md | 66 +++++++++++++------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index 048daa4f9..9d7708cc5 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -156,62 +156,62 @@ Anda dapat mempelajari ini lebih lanjut di [dokumentasi webpack](https://webpack Ingat bahwa Anda hanya perlu melakukan ini di *build* produksi. Anda tidak perlu mengaplikasikan `TerserPlugin` dalam pengembangan karena akan menyembunyikan peringatan React yang berguna dan membuat waktu *build* lebih lambat. -## Profiling Components with the Chrome Performance Tab {#profiling-components-with-the-chrome-performance-tab} +## Memprofil Komponen dengan Tab *Performance* Chrome {#profiling-components-with-the-chrome-performance-tab} -In the **development** mode, you can visualize how components mount, update, and unmount, using the performance tools in supported browsers. For example: +Dalam mode **pengembangan**, Anda dapat memvisualisasikan bagaimana komponen terpasang, diperbarui, dan dilepas, mengunakan perangkat performa di peramban web yang mendukungnya. Sebagai contoh: -
React components in Chrome timeline
+
Komponen React di timeline Chrome
-To do this in Chrome: +Cara melakukannya di Chrome: -1. Temporarily **disable all Chrome extensions, especially React DevTools**. They can significantly skew the results! +1. **Matikan seluruh ekstensi Chrome secara sementara, termasuk React DevTools**. Ekstensi tambahan dapat mengubah hasil uji performa! -2. Make sure you're running the application in the development mode. +2. Pastikan Anda menjalankan aplikasi dalam mode pengembangan. -3. Open the Chrome DevTools **[Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)** tab and press **Record**. +3. Buka tab **[Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)** pada Chrome DevTools dan tekan **Record** untuk merekam. -4. Perform the actions you want to profile. Don't record more than 20 seconds or Chrome might hang. +4. Lakukan aksi-aksi yang ingin Anda profil. Jangan merekan lebih dari 20 detik, ini akan membuat Chrome *hang*. -5. Stop recording. +5. Berhenti merekam. -6. React events will be grouped under the **User Timing** label. +6. *Event* React akan dikelompokkan dalam label **User Timing**. -For a more detailed walkthrough, check out [this article by Ben Schwarz](https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad). +Untuk panduan lebih lengkap, baca [artikel ini oleh Ben Schwarz](https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad). -Note that **the numbers are relative so components will render faster in production**. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur. +Perlu dicatat bahwa **nilai-nilai ini adalah relatif sehingga komponen akan me-*render* lebih cepat di mode produksi**. Tetap saja, ini akan membantu Anda untuk mengetahui ketika bagian UI yang tidak relevan diperbarui secara tidak sengaja, dan seberapa dalam dan sering pembaruan UI terjadi. -Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) so we expect more browsers to add support for it. +Saat ini hanya Chrome, Edge, and IE yang mendukung fitur ini, tapi kita menggunakan [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) yang terstandarisasi sehingga kami memperkirakan peramban web lain akan menambahkan dukungan terhadap API tersebut. -## Profiling Components with the DevTools Profiler {#profiling-components-with-the-devtools-profiler} +## Memprofil Komponen dengan Profiler DevTools {#profiling-components-with-the-devtools-profiler} -`react-dom` 16.5+ and `react-native` 0.57+ provide enhanced profiling capabilities in DEV mode with the React DevTools Profiler. -An overview of the Profiler can be found in the blog post ["Introducing the React Profiler"](/blog/2018/09/10/introducing-the-react-profiler.html). -A video walkthrough of the profiler is also [available on YouTube](https://www.youtube.com/watch?v=nySib7ipZdk). +`react-dom` 16.5+ dan `react-native` 0.57+ menyediakan kemampuan memprofil tambahan dalam mode pengembangan dengan Profiler React DevTools. +Sebuah ikhtisar mengenai *profiler* tersebut dapat ditemukan dalam postingan blog ["Introducing the React Profiler"](/blog/2018/09/10/introducing-the-react-profiler.html). +Panduan video profiler ini juga [tersedia di YouTube](https://www.youtube.com/watch?v=nySib7ipZdk). -If you haven't yet installed the React DevTools, you can find them here: +Jika Anda belum menginstal React DevTools, Anda dapat menemukannya di sini: -- [Chrome Browser Extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) -- [Firefox Browser Extension](https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/) -- [Standalone Node Package](https://www.npmjs.com/package/react-devtools) +- [Versi Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) +- [Versi Firefox](https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/) +- [*Standalone Package* di Node](https://www.npmjs.com/package/react-devtools) -> Note +> Catatan > -> A production profiling bundle of `react-dom` is also available as `react-dom/profiling`. -> Read more about how to use this bundle at [fb.me/react-profiling](https://fb.me/react-profiling) +> Versi bundel `react-dom` yang dapat memprofil versi produksi juga tersedia di `react-dom/profiling`. +> Baca lebih lanjut mengenai cara penggunaan bundel ini di [fb.me/react-profiling](https://fb.me/react-profiling) -## Virtualize Long Lists {#virtualize-long-lists} +## Memvirtualisasi *List* Panjang {#virtualize-long-lists} -If your application renders long lists of data (hundreds or thousands of rows), we recommended using a technique known as "windowing". This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created. +Jika aplikasi Anda me-*render* *list* data yang panjang (ratusan atau ribuan baris), kani menyarankan menggunakan teknik "windowing". Teknik ini hanya me-*render* subset kecil dari baris-baris data Anda dalam waktu tertentu, dan dapat mengurangi waktu me-*render* ulang komponen Anda serta jumlah simpul DOM yang dibuat secara signifikan. -[react-window](https://react-window.now.sh/) and [react-virtualized](https://bvaughn.github.io/react-virtualized/) are popular windowing libraries. They provide several reusable components for displaying lists, grids, and tabular data. You can also create your own windowing component, like [Twitter did](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3), if you want something more tailored to your application's specific use case. +[react-window](https://react-window.now.sh/) dan [react-virtualized](https://bvaughn.github.io/react-virtualized/) adalah *library* *windowing* paling populer. *Library-library* ini menyediakan beberapa komponen untuk menampilkan data-data dalam bentuk *list*, *grid*, dan tabular. Anda juga dapat membuat komponen *windowing* versi Anda sendiri, seperti [yang dilakukan Twitter](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3), jika Anda ingin sesuatu yang lebih dikhususkan untuk *use case* aplikasi Anda. -## Avoid Reconciliation {#avoid-reconciliation} +## Menghindari Rekonsiliasi {#avoid-reconciliation} -React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a "virtual DOM", but it works the same way on React Native. +React membangun dan memelihara representasi internal dari UI yang di-*render*. Representasi ini berisi elemen-elemen React yang dikembalikan dari komponen Anda. Representasi ini memungkinkan React menghindari membuat simpul DOM baru dan mengakses simpul DOM yang sudah ada diluar keperluan, karena mereka bisa lebih lambat daripada operasi dalam obyek JavaScript. Terkadan hal ini disebut sebagai "virtual DOM", namun dapat juga bekerja secara sama di React Native. -When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. +Ketika *props* atau *state* komponen berubah, React memutuskan apakah pembaruan DOM yang sesungguhnya diperlukan dengan membandingkan elemen yang baru dikembalikan dengan elemen yang sebelumnya di-render. Ketika keduanya tidak sama, React akan memperbarui DOM. -Even though React only updates the changed DOM nodes, re-rendering still takes some time. In many cases it's not a problem, but if the slowdown is noticeable, you can speed all of this up by overriding the lifecycle function `shouldComponentUpdate`, which is triggered before the re-rendering process starts. The default implementation of this function returns `true`, leaving React to perform the update: +Meskipun React hanya memperbarui simpul DOM yang berubah, me-*render* ulang tetap memerlukan waktu tambahan. Dalam banyak kasus ini tidak menjadi masalah, namun ketika ada perlambatan yang signifikan, Anda dapat mempercepatnya dengan meng-*override* *lifecycle* `shouldComponentUpdate`, yang dijalankan sebelum proses *render* ulang dimulai. Implementasi bawaan fungsi ini mengembalikan `true`, yang membuat react React melakukan pembaruan tersebut: ```javascript shouldComponentUpdate(nextProps, nextState) { @@ -219,9 +219,9 @@ shouldComponentUpdate(nextProps, nextState) { } ``` -If you know that in some situations your component doesn't need to update, you can return `false` from `shouldComponentUpdate` instead, to skip the whole rendering process, including calling `render()` on this component and below. +Jika Anda tahu bahwa dalam beberapa kasus komponen Anda tidak perlu diperbarui, Anda dapat mengembalikan `false` dari `shouldComponentUpdate`, untuk melewati seluruh proses rendering, termasuk memanggil `render()` dalam komponen ini dan komponen-komponen didalamnya. -In most cases, instead of writing `shouldComponentUpdate()` by hand, you can inherit from [`React.PureComponent`](/docs/react-api.html#reactpurecomponent). It is equivalent to implementing `shouldComponentUpdate()` with a shallow comparison of current and previous props and state. +Dalam banyak kasus, alih-alih menuliskan `shouldComponentUpdate()` secara manual, Anda dapat meng-*inherit* dari [`React.PureComponent`](/docs/react-api.html#reactpurecomponent). Ini sama seperti mengimplementasikan `shouldComponentUpdate()` dengan perbandingan dangkal dari *props* dan *state* sekarang. ## shouldComponentUpdate In Action {#shouldcomponentupdate-in-action} From 00bd5e5fab3a30678d5ae17ad1e11327867565ce Mon Sep 17 00:00:00 2001 From: Resi Respati Date: Thu, 5 Dec 2019 13:07:41 +0700 Subject: [PATCH 3/6] translate up to the end --- content/docs/optimizing-performance.md | 46 +++++++++++++------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index 9d7708cc5..d74722251 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -211,7 +211,7 @@ React membangun dan memelihara representasi internal dari UI yang di-*render*. R Ketika *props* atau *state* komponen berubah, React memutuskan apakah pembaruan DOM yang sesungguhnya diperlukan dengan membandingkan elemen yang baru dikembalikan dengan elemen yang sebelumnya di-render. Ketika keduanya tidak sama, React akan memperbarui DOM. -Meskipun React hanya memperbarui simpul DOM yang berubah, me-*render* ulang tetap memerlukan waktu tambahan. Dalam banyak kasus ini tidak menjadi masalah, namun ketika ada perlambatan yang signifikan, Anda dapat mempercepatnya dengan meng-*override* *lifecycle* `shouldComponentUpdate`, yang dijalankan sebelum proses *render* ulang dimulai. Implementasi bawaan fungsi ini mengembalikan `true`, yang membuat react React melakukan pembaruan tersebut: +Meskipun React hanya memperbarui simpul DOM yang berubah, me-*render* ulang tetap memerlukan waktu tambahan. Dalam banyak kasus ini tidak menjadi masalah, namun ketika ada perlambatan yang signifikan, Anda dapat mempercepatnya dengan meng-*override* *lifecycle* `shouldComponentUpdate`, yang dijalankan sebelum proses *render* ulang dimulai. Implementasi bawaan fungsi ini mengembalikan `true`, yang membuat React melakukan pembaruan tersebut: ```javascript shouldComponentUpdate(nextProps, nextState) { @@ -223,23 +223,23 @@ Jika Anda tahu bahwa dalam beberapa kasus komponen Anda tidak perlu diperbarui, Dalam banyak kasus, alih-alih menuliskan `shouldComponentUpdate()` secara manual, Anda dapat meng-*inherit* dari [`React.PureComponent`](/docs/react-api.html#reactpurecomponent). Ini sama seperti mengimplementasikan `shouldComponentUpdate()` dengan perbandingan dangkal dari *props* dan *state* sekarang. -## shouldComponentUpdate In Action {#shouldcomponentupdate-in-action} +## Cara Kerja shouldComponentUpdate {#shouldcomponentupdate-in-action} -Here's a subtree of components. For each one, `SCU` indicates what `shouldComponentUpdate` returned, and `vDOMEq` indicates whether the rendered React elements were equivalent. Finally, the circle's color indicates whether the component had to be reconciled or not. +Berikut adalah subdiagram beberapa komponen. Dalam setiap komponen, `SCU` mengindikasikan apa yang dikembalikan `shouldComponentUpdate`, dan `vDOMEq` mengindikasikan apakah elemen-elemen React yang di-*render* ekuivalen. Akhirnya, warna lingkaran mengindikasikan apakah komponen tersebut harus direkonsiliasikan atau tidak.
-Since `shouldComponentUpdate` returned `false` for the subtree rooted at C2, React did not attempt to render C2, and thus didn't even have to invoke `shouldComponentUpdate` on C4 and C5. +Karena `shouldComponentUpdate` mengembalikan `false` pada subdiagram yang mengakar pada C2, React tidak akan me-*render* C2, dan dengan demikian tidak perlu menjalankan `shouldComponentUpdate` di C4 dan C5. -For C1 and C3, `shouldComponentUpdate` returned `true`, so React had to go down to the leaves and check them. For C6 `shouldComponentUpdate` returned `true`, and since the rendered elements weren't equivalent React had to update the DOM. +Untuk C1 dan C3, `shouldComponentUpdate` mengembalikan `true`, sehingga React harus menelusuri cabang komponen dan mengeceknya. Untuk C6 `shouldComponentUpdate` mengembalikan `true`, dan karena elemen yang di-*render* tidak ekuivalen React harus memperbarui DOM. -The last interesting case is C8. React had to render this component, but since the React elements it returned were equal to the previously rendered ones, it didn't have to update the DOM. +Kasus menarik yang terakhir adalah C8. React harus me-*render* komponen ini, tapi karena elemen-elemen React yang dikembalikan sama dengan elemen yang sebelumnya di-*render*, ia tidak harus memperbarui DOM. -Note that React only had to do DOM mutations for C6, which was inevitable. For C8, it bailed out by comparing the rendered React elements, and for C2's subtree and C7, it didn't even have to compare the elements as we bailed out on `shouldComponentUpdate`, and `render` was not called. +Perlu dicatat bahwa React hanya perlu melakukan mutasi DOM untuk C6, yang tidak dapat dihindari. Untuk C8, ia menghindari mutasi DOM dengan membandingkan elemen-elemen React yang di-*render*, dan untuk subdiagram komponen C2 dan C7, ia bahkan tidak perlu membandingkan elemen-elemennya karena kita sudah menghindarinya di dalam `shouldComponentUpdate`, jadi `render` tidak dipanggil. -## Examples {#examples} +## Contoh {#examples} -If the only way your component ever changes is when the `props.color` or the `state.count` variable changes, you could have `shouldComponentUpdate` check that: +Jika satu-satunya cara komponen Anda berubah adalah ketika variabel `props.color` atau `state.count` berubah, anda dapat mengeceknya melalui `shouldComponentUpdate`: ```javascript class CounterButton extends React.Component { @@ -270,7 +270,7 @@ class CounterButton extends React.Component { } ``` -In this code, `shouldComponentUpdate` is just checking if there is any change in `props.color` or `state.count`. If those values don't change, the component doesn't update. If your component got more complex, you could use a similar pattern of doing a "shallow comparison" between all the fields of `props` and `state` to determine if the component should update. This pattern is common enough that React provides a helper to use this logic - just inherit from `React.PureComponent`. So this code is a simpler way to achieve the same thing: +Dalam kode ini, `shouldComponentUpdate` hanya memeriksa jika ada perubahan dalam `props.color` atau `state.count`. Jika nilai variabel-variabel tersebut tidak berubah, komponen tidak akan diperbarui. Jika komponen Anda menjadi lebih kompleks, Anda dapat menggunakan pola serupa dengan melakukan "perbandingan dangkal" (*shallow comparison*) diantara semua nilai di dalam `props` dan `state` untuk menentukan apakah komponen harus diperbarui. Pola ini cukup umum sehingga React menyediakan *helper* khisis untuk menggunakan logika ini - tinggal melakukan *inherit* dari `React.PureComponent`. Jadi kode di bawah adalah cara lebih simpel untuk melakukan hal serupa: ```js class CounterButton extends React.PureComponent { @@ -291,9 +291,9 @@ class CounterButton extends React.PureComponent { } ``` -Most of the time, you can use `React.PureComponent` instead of writing your own `shouldComponentUpdate`. It only does a shallow comparison, so you can't use it if the props or state may have been mutated in a way that a shallow comparison would miss. +Seringkali, Anda dapat menggunakan `React.PureComponent` alih-alih menuliskan `shouldComponentUpdate` versi Anda sendiri. `React.PureComponent` perbandingan dangkal, jadi Anda tidak dapat menggunakannya apabila *props* atau *state* mungkin termutasi dengan cara yang tidak tertangkap oleh perbandingan dangkal. -This can be a problem with more complex data structures. For example, let's say you want a `ListOfWords` component to render a comma-separated list of words, with a parent `WordAdder` component that lets you click a button to add a word to the list. This code does *not* work correctly: +Hal ini akan menjadi masalah dalam komponen dengan struktur data yang lebih kompleks. Misalnya, umpamakan Anda ingin komponen `ListOfWords` me-*render* *list* kata yang terpisahkan oleh koma, dengan komponen induk `WordAdder` yang memungkinkan Anda mengklik tombol untuk menambahkan kata ke dalam *list*. Kode di bawah *tidak akan* bekerja secara benar: ```javascript class ListOfWords extends React.PureComponent { @@ -312,7 +312,7 @@ class WordAdder extends React.Component { } handleClick() { - // This section is bad style and causes a bug + // Bagian ini merupakan contoh buruk dan akan menghasilkan bug const words = this.state.words; words.push('marklar'); this.setState({words: words}); @@ -329,11 +329,11 @@ class WordAdder extends React.Component { } ``` -The problem is that `PureComponent` will do a simple comparison between the old and new values of `this.props.words`. Since this code mutates the `words` array in the `handleClick` method of `WordAdder`, the old and new values of `this.props.words` will compare as equal, even though the actual words in the array have changed. The `ListOfWords` will thus not update even though it has new words that should be rendered. +Masalahnya adalah `PureComponent` akan melakukan perbandingan simpel antara nilai baru dan lama dari `this.props.words`. Karena kode ini memutasikan senarai `words` di dalam *method* `handleClick` pada `WordAdder`, perbandingan nilai lama dan baru dari `this.props.words` akan berhasil serupa, meskipun kata-kata di dalam senarai telah berubah. Oleh karena itu, komponen `ListOfWords` tidak akan diperbarui meskipun even ada kata-kata baru yang seharusnya di-*render*. -## The Power Of Not Mutating Data {#the-power-of-not-mutating-data} +## Keuntungan Tidak Memutasi Data {#the-power-of-not-mutating-data} -The simplest way to avoid this problem is to avoid mutating values that you are using as props or state. For example, the `handleClick` method above could be rewritten using `concat` as: +Cara paling simpel untuk menghindari masalah di atas adalah menghindari memutasi nilai-nilai yang akan digunakan di dalam *props* atau *state*. Sebagai contoh, *method* `handleClick` dapat ditulis ulang dengan `concat` seperti contoh berikut: ```javascript handleClick() { @@ -343,7 +343,7 @@ handleClick() { } ``` -ES6 supports a [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) for arrays which can make this easier. If you're using Create React App, this syntax is available by default. +ES6 mendukung [sintaksis *spread*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) untuk senarai yang membuat proses ini lebih mudah. Jika Anda menggunakan Create React App, sintaksis ini sudah bisa digunakan. ```js handleClick() { @@ -353,7 +353,7 @@ handleClick() { }; ``` -You can also rewrite code that mutates objects to avoid mutation, in a similar way. For example, let's say we have an object named `colormap` and we want to write a function that changes `colormap.right` to be `'blue'`. We could write: +Anda juga dapat menuliskan ulang kode yang memutasi objek untuk menghindari mutasi, dengan cara yang sama. Sebagai contoh, umpamakan kita memiliki objek bernama `colormap` dan kita ingin membuat fungsi yang mengubah `colormap.right` menjadi `'blue'`. Kita dapat menuliskan: ```js function updateColorMap(colormap) { @@ -361,7 +361,7 @@ function updateColorMap(colormap) { } ``` -To write this without mutating the original object, we can use [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) method: +Untuk menuliskan fungsi ini tanpa memutasikan objek aslinya, kita dapat menggunakan *method* [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign): ```js function updateColorMap(colormap) { @@ -369,9 +369,9 @@ function updateColorMap(colormap) { } ``` -`updateColorMap` now returns a new object, rather than mutating the old one. `Object.assign` is in ES6 and requires a polyfill. +`updateColorMap` sekarang mengembalikan objek baru, daripada memutasikan objek yang lama. `Object.assign` berada di spesifikasi ES6 dan membutuhkan *polyfill*. -There is a JavaScript proposal to add [object spread properties](https://github.com/sebmarkbage/ecmascript-rest-spread) to make it easier to update objects without mutation as well: +Ada juga proposal JavaScript untuk menambahkan [properti *spread* objek](https://github.com/sebmarkbage/ecmascript-rest-spread) untuk membuat pembaruan objek tanpa mutasi menjadi lebih mudah: ```js function updateColorMap(colormap) { @@ -379,6 +379,6 @@ function updateColorMap(colormap) { } ``` -If you're using Create React App, both `Object.assign` and the object spread syntax are available by default. +Jika Anda menggunakan Create React App, `Object.assign` dan sintaksis *spread* untuk objek sudah tersedia. -When you deal with deeply nested objects, updating them in an immutable way can feel convoluted. If you run into this problem, check out [Immer](https://github.com/mweststrate/immer) or [immutability-helper](https://github.com/kolodny/immutability-helper). These libraries let you write highly readable code without losing the benefits of immutability. +Ketika berurusan dengan objek bersarang dalam, memperbaruinya secara *immutable* dapat menjadi sulit. Jika Anda memiliki masalah ini, cobalah [Immer](https://github.com/mweststrate/immer) atau [immutability-helper](https://github.com/kolodny/immutability-helper). *Library* ini memungkinkan Anda membuat kode yang lebih mudah dibaca tanpa menanggalkan keuntungan-keuntungan *immutability*. From 1120464f06ff02aab3316ce247fca614561dff03 Mon Sep 17 00:00:00 2001 From: Resi Respati Date: Tue, 10 Dec 2019 09:37:55 +0700 Subject: [PATCH 4/6] Apply suggestions from code review Co-Authored-By: Veri Ferdiansyah --- content/docs/optimizing-performance.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index d74722251..96ac60a7c 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -6,11 +6,11 @@ redirect_from: - "docs/advanced-performance.html" --- -Secara internal, React menggunakan beberapa teknik cermat untuk meminimalkan jumlah operasi DOM mahal yang diperlukan untuk memperbarui UI. Bagi sebagian besar aplikasi, menggunakan React akan menghasilkan antaramuka pengguna yang cepat tanpa harus melakukan pekerjaan tambahan untuk mengoptimalkan performa secara spesifik. Meskipun demikian, ada beberapa cara Anda dapan mempercepat aplikasi React Anda. +Secara internal, React menggunakan beberapa teknik cermat untuk meminimalkan jumlah operasi DOM mahal yang diperlukan untuk memperbarui UI. Bagi sebagian besar aplikasi, menggunakan React akan menghasilkan antarmuka pengguna yang cepat tanpa harus melakukan pekerjaan tambahan untuk mengoptimalkan performa secara spesifik. Meskipun demikian, ada beberapa cara untuk mempercepat aplikasi React Anda. ## Menggunakan Versi Produksi {#use-the-production-build} -Apabila Anda melakukan *benchmarking* atau mengalami masalah performa di aplikasi React Anda, pastikan Anda mencobanya dengan versi produksi yang telah *minified*. +Apabila Anda melakukan *benchmarking* atau mengalami masalah performa di aplikasi React Anda, pastikan Anda mencobanya dengan versi produksi yang telah di *minified*. Secara *default*, React mengandung banyak pesan peringatan. Peringatan-peringatan ini sangat berguna dalam pengembangan aplikasi. Namun, pesan-pesan ini membuat React menjadi lebih besar dan lambat sehingga Anda harus memastikan menggunakan versi produksi ketika Anda men-*deploy* aplikasi. @@ -201,7 +201,7 @@ Jika Anda belum menginstal React DevTools, Anda dapat menemukannya di sini: ## Memvirtualisasi *List* Panjang {#virtualize-long-lists} -Jika aplikasi Anda me-*render* *list* data yang panjang (ratusan atau ribuan baris), kani menyarankan menggunakan teknik "windowing". Teknik ini hanya me-*render* subset kecil dari baris-baris data Anda dalam waktu tertentu, dan dapat mengurangi waktu me-*render* ulang komponen Anda serta jumlah simpul DOM yang dibuat secara signifikan. +Jika aplikasi Anda me-*render* *list* data yang panjang (ratusan atau ribuan baris), kami menyarankan menggunakan teknik "windowing". Teknik ini hanya me-*render* bagian kecil dari baris-baris data Anda dalam waktu tertentu, dan dapat mengurangi waktu untuk me-*render* ulang komponen Anda serta jumlah simpul DOM yang dibuat secara signifikan. [react-window](https://react-window.now.sh/) dan [react-virtualized](https://bvaughn.github.io/react-virtualized/) adalah *library* *windowing* paling populer. *Library-library* ini menyediakan beberapa komponen untuk menampilkan data-data dalam bentuk *list*, *grid*, dan tabular. Anda juga dapat membuat komponen *windowing* versi Anda sendiri, seperti [yang dilakukan Twitter](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3), jika Anda ingin sesuatu yang lebih dikhususkan untuk *use case* aplikasi Anda. @@ -291,9 +291,9 @@ class CounterButton extends React.PureComponent { } ``` -Seringkali, Anda dapat menggunakan `React.PureComponent` alih-alih menuliskan `shouldComponentUpdate` versi Anda sendiri. `React.PureComponent` perbandingan dangkal, jadi Anda tidak dapat menggunakannya apabila *props* atau *state* mungkin termutasi dengan cara yang tidak tertangkap oleh perbandingan dangkal. +Seringkali, Anda dapat menggunakan `React.PureComponent` alih-alih menuliskan `shouldComponentUpdate` versi Anda sendiri. `React.PureComponent` melakukan perbandingan dangkal, jadi Anda tidak dapat menggunakannya apabila *props* atau *state* mungkin termutasi dengan cara yang tidak tertangkap oleh perbandingan dangkal. -Hal ini akan menjadi masalah dalam komponen dengan struktur data yang lebih kompleks. Misalnya, umpamakan Anda ingin komponen `ListOfWords` me-*render* *list* kata yang terpisahkan oleh koma, dengan komponen induk `WordAdder` yang memungkinkan Anda mengklik tombol untuk menambahkan kata ke dalam *list*. Kode di bawah *tidak akan* bekerja secara benar: +Hal ini akan menjadi masalah dalam komponen dengan struktur data yang lebih kompleks. Misalnya, Anda ingin komponen `ListOfWords` me-*render* *list* kata yang terpisahkan oleh koma, dengan komponen induk `WordAdder` yang memungkinkan Anda mengklik tombol untuk menambahkan kata ke dalam *list*. Kode di bawah *tidak akan* bekerja secara benar: ```javascript class ListOfWords extends React.PureComponent { @@ -329,7 +329,7 @@ class WordAdder extends React.Component { } ``` -Masalahnya adalah `PureComponent` akan melakukan perbandingan simpel antara nilai baru dan lama dari `this.props.words`. Karena kode ini memutasikan senarai `words` di dalam *method* `handleClick` pada `WordAdder`, perbandingan nilai lama dan baru dari `this.props.words` akan berhasil serupa, meskipun kata-kata di dalam senarai telah berubah. Oleh karena itu, komponen `ListOfWords` tidak akan diperbarui meskipun even ada kata-kata baru yang seharusnya di-*render*. +Masalahnya adalah `PureComponent` akan melakukan perbandingan sederhana antara nilai baru dan lama dari `this.props.words`. Karena kode ini memutasikan senarai `words` di dalam *method* `handleClick` pada `WordAdder`, perbandingan nilai lama dan baru dari `this.props.words` akan menghasilkan nilai serupa, meskipun kata-kata di dalam senarai telah berubah. Oleh karena itu, komponen `ListOfWords` tidak akan diperbarui meskipun ada kata-kata baru yang seharusnya di-*render*. ## Keuntungan Tidak Memutasi Data {#the-power-of-not-mutating-data} From 2e473ef0f6cfa3c0d6a2224cea048497a5b0e018 Mon Sep 17 00:00:00 2001 From: Resi Respati Date: Mon, 16 Dec 2019 23:35:23 +0700 Subject: [PATCH 5/6] translate shell scripts comments as well --- content/docs/optimizing-performance.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index 96ac60a7c..2182fefec 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -54,10 +54,10 @@ Ingat bahwa hanya *file* React yang berakhir dengan `.production.min.js` yang la Untuk *build* produksi yang efisien menggunakan Brunch, instal *plugin* [`terser-brunch`](https://github.com/brunch/terser-brunch): ``` -# If you use npm +# Jika menggunakan npm npm install --save-dev terser-brunch -# If you use Yarn +# Jika menggunakan Yarn yarn add --dev terser-brunch ``` @@ -74,10 +74,10 @@ Ingat bahwa Anda hanya perlu melakukan ini di *build* produksi. Anda tidak perlu Untuk *build* produksi yang efisien menggunakan Browserify, instal plugin-plugin berikut: ``` -# If you use npm +# Jika menggunakan npm npm install --save-dev envify terser uglifyify -# If you use Yarn +# Jika menggunakan Yarn yarn add --dev envify terser uglifyify ``` @@ -103,10 +103,10 @@ Ingat bahwa Anda hanya perlu melakukan ini di *build* produksi. Anda tidak perlu Untuk *build* produksi yang efisien menggunakan Rollup, instal plugin-plugin berikut: ```bash -# If you use npm +# Jika menggunakan npm npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser -# If you use Yarn +# Jika menggunakan Yarn yarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser ``` From 2fa7ffde0c14ddbad2cf139be59ebd21dccb7cbd Mon Sep 17 00:00:00 2001 From: Resi Respati Date: Thu, 19 Dec 2019 12:29:42 +0700 Subject: [PATCH 6/6] mahal -> boros --- content/docs/optimizing-performance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index 2182fefec..41f8465a3 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -6,7 +6,7 @@ redirect_from: - "docs/advanced-performance.html" --- -Secara internal, React menggunakan beberapa teknik cermat untuk meminimalkan jumlah operasi DOM mahal yang diperlukan untuk memperbarui UI. Bagi sebagian besar aplikasi, menggunakan React akan menghasilkan antarmuka pengguna yang cepat tanpa harus melakukan pekerjaan tambahan untuk mengoptimalkan performa secara spesifik. Meskipun demikian, ada beberapa cara untuk mempercepat aplikasi React Anda. +Secara internal, React menggunakan beberapa teknik cermat untuk meminimalkan jumlah operasi DOM boros yang diperlukan untuk memperbarui UI. Bagi sebagian besar aplikasi, menggunakan React akan menghasilkan antarmuka pengguna yang cepat tanpa harus melakukan pekerjaan tambahan untuk mengoptimalkan performa secara spesifik. Meskipun demikian, ada beberapa cara untuk mempercepat aplikasi React Anda. ## Menggunakan Versi Produksi {#use-the-production-build}