From 4d2568d7a099809559b3ccc1f7d9b00e2d998cee Mon Sep 17 00:00:00 2001 From: Kevin Palowa Date: Fri, 28 Apr 2023 08:53:56 +0700 Subject: [PATCH 01/19] translate react:hooks --- src/content/reference/react/index.md | 77 +++++++++++++--------------- 1 file changed, 37 insertions(+), 40 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 650a1c382..b00eb69d3 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -1,23 +1,22 @@ --- -title: "Built-in React Hooks" +title: "React Hook Bawaan" --- -*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React. +*Hook* memungkinkan Anda menggunakan fitur React dari dalam komponen Anda. Anda dapat menggunakan Hook bawaan atau mengkombinasikan mereka untuk membuat hook Anda sendiri. Halaman ini mencantumkan daftar semua list Hook bawaan yang tersedia di React. --- -## State Hooks {/*state-hooks*/} +## Hook State {/*state-hooks*/} -*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index. +*State* memungkinkan sebuah komponen ["mengingat" informasi seperti masukan pengguna.](/learn/state-a-components-memory) Sebagai contoh, sebuah komponen formulir dapat menggunakan *state* untuk menyimpan nilai masukan, sementara komponen gambar galeri dapat menggunakan state untuk menyimpan indeks gambar yang terpilih. +Untuk menambahkan state ke sebuah komponen, gunakan salah satu Hooks dibawah ini: -To add state to a component, use one of these Hooks: - -* [`useState`](/reference/react/useState) declares a state variable that you can update directly. -* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer) +* [`useState`](/reference/react/useState) mendeklarasi sebuah variabel *state* yang dapat Anda perbarui secara langsung. +* [`useReducer`](/reference/react/useReducer) mendeklarasi sebuah variabel *state* dengan pembaruan logika dalam sebuah [fungsi reducer.](/learn/extracting-state-logic-into-a-reducer) ```js function ImageGallery() { @@ -27,11 +26,10 @@ function ImageGallery() { --- -## Context Hooks {/*context-hooks*/} - -*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep. +## Hook Context {/*context-hooks*/} -* [`useContext`](/reference/react/useContext) reads and subscribes to a context. +*Context* memungkinkan sebuah komponen [menerima informasi dari induk yang jauh tanpa mengopernya sebagai props.](/learn/passing-props-to-a-component) komponen tingkat atas aplikasi Anda dapat meneruskan tema antarmuka pengguna (UI) saat ini ke semua komponen di bawah, tidak peduli seberapa dalam. +* [`useContext`](/reference/react/useContext) membaca dan berlangganan ke sebuah *context*. ```js function Button() { @@ -41,12 +39,11 @@ function Button() { --- -## Ref Hooks {/*ref-hooks*/} - -*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs. +## Hook Ref {/*ref-hooks*/} +*Refs* memungkinkan sebuah komponen [menyimpan beberapa informasi yang tidak digunakan untuk dirender](/learn/referencing-values-with-refs) seperti node DOM atau batas waktu ID. Tidak seperti state, memperbarui *ref* tidak merender ulang komponen Anda. Ref adalah jalan keluar dari paradigma React. *Ref* berguna ketika Anda membutuhkan untuk bekerja dengan sistem non-React, seperti *API* browser bawaan. -* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node. -* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used. +* [`useRef`](/reference/react/useRef) mendeklarasi *ref*. Anda dapat menyimpan nilai apapun didalamnya, tapi *ref* sering kali digunakan untuk menyimpan node DOM. +* [`useImperativeHandle`](/reference/react/useImperativeHandle) memungkinkan Anda menyesuaikan *ref* yang terpapar oleh komponen Anda. Ini jarang sekali digunakan. ```js function Form() { @@ -56,11 +53,11 @@ function Form() { --- -## Effect Hooks {/*effect-hooks*/} +## Hook Efek {/*effect-hooks*/} -*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code. +*Efek* memungkinkan sebuah komponen [terhubung dan menyesuaikan dengan sistem eksternal](/learn/synchronizing-with-effects) Ini termasuk berurusan dengan jaringan, browser DOM, animasi, widget yang ditulis menggunakan UI pustaka lain, dan kode non-React lainnya. -* [`useEffect`](/reference/react/useEffect) connects a component to an external system. +* [`useEffect`](/reference/react/useEffect) menghubungkan sebuah komponen ke sebuah sistem eksternal. ```js function ChatRoom({ roomId }) { @@ -72,23 +69,23 @@ function ChatRoom({ roomId }) { // ... ``` -Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect) +Efek adalah jalan keluar dari paradigma React. Jangan gunakan Efek untuk mengatur aliran data aplikasi Anda. Jika Anda tidak berinteraksi dengan sistem eksternal, [Kemungkinan Besar Anda Tidak Memerlukan Efek](/learn/you-might-not-need-an-effect) -There are two rarely used variations of `useEffect` with differences in timing: +Terdapat dua variasi dari `useEffect` yang jarang digunakan dengan perbedaan pada waktu-nya -* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here. -* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here. +* [`useLayoutEffect`](/reference/react/useLayoutEffect) dipanggil sebelum browser melakukan repaint layar. Anda dapat menggunakannya untuk mengukur layout pada tahap ini. +* [`useInsertionEffect`](/reference/react/useInsertionEffect) dipanggil sebelum React melakukan perubahan ke DOM. Pustaka - pustaka dapat memasukkan CSS dinamik disini. --- -## Performance Hooks {/*performance-hooks*/} +## Hook Performa {/*performance-hooks*/} -A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render. +Cara yang umum untuk mengoptimalkan kinerja pen-renderan ulang adalah melewatkan pekerjaan yang tidak perlu. Sebagai contoh, Anda dapat memberi tahu React untuk menggunakan kembali perhitungan yang sudah ada di dalam cache atau untuk melewatkan pen-renderan ulang jika data tersebut tidak berubah sejak render sebelumnya. -To skip calculations and unnecessary re-rendering, use one of these Hooks: +Untuk melewatkan perhitungan dan render ulang yang tidak perlu, gunakan salah satu dari Hook ini: -- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation. -- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component. +- [`useMemo`](/reference/react/useMemo) memungkinkan Anda menyimpan hasil perhitungan yang berat secara cache. +- [`useCallback`](/reference/react/useCallback) memungkinkan Anda menyimpan definisi fungsi di cache sebelum melewatkannya ke komponen yang dioptimalkan. ```js function TodoList({ todos, tab, theme }) { @@ -97,25 +94,25 @@ function TodoList({ todos, tab, theme }) { } ``` -Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart). +Terkadang, Anda tidak dapat melewatkan pen-renderan ulang karena layar sebenarnya perlu pembaruan. Di dalam kasus itu, Anda dapat meningkatkan performa dengan memisahkan memblokir pembaruan yang harus sinkron (seperti mengetik masukan) dari pembaruan non-pemblokiran yang tidak perlu memblokir antarmuka pengguna (seperti memperbarui bagan). -To prioritize rendering, use one of these Hooks: +Untuk memprioritaskan rendering, gunakan salah satu Hook ini: -- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it. -- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first. +- [`useTransition`](/reference/react/useTransition) memungkinkan Anda mendandai transisi state sebagai non-blocking dan mengizinkan pembaruan lain untuk menghentikannya. +- [`useDeferredValue`](/reference/react/useDeferredValue) memungkinkan Anda menunda pembaruan bagian antarmuka pengguna (UI) yang tidak penting dan membiarkan bagian lain memperbarui terlebih dahulu. --- -## Other Hooks {/*other-hooks*/} +## Hook lainnya {/*other-hooks*/} -These Hooks are mostly useful to library authors and aren't commonly used in the application code. +Ini adalah Hook yang sebagian besar berguna untuk penulis pustaka dan tidak umum digunakan di dalam kode aplikasi. -- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook. -- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs. -- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store. +- [`useDebugValue`](/reference/react/useDebugValue) memungkinkan Anda memodifikasi tampilan label React DevTools untuk Hook kustom Anda. +- [`useId`](/reference/react/useId) memungkinkan komponen mengasosiasikan ID unik dengan dirinya sendiri. Biasanya digunakan dengan API aksesibilitas. +- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) memungkinkan komponen berlangganan ke *store* eksternal. --- -## Your own Hooks {/*your-own-hooks*/} +## Hook Anda sendiri {/*your-own-hooks*/} -You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions. +Anda juga dapat [mendefinisikan Hook kustom Anda sendiri](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) sebagai fungsi JavaScript. From 224b8af2257be4804f0e4b27e593d83f2a92c8e6 Mon Sep 17 00:00:00 2001 From: Kevin Palowa <42116453+KevinPalowa@users.noreply.github.com> Date: Sat, 29 Apr 2023 08:57:59 +0700 Subject: [PATCH 02/19] fix: add missing translation Co-authored-by: Irfan Maulana --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index b00eb69d3..426a10033 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -28,7 +28,7 @@ function ImageGallery() { ## Hook Context {/*context-hooks*/} -*Context* memungkinkan sebuah komponen [menerima informasi dari induk yang jauh tanpa mengopernya sebagai props.](/learn/passing-props-to-a-component) komponen tingkat atas aplikasi Anda dapat meneruskan tema antarmuka pengguna (UI) saat ini ke semua komponen di bawah, tidak peduli seberapa dalam. +*Context* memungkinkan sebuah komponen [menerima informasi dari induk yang jauh tanpa mengopernya sebagai props.](/learn/passing-props-to-a-component) Sebagai contoh, komponen tingkat atas aplikasi Anda dapat meneruskan tema antarmuka pengguna (UI) saat ini ke semua komponen di bawah, tidak peduli seberapa dalam. * [`useContext`](/reference/react/useContext) membaca dan berlangganan ke sebuah *context*. ```js From 488fe5517114ae4747fd0a529da53390c11b28c3 Mon Sep 17 00:00:00 2001 From: Kevin Palowa <42116453+KevinPalowa@users.noreply.github.com> Date: Sat, 29 Apr 2023 08:59:20 +0700 Subject: [PATCH 03/19] fix: change word "terpapar" into "terekspos" Co-authored-by: Irfan Maulana --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 426a10033..ccf3db9cd 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -43,7 +43,7 @@ function Button() { *Refs* memungkinkan sebuah komponen [menyimpan beberapa informasi yang tidak digunakan untuk dirender](/learn/referencing-values-with-refs) seperti node DOM atau batas waktu ID. Tidak seperti state, memperbarui *ref* tidak merender ulang komponen Anda. Ref adalah jalan keluar dari paradigma React. *Ref* berguna ketika Anda membutuhkan untuk bekerja dengan sistem non-React, seperti *API* browser bawaan. * [`useRef`](/reference/react/useRef) mendeklarasi *ref*. Anda dapat menyimpan nilai apapun didalamnya, tapi *ref* sering kali digunakan untuk menyimpan node DOM. -* [`useImperativeHandle`](/reference/react/useImperativeHandle) memungkinkan Anda menyesuaikan *ref* yang terpapar oleh komponen Anda. Ini jarang sekali digunakan. +* [`useImperativeHandle`](/reference/react/useImperativeHandle) memungkinkan Anda menyesuaikan *ref* yang terekspos oleh komponen Anda. Ini jarang sekali digunakan. ```js function Form() { From ed23223c6068b73bb831fe03c3f1d85c94f7cc66 Mon Sep 17 00:00:00 2001 From: Kevin Palowa Date: Sat, 29 Apr 2023 09:07:41 +0700 Subject: [PATCH 04/19] fix: use word "timeout" instead of "batas waktu" --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index ccf3db9cd..feedcfe9b 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -40,7 +40,7 @@ function Button() { --- ## Hook Ref {/*ref-hooks*/} -*Refs* memungkinkan sebuah komponen [menyimpan beberapa informasi yang tidak digunakan untuk dirender](/learn/referencing-values-with-refs) seperti node DOM atau batas waktu ID. Tidak seperti state, memperbarui *ref* tidak merender ulang komponen Anda. Ref adalah jalan keluar dari paradigma React. *Ref* berguna ketika Anda membutuhkan untuk bekerja dengan sistem non-React, seperti *API* browser bawaan. +*Refs* memungkinkan sebuah komponen [menyimpan beberapa informasi yang tidak digunakan untuk dirender](/learn/referencing-values-with-refs) seperti node DOM atau ID *timeout*. Tidak seperti state, memperbarui *ref* tidak merender ulang komponen Anda. Ref adalah jalan keluar dari paradigma React. *Ref* berguna ketika Anda membutuhkan untuk bekerja dengan sistem non-React, seperti *API* browser bawaan. * [`useRef`](/reference/react/useRef) mendeklarasi *ref*. Anda dapat menyimpan nilai apapun didalamnya, tapi *ref* sering kali digunakan untuk menyimpan node DOM. * [`useImperativeHandle`](/reference/react/useImperativeHandle) memungkinkan Anda menyesuaikan *ref* yang terekspos oleh komponen Anda. Ini jarang sekali digunakan. From 9cd2311324811e5691d5172efe5de8cb3b1770ab Mon Sep 17 00:00:00 2001 From: Kevin Palowa <42116453+KevinPalowa@users.noreply.github.com> Date: Sat, 29 Apr 2023 21:53:37 +0700 Subject: [PATCH 05/19] fix: typo Co-authored-by: Irfan Maulana --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index feedcfe9b..7bff7442a 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -98,7 +98,7 @@ Terkadang, Anda tidak dapat melewatkan pen-renderan ulang karena layar sebenarny Untuk memprioritaskan rendering, gunakan salah satu Hook ini: -- [`useTransition`](/reference/react/useTransition) memungkinkan Anda mendandai transisi state sebagai non-blocking dan mengizinkan pembaruan lain untuk menghentikannya. +- [`useTransition`](/reference/react/useTransition) memungkinkan Anda menandai transisi state sebagai non-blocking dan mengizinkan pembaruan lain untuk menghentikannya. - [`useDeferredValue`](/reference/react/useDeferredValue) memungkinkan Anda menunda pembaruan bagian antarmuka pengguna (UI) yang tidak penting dan membiarkan bagian lain memperbarui terlebih dahulu. --- From 705fa65dcadcd3d81a0083b799635fb2b95ad9d4 Mon Sep 17 00:00:00 2001 From: Kevin Palowa <42116453+KevinPalowa@users.noreply.github.com> Date: Sat, 29 Apr 2023 21:54:31 +0700 Subject: [PATCH 06/19] fix: use word "menangguhkan" instead of menunda Co-authored-by: Irfan Maulana --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 7bff7442a..505dd8d38 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -99,7 +99,7 @@ Terkadang, Anda tidak dapat melewatkan pen-renderan ulang karena layar sebenarny Untuk memprioritaskan rendering, gunakan salah satu Hook ini: - [`useTransition`](/reference/react/useTransition) memungkinkan Anda menandai transisi state sebagai non-blocking dan mengizinkan pembaruan lain untuk menghentikannya. -- [`useDeferredValue`](/reference/react/useDeferredValue) memungkinkan Anda menunda pembaruan bagian antarmuka pengguna (UI) yang tidak penting dan membiarkan bagian lain memperbarui terlebih dahulu. +- [`useDeferredValue`](/reference/react/useDeferredValue) memungkinkan Anda menangguhkan pembaruan bagian antarmuka pengguna (UI) yang tidak penting dan membiarkan bagian lain memperbarui terlebih dahulu. --- From 5436cbe167a7a806787cfabd6e217dc4f79d820d Mon Sep 17 00:00:00 2001 From: Kevin Palowa <42116453+KevinPalowa@users.noreply.github.com> Date: Sat, 29 Apr 2023 21:55:04 +0700 Subject: [PATCH 07/19] fix: better wording Co-authored-by: Irfan Maulana --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 505dd8d38..79ec2245a 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -94,7 +94,7 @@ function TodoList({ todos, tab, theme }) { } ``` -Terkadang, Anda tidak dapat melewatkan pen-renderan ulang karena layar sebenarnya perlu pembaruan. Di dalam kasus itu, Anda dapat meningkatkan performa dengan memisahkan memblokir pembaruan yang harus sinkron (seperti mengetik masukan) dari pembaruan non-pemblokiran yang tidak perlu memblokir antarmuka pengguna (seperti memperbarui bagan). +Terkadang, Anda tidak dapat melewatkan pe-*render*an ulang karena layar sebenarnya perlu pembaruan. Di dalam kasus itu, Anda dapat meningkatkan performa dengan memisahkan memblokir pembaruan yang harus sinkron (seperti mengetik masukan) dari pembaruan non-pemblokiran yang tidak perlu memblokir antarmuka pengguna (seperti memperbarui bagan). Untuk memprioritaskan rendering, gunakan salah satu Hook ini: From 5532e90b4d5704de8b8d7fbf23c4dda7fc7b6801 Mon Sep 17 00:00:00 2001 From: Kevin Palowa <42116453+KevinPalowa@users.noreply.github.com> Date: Sun, 30 Apr 2023 16:20:12 +0700 Subject: [PATCH 08/19] fix: better styling for loadword Co-authored-by: RiN --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 79ec2245a..99fff784f 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -13,7 +13,7 @@ title: "React Hook Bawaan" ## Hook State {/*state-hooks*/} *State* memungkinkan sebuah komponen ["mengingat" informasi seperti masukan pengguna.](/learn/state-a-components-memory) Sebagai contoh, sebuah komponen formulir dapat menggunakan *state* untuk menyimpan nilai masukan, sementara komponen gambar galeri dapat menggunakan state untuk menyimpan indeks gambar yang terpilih. -Untuk menambahkan state ke sebuah komponen, gunakan salah satu Hooks dibawah ini: +Untuk menambahkan *state* ke sebuah komponen, gunakan salah satu Hooks dibawah ini: * [`useState`](/reference/react/useState) mendeklarasi sebuah variabel *state* yang dapat Anda perbarui secara langsung. * [`useReducer`](/reference/react/useReducer) mendeklarasi sebuah variabel *state* dengan pembaruan logika dalam sebuah [fungsi reducer.](/learn/extracting-state-logic-into-a-reducer) From dc570270b75a8c1f07ba113085f70a5b24141d5c Mon Sep 17 00:00:00 2001 From: Kevin Palowa <42116453+KevinPalowa@users.noreply.github.com> Date: Sun, 30 Apr 2023 16:20:35 +0700 Subject: [PATCH 09/19] fix: better styling for loadword Co-authored-by: RiN --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 99fff784f..8df9b97a7 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -80,7 +80,7 @@ Terdapat dua variasi dari `useEffect` yang jarang digunakan dengan perbedaan pad ## Hook Performa {/*performance-hooks*/} -Cara yang umum untuk mengoptimalkan kinerja pen-renderan ulang adalah melewatkan pekerjaan yang tidak perlu. Sebagai contoh, Anda dapat memberi tahu React untuk menggunakan kembali perhitungan yang sudah ada di dalam cache atau untuk melewatkan pen-renderan ulang jika data tersebut tidak berubah sejak render sebelumnya. +Cara yang umum untuk mengoptimalkan kinerja *rendering* ulang adalah melewatkan pekerjaan yang tidak perlu. Sebagai contoh, Anda dapat memberi tahu React untuk menggunakan kembali perhitungan yang sudah ada di dalam *cache* atau untuk melewatkan *render* ulang jika data tersebut tidak berubah sejak render sebelumnya. Untuk melewatkan perhitungan dan render ulang yang tidak perlu, gunakan salah satu dari Hook ini: From 6af77ac38009f08daff5464002ee0d87f95a89e8 Mon Sep 17 00:00:00 2001 From: Kevin Palowa <42116453+KevinPalowa@users.noreply.github.com> Date: Sun, 30 Apr 2023 16:21:12 +0700 Subject: [PATCH 10/19] fix: better styling for loadword Co-authored-by: RiN --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 8df9b97a7..cad7861a0 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -82,7 +82,7 @@ Terdapat dua variasi dari `useEffect` yang jarang digunakan dengan perbedaan pad Cara yang umum untuk mengoptimalkan kinerja *rendering* ulang adalah melewatkan pekerjaan yang tidak perlu. Sebagai contoh, Anda dapat memberi tahu React untuk menggunakan kembali perhitungan yang sudah ada di dalam *cache* atau untuk melewatkan *render* ulang jika data tersebut tidak berubah sejak render sebelumnya. -Untuk melewatkan perhitungan dan render ulang yang tidak perlu, gunakan salah satu dari Hook ini: +Untuk melewatkan perhitungan dan *render* ulang yang tidak perlu, gunakan salah satu dari Hook ini: - [`useMemo`](/reference/react/useMemo) memungkinkan Anda menyimpan hasil perhitungan yang berat secara cache. - [`useCallback`](/reference/react/useCallback) memungkinkan Anda menyimpan definisi fungsi di cache sebelum melewatkannya ke komponen yang dioptimalkan. From 3511c8d60b317c153b615199aac7a1965e78bccc Mon Sep 17 00:00:00 2001 From: Kevin Palowa <42116453+KevinPalowa@users.noreply.github.com> Date: Sun, 30 Apr 2023 16:21:26 +0700 Subject: [PATCH 11/19] fix: better styling for loadword Co-authored-by: RiN --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index cad7861a0..3aad203ca 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -84,7 +84,7 @@ Cara yang umum untuk mengoptimalkan kinerja *rendering* ulang adalah melewatkan Untuk melewatkan perhitungan dan *render* ulang yang tidak perlu, gunakan salah satu dari Hook ini: -- [`useMemo`](/reference/react/useMemo) memungkinkan Anda menyimpan hasil perhitungan yang berat secara cache. +- [`useMemo`](/reference/react/useMemo) memungkinkan Anda menyimpan hasil perhitungan yang berat secara *cache*. - [`useCallback`](/reference/react/useCallback) memungkinkan Anda menyimpan definisi fungsi di cache sebelum melewatkannya ke komponen yang dioptimalkan. ```js From fd204748fccabfbb512368e3d44c0b59faa01a5a Mon Sep 17 00:00:00 2001 From: Kevin Palowa <42116453+KevinPalowa@users.noreply.github.com> Date: Sun, 30 Apr 2023 16:25:17 +0700 Subject: [PATCH 12/19] fix: better styling for loadword Co-authored-by: RiN --- src/content/reference/react/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 3aad203ca..059cd5c00 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -94,11 +94,11 @@ function TodoList({ todos, tab, theme }) { } ``` -Terkadang, Anda tidak dapat melewatkan pe-*render*an ulang karena layar sebenarnya perlu pembaruan. Di dalam kasus itu, Anda dapat meningkatkan performa dengan memisahkan memblokir pembaruan yang harus sinkron (seperti mengetik masukan) dari pembaruan non-pemblokiran yang tidak perlu memblokir antarmuka pengguna (seperti memperbarui bagan). +Terkadang, Anda tidak dapat melewatkan *rendering* ulang karena layar sebenarnya perlu pembaruan. Di dalam kasus itu, Anda dapat meningkatkan performa dengan memisahkan memblokir pembaruan yang harus sinkron (seperti mengetik masukan) dari pembaruan non-pemblokiran yang tidak perlu memblokir antarmuka pengguna (seperti memperbarui bagan). -Untuk memprioritaskan rendering, gunakan salah satu Hook ini: +Untuk memprioritaskan *rendering*, gunakan salah satu Hook ini: -- [`useTransition`](/reference/react/useTransition) memungkinkan Anda menandai transisi state sebagai non-blocking dan mengizinkan pembaruan lain untuk menghentikannya. +- [`useTransition`](/reference/react/useTransition) memungkinkan Anda menandai transisi *state* sebagai non-blocking dan mengizinkan pembaruan lain untuk menghentikannya. - [`useDeferredValue`](/reference/react/useDeferredValue) memungkinkan Anda menangguhkan pembaruan bagian antarmuka pengguna (UI) yang tidak penting dan membiarkan bagian lain memperbarui terlebih dahulu. --- From b32b8d4151780e4d161828b446c292ecad89af17 Mon Sep 17 00:00:00 2001 From: Kevin Palowa Date: Sun, 30 Apr 2023 16:29:53 +0700 Subject: [PATCH 13/19] fix: better styling --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 059cd5c00..4adc6e721 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -85,7 +85,7 @@ Cara yang umum untuk mengoptimalkan kinerja *rendering* ulang adalah melewatkan Untuk melewatkan perhitungan dan *render* ulang yang tidak perlu, gunakan salah satu dari Hook ini: - [`useMemo`](/reference/react/useMemo) memungkinkan Anda menyimpan hasil perhitungan yang berat secara *cache*. -- [`useCallback`](/reference/react/useCallback) memungkinkan Anda menyimpan definisi fungsi di cache sebelum melewatkannya ke komponen yang dioptimalkan. +- [`useCallback`](/reference/react/useCallback) memungkinkan Anda menyimpan definisi fungsi di *cache* sebelum melewatkannya ke komponen yang dioptimalkan. ```js function TodoList({ todos, tab, theme }) { From 49716a2eab230c5d5cea8ab3078f59c3965efb67 Mon Sep 17 00:00:00 2001 From: Kevin Palowa Date: Mon, 1 May 2023 17:13:44 +0700 Subject: [PATCH 14/19] fix: translate browser & repaint word --- src/content/reference/react/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 4adc6e721..4001b78d7 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -40,7 +40,7 @@ function Button() { --- ## Hook Ref {/*ref-hooks*/} -*Refs* memungkinkan sebuah komponen [menyimpan beberapa informasi yang tidak digunakan untuk dirender](/learn/referencing-values-with-refs) seperti node DOM atau ID *timeout*. Tidak seperti state, memperbarui *ref* tidak merender ulang komponen Anda. Ref adalah jalan keluar dari paradigma React. *Ref* berguna ketika Anda membutuhkan untuk bekerja dengan sistem non-React, seperti *API* browser bawaan. +*Refs* memungkinkan sebuah komponen [menyimpan beberapa informasi yang tidak digunakan untuk dirender](/learn/referencing-values-with-refs) seperti node DOM atau ID *timeout*. Tidak seperti state, memperbarui *ref* tidak merender ulang komponen Anda. Ref adalah jalan keluar dari paradigma React. *Ref* berguna ketika Anda membutuhkan untuk bekerja dengan sistem non-React, seperti *API* peramban bawaan. * [`useRef`](/reference/react/useRef) mendeklarasi *ref*. Anda dapat menyimpan nilai apapun didalamnya, tapi *ref* sering kali digunakan untuk menyimpan node DOM. * [`useImperativeHandle`](/reference/react/useImperativeHandle) memungkinkan Anda menyesuaikan *ref* yang terekspos oleh komponen Anda. Ini jarang sekali digunakan. @@ -55,7 +55,7 @@ function Form() { ## Hook Efek {/*effect-hooks*/} -*Efek* memungkinkan sebuah komponen [terhubung dan menyesuaikan dengan sistem eksternal](/learn/synchronizing-with-effects) Ini termasuk berurusan dengan jaringan, browser DOM, animasi, widget yang ditulis menggunakan UI pustaka lain, dan kode non-React lainnya. +*Efek* memungkinkan sebuah komponen [terhubung dan menyesuaikan dengan sistem eksternal](/learn/synchronizing-with-effects) Ini termasuk berurusan dengan jaringan, DOM peramban, animasi, widget yang ditulis menggunakan UI pustaka lain, dan kode non-React lainnya. * [`useEffect`](/reference/react/useEffect) menghubungkan sebuah komponen ke sebuah sistem eksternal. @@ -73,7 +73,7 @@ Efek adalah jalan keluar dari paradigma React. Jangan gunakan Efek untuk mengatu Terdapat dua variasi dari `useEffect` yang jarang digunakan dengan perbedaan pada waktu-nya -* [`useLayoutEffect`](/reference/react/useLayoutEffect) dipanggil sebelum browser melakukan repaint layar. Anda dapat menggunakannya untuk mengukur layout pada tahap ini. +* [`useLayoutEffect`](/reference/react/useLayoutEffect) dipanggil sebelum peramban melakukan melukis ulang layar. Anda dapat menggunakannya untuk mengukur layout pada tahap ini. * [`useInsertionEffect`](/reference/react/useInsertionEffect) dipanggil sebelum React melakukan perubahan ke DOM. Pustaka - pustaka dapat memasukkan CSS dinamik disini. --- From da734a2448cd0c1ac11a998b1790c1e871a9b471 Mon Sep 17 00:00:00 2001 From: Kevin Palowa Date: Mon, 1 May 2023 17:16:48 +0700 Subject: [PATCH 15/19] fix: better translations for repaint --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 4001b78d7..bf018d9aa 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -73,7 +73,7 @@ Efek adalah jalan keluar dari paradigma React. Jangan gunakan Efek untuk mengatu Terdapat dua variasi dari `useEffect` yang jarang digunakan dengan perbedaan pada waktu-nya -* [`useLayoutEffect`](/reference/react/useLayoutEffect) dipanggil sebelum peramban melakukan melukis ulang layar. Anda dapat menggunakannya untuk mengukur layout pada tahap ini. +* [`useLayoutEffect`](/reference/react/useLayoutEffect) dipanggil sebelum peramban melukis ulang (*repaint*) layar. Anda dapat menggunakannya untuk mengukur layout pada tahap ini. * [`useInsertionEffect`](/reference/react/useInsertionEffect) dipanggil sebelum React melakukan perubahan ke DOM. Pustaka - pustaka dapat memasukkan CSS dinamik disini. --- From 42f8d258884a14c3c7b34db8be93a07aafc3a9d4 Mon Sep 17 00:00:00 2001 From: Kevin Palowa Date: Mon, 1 May 2023 17:21:27 +0700 Subject: [PATCH 16/19] fix: translate non-blockig word --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index bf018d9aa..345ebb9ea 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -98,7 +98,7 @@ Terkadang, Anda tidak dapat melewatkan *rendering* ulang karena layar sebenarnya Untuk memprioritaskan *rendering*, gunakan salah satu Hook ini: -- [`useTransition`](/reference/react/useTransition) memungkinkan Anda menandai transisi *state* sebagai non-blocking dan mengizinkan pembaruan lain untuk menghentikannya. +- [`useTransition`](/reference/react/useTransition) memungkinkan Anda menandai transisi *state* sebagai non-pemblokiran dan mengizinkan pembaruan lain untuk menghentikannya. - [`useDeferredValue`](/reference/react/useDeferredValue) memungkinkan Anda menangguhkan pembaruan bagian antarmuka pengguna (UI) yang tidak penting dan membiarkan bagian lain memperbarui terlebih dahulu. --- From 588bd4af03f207e9cf1c8284d7fd76190577b582 Mon Sep 17 00:00:00 2001 From: Kevin Palowa <42116453+KevinPalowa@users.noreply.github.com> Date: Tue, 2 May 2023 04:42:04 +0700 Subject: [PATCH 17/19] fix: Apply suggestions from code review Co-authored-by: Zain Fathoni --- src/content/reference/react/index.md | 41 ++++++++++++++-------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 345ebb9ea..9c259cc36 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -4,7 +4,7 @@ title: "React Hook Bawaan" -*Hook* memungkinkan Anda menggunakan fitur React dari dalam komponen Anda. Anda dapat menggunakan Hook bawaan atau mengkombinasikan mereka untuk membuat hook Anda sendiri. Halaman ini mencantumkan daftar semua list Hook bawaan yang tersedia di React. +*Hook* memungkinkan Anda menggunakan fitur React dari dalam komponen Anda. Anda dapat menggunakan Hook bawaan atau mengkombinasikan mereka untuk membuat hook Anda sendiri. Halaman ini mencantumkan daftar semua Hook bawaan yang tersedia di React. @@ -12,11 +12,11 @@ title: "React Hook Bawaan" ## Hook State {/*state-hooks*/} -*State* memungkinkan sebuah komponen ["mengingat" informasi seperti masukan pengguna.](/learn/state-a-components-memory) Sebagai contoh, sebuah komponen formulir dapat menggunakan *state* untuk menyimpan nilai masukan, sementara komponen gambar galeri dapat menggunakan state untuk menyimpan indeks gambar yang terpilih. +*State* memungkinkan sebuah komponen ["mengingat" informasi seperti masukan pengguna.](/learn/state-a-components-memory) Sebagai contoh, sebuah komponen formulir dapat menggunakan *state* untuk menyimpan nilai masukan, sementara sebuah komponen galeri gambar dapat menggunakan *state* untuk menyimpan indeks gambar yang terpilih. Untuk menambahkan *state* ke sebuah komponen, gunakan salah satu Hooks dibawah ini: -* [`useState`](/reference/react/useState) mendeklarasi sebuah variabel *state* yang dapat Anda perbarui secara langsung. -* [`useReducer`](/reference/react/useReducer) mendeklarasi sebuah variabel *state* dengan pembaruan logika dalam sebuah [fungsi reducer.](/learn/extracting-state-logic-into-a-reducer) +* [`useState`](/reference/react/useState) mendeklarasikan sebuah variabel *state* yang dapat Anda perbarui secara langsung. +* [`useReducer`](/reference/react/useReducer) mendeklarasikan sebuah variabel *state* dengan logika pembaruan yang tertulis di dalam sebuah [fungsi *reducer*.](/learn/extracting-state-logic-into-a-reducer) ```js function ImageGallery() { @@ -28,7 +28,7 @@ function ImageGallery() { ## Hook Context {/*context-hooks*/} -*Context* memungkinkan sebuah komponen [menerima informasi dari induk yang jauh tanpa mengopernya sebagai props.](/learn/passing-props-to-a-component) Sebagai contoh, komponen tingkat atas aplikasi Anda dapat meneruskan tema antarmuka pengguna (UI) saat ini ke semua komponen di bawah, tidak peduli seberapa dalam. +*Context* memungkinkan sebuah komponen [menerima informasi dari induk yang jauh tanpa mengopernya sebagai *props*.](/learn/passing-props-to-a-component) Sebagai contoh, komponen tingkat teratas aplikasi Anda dapat meneruskan tema antarmuka pengguna (UI) saat ini ke semua komponen di bawahnya, seberapa pun dalamnya. * [`useContext`](/reference/react/useContext) membaca dan berlangganan ke sebuah *context*. ```js @@ -40,9 +40,10 @@ function Button() { --- ## Hook Ref {/*ref-hooks*/} -*Refs* memungkinkan sebuah komponen [menyimpan beberapa informasi yang tidak digunakan untuk dirender](/learn/referencing-values-with-refs) seperti node DOM atau ID *timeout*. Tidak seperti state, memperbarui *ref* tidak merender ulang komponen Anda. Ref adalah jalan keluar dari paradigma React. *Ref* berguna ketika Anda membutuhkan untuk bekerja dengan sistem non-React, seperti *API* peramban bawaan. -* [`useRef`](/reference/react/useRef) mendeklarasi *ref*. Anda dapat menyimpan nilai apapun didalamnya, tapi *ref* sering kali digunakan untuk menyimpan node DOM. +*Refs* memungkinkan sebuah komponen [menyimpan beberapa informasi yang tidak digunakan untuk pe-*render*-an](/learn/referencing-values-with-refs) seperti simpul (*node*) DOM atau ID *timeout*. Tidak seperti *state*, memperbarui sebuah *ref* tidak me-*render* ulang komponen Anda. *Ref* adalah jalan keluar dari paradigma React. *Ref* berguna ketika Anda perlu untuk bekerja dengan sistem-sistem non-React, seperti *API-API* bawaan dari peramban. + +* [`useRef`](/reference/react/useRef) mendeklarasikan *ref*. Anda dapat menyimpan nilai apapun di dalamnya, tapi *ref* seringkali digunakan untuk menyimpan simpul DOM. * [`useImperativeHandle`](/reference/react/useImperativeHandle) memungkinkan Anda menyesuaikan *ref* yang terekspos oleh komponen Anda. Ini jarang sekali digunakan. ```js @@ -55,7 +56,7 @@ function Form() { ## Hook Efek {/*effect-hooks*/} -*Efek* memungkinkan sebuah komponen [terhubung dan menyesuaikan dengan sistem eksternal](/learn/synchronizing-with-effects) Ini termasuk berurusan dengan jaringan, DOM peramban, animasi, widget yang ditulis menggunakan UI pustaka lain, dan kode non-React lainnya. +*Efek* memungkinkan sebuah komponen [terhubung dan menyesuaikan dengan sistem eksternal](/learn/synchronizing-with-effects). Termasuk di dalamnya yakni berurusan dengan jaringan, DOM peramban, animasi, *widget* yang ditulis menggunakan UI pustaka lain, dan kode non-React lainnya. * [`useEffect`](/reference/react/useEffect) menghubungkan sebuah komponen ke sebuah sistem eksternal. @@ -69,23 +70,23 @@ function ChatRoom({ roomId }) { // ... ``` -Efek adalah jalan keluar dari paradigma React. Jangan gunakan Efek untuk mengatur aliran data aplikasi Anda. Jika Anda tidak berinteraksi dengan sistem eksternal, [Kemungkinan Besar Anda Tidak Memerlukan Efek](/learn/you-might-not-need-an-effect) +Efek adalah jalan keluar dari paradigma React. Jangan gunakan Efek untuk mengatur aliran data aplikasi Anda. Jika Anda tidak berinteraksi dengan sistem eksternal, [kemungkinan besar Anda tidak memerlukan Efek](/learn/you-might-not-need-an-effect) -Terdapat dua variasi dari `useEffect` yang jarang digunakan dengan perbedaan pada waktu-nya +Terdapat dua variasi dari `useEffect` yang jarang digunakan dengan perbedaan pada waktu eksekusinya -* [`useLayoutEffect`](/reference/react/useLayoutEffect) dipanggil sebelum peramban melukis ulang (*repaint*) layar. Anda dapat menggunakannya untuk mengukur layout pada tahap ini. -* [`useInsertionEffect`](/reference/react/useInsertionEffect) dipanggil sebelum React melakukan perubahan ke DOM. Pustaka - pustaka dapat memasukkan CSS dinamik disini. +* [`useLayoutEffect`](/reference/react/useLayoutEffect) dipanggil sebelum peramban melukis ulang (*repaint*) layar. Anda dapat menggunakannya untuk mengukur tata letak (*layout*) pada tahap ini. +* [`useInsertionEffect`](/reference/react/useInsertionEffect) dipanggil sebelum React melakukan perubahan ke DOM. Pustaka-pustaka (*libraries) lainnya dapat memasukkan CSS dinamik di sini. --- -## Hook Performa {/*performance-hooks*/} +## Hook Kinerja {/*performance-hooks*/} -Cara yang umum untuk mengoptimalkan kinerja *rendering* ulang adalah melewatkan pekerjaan yang tidak perlu. Sebagai contoh, Anda dapat memberi tahu React untuk menggunakan kembali perhitungan yang sudah ada di dalam *cache* atau untuk melewatkan *render* ulang jika data tersebut tidak berubah sejak render sebelumnya. +Cara yang umum untuk mengoptimalkan kinerja pe-*render*-an ulang adalah melewatkan pekerjaan yang tidak perlu. Sebagai contoh, Anda dapat memberi tahu React untuk menggunakan kembali perhitungan yang sudah ada di dalam *cache* atau untuk melewatkan *render* ulang jika data tersebut tidak berubah sejak *render* sebelumnya. -Untuk melewatkan perhitungan dan *render* ulang yang tidak perlu, gunakan salah satu dari Hook ini: +Untuk melewatkan perhitungan dan pe-*render*-an ulang yang tidak perlu, gunakan salah satu dari *Hook-hook* ini: -- [`useMemo`](/reference/react/useMemo) memungkinkan Anda menyimpan hasil perhitungan yang berat secara *cache*. -- [`useCallback`](/reference/react/useCallback) memungkinkan Anda menyimpan definisi fungsi di *cache* sebelum melewatkannya ke komponen yang dioptimalkan. +- [`useMemo`](/reference/react/useMemo) memungkinkan Anda menyimpan hasil perhitungan yang berat di *cache*. +- [`useCallback`](/reference/react/useCallback) memungkinkan Anda menyimpan definisi fungsi di *cache* sebelum melewatkannya ke komponen yang hendak dioptimasi. ```js function TodoList({ todos, tab, theme }) { @@ -94,11 +95,11 @@ function TodoList({ todos, tab, theme }) { } ``` -Terkadang, Anda tidak dapat melewatkan *rendering* ulang karena layar sebenarnya perlu pembaruan. Di dalam kasus itu, Anda dapat meningkatkan performa dengan memisahkan memblokir pembaruan yang harus sinkron (seperti mengetik masukan) dari pembaruan non-pemblokiran yang tidak perlu memblokir antarmuka pengguna (seperti memperbarui bagan). +Terkadang, Anda tidak dapat melewatkan pe-*render*-an ulang karena layar sebenarnya perlu pembaruan. Di dalam kasus itu, Anda dapat meningkatkan kinerja dengan memisahkan pembaruan penghalang yang harus sinkron (seperti mengetik masukan) dari pembaruan yang bukan penghalang yang tidak perlu memblokir antarmuka pengguna (seperti memperbarui bagan). -Untuk memprioritaskan *rendering*, gunakan salah satu Hook ini: +Untuk memprioritaskan pe-*render*-an, gunakan salah satu dari *Hook-hook* ini: -- [`useTransition`](/reference/react/useTransition) memungkinkan Anda menandai transisi *state* sebagai non-pemblokiran dan mengizinkan pembaruan lain untuk menghentikannya. +- [`useTransition`](/reference/react/useTransition) memungkinkan Anda menandai transisi *state* sebagai bukan penghalang dan mengizinkan pembaruan lain untuk menghentikannya. - [`useDeferredValue`](/reference/react/useDeferredValue) memungkinkan Anda menangguhkan pembaruan bagian antarmuka pengguna (UI) yang tidak penting dan membiarkan bagian lain memperbarui terlebih dahulu. --- From 46aa496dd229d2dd44afb56f722f659447d67596 Mon Sep 17 00:00:00 2001 From: Kevin Palowa <42116453+KevinPalowa@users.noreply.github.com> Date: Tue, 9 May 2023 08:06:26 +0700 Subject: [PATCH 18/19] fix: add suggestion Co-authored-by: Zain Fathoni --- src/content/reference/react/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 9c259cc36..d7bd86cbe 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -56,7 +56,7 @@ function Form() { ## Hook Efek {/*effect-hooks*/} -*Efek* memungkinkan sebuah komponen [terhubung dan menyesuaikan dengan sistem eksternal](/learn/synchronizing-with-effects). Termasuk di dalamnya yakni berurusan dengan jaringan, DOM peramban, animasi, *widget* yang ditulis menggunakan UI pustaka lain, dan kode non-React lainnya. +*Efek* memungkinkan sebuah komponen [terhubung dan menyinkronkan dengan sistem eksternal](/learn/synchronizing-with-effects). Termasuk di dalamnya yakni berurusan dengan jaringan, DOM peramban, animasi, *widget* yang ditulis menggunakan UI pustaka lain, dan kode non-React lainnya. * [`useEffect`](/reference/react/useEffect) menghubungkan sebuah komponen ke sebuah sistem eksternal. @@ -75,7 +75,7 @@ Efek adalah jalan keluar dari paradigma React. Jangan gunakan Efek untuk mengatu Terdapat dua variasi dari `useEffect` yang jarang digunakan dengan perbedaan pada waktu eksekusinya * [`useLayoutEffect`](/reference/react/useLayoutEffect) dipanggil sebelum peramban melukis ulang (*repaint*) layar. Anda dapat menggunakannya untuk mengukur tata letak (*layout*) pada tahap ini. -* [`useInsertionEffect`](/reference/react/useInsertionEffect) dipanggil sebelum React melakukan perubahan ke DOM. Pustaka-pustaka (*libraries) lainnya dapat memasukkan CSS dinamik di sini. +* [`useInsertionEffect`](/reference/react/useInsertionEffect) dipanggil sebelum React melakukan perubahan ke DOM. Pustaka-pustaka (*libraries*) lainnya dapat memasukkan CSS dinamik di sini. --- @@ -95,7 +95,7 @@ function TodoList({ todos, tab, theme }) { } ``` -Terkadang, Anda tidak dapat melewatkan pe-*render*-an ulang karena layar sebenarnya perlu pembaruan. Di dalam kasus itu, Anda dapat meningkatkan kinerja dengan memisahkan pembaruan penghalang yang harus sinkron (seperti mengetik masukan) dari pembaruan yang bukan penghalang yang tidak perlu memblokir antarmuka pengguna (seperti memperbarui bagan). +Terkadang, Anda tidak dapat melewatkan pe-*render*-an ulang karena layar memang benar-benar memerlukan pembaruan. Di dalam kasus itu, Anda dapat meningkatkan kinerja dengan memisahkan pembaruan penghalang (*blocking updates*) yang harus sinkron (seperti mengetik masukan) dari pembaruan yang bukan penghalang (*non-blocking updates*) yang tidak perlu memblokir antarmuka pengguna (seperti memperbarui bagan). Untuk memprioritaskan pe-*render*-an, gunakan salah satu dari *Hook-hook* ini: From ebd4586915338ad1a3074377261236d6454f14bb Mon Sep 17 00:00:00 2001 From: Kevin Palowa <42116453+KevinPalowa@users.noreply.github.com> Date: Wed, 24 May 2023 15:12:29 +0700 Subject: [PATCH 19/19] fix: styling & missing period Co-authored-by: Resi Respati --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index d7bd86cbe..5ec770311 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -70,7 +70,7 @@ function ChatRoom({ roomId }) { // ... ``` -Efek adalah jalan keluar dari paradigma React. Jangan gunakan Efek untuk mengatur aliran data aplikasi Anda. Jika Anda tidak berinteraksi dengan sistem eksternal, [kemungkinan besar Anda tidak memerlukan Efek](/learn/you-might-not-need-an-effect) +Efek adalah "jalan keluar" dari paradigma React. Jangan gunakan Efek untuk mengatur aliran data aplikasi Anda. Jika Anda tidak berinteraksi dengan sistem eksternal, [kemungkinan besar Anda tidak memerlukan Efek.](/learn/you-might-not-need-an-effect) Terdapat dua variasi dari `useEffect` yang jarang digunakan dengan perbedaan pada waktu eksekusinya