diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index d9c028af7..690a06694 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -13,13 +13,13 @@ Anda dapat mencobanya dengan memperbarui *package* React ke versi eksperimental - `react-dom@experimental` - `eslint-plugin-react-hooks@experimental` -Versi eksperimental React mungkin mengandung bug. Jangan menggunakannya dalam produksi. +Versi eksperimental React mungkin mengandung bug. Jangan menggunakannya dalam *production*. -`` lets you hide and show part of the UI. +`` memungkinkan Anda untuk menyembunyikan dan menampilkan bagian dari UI. ```js @@ -34,11 +34,11 @@ Versi eksperimental React mungkin mengandung bug. Jangan menggunakannya dalam pr --- -## Reference {/*reference*/} +## Referensi {/*reference*/} ### `` {/*activity*/} -Wrap a part of the UI in `` to manage its visibility state: +Bungkus bagian UI dalam `` untuk mengelola status visibilitasnya: ```js import {unstable_Activity as Activity} from 'react'; @@ -48,30 +48,30 @@ import {unstable_Activity as Activity} from 'react'; ``` -When "hidden", the `children` of `` are not visible on the page. If a new `` mounts as "hidden" then it pre-renders the content at lower priority without blocking the visible content on the page, but it does not mount by creating Effects. When a "visible" Activity switches to "hidden" it conceptually unmounts by destroying all the Effects, but saves its state. This allows fast switching between "visible" and "hidden" states without recreating the state for a "hidden" Activity. +Saat "hidden" (tersembunyi), `children` dari `` tidak terlihat di halaman. Jika `` baru di-*mount* sebagai "hidden", ia akan melakukan pra-render konten dengan prioritas lebih rendah tanpa memblokir konten yang terlihat di halaman, tetapi tidak di-*mount* dengan membuat Efek. Saat Activity yang "visible" (terlihat) beralih ke "hidden", Activity tersebut secara konseptual di-*unmount* dengan menghancurkan semua Efek, tetapi menyimpan statusnya. Hal ini memungkinkan peralihan cepat antara status "visible" dan "hidden" tanpa membuat ulang status untuk Activity yang "hidden". -In the future, "hidden" Activities may automatically destroy state based on resources like memory. +Di masa mendatang, Activity yang "hidden" mungkin secara otomatis menghancurkan status berdasarkan sumber daya seperti memori. #### Props {/*props*/} -* `children`: The actual UI you intend to render. -* **optional** `mode`: Either "visible" or "hidden". Defaults to "visible". When "hidden", updates to the children are deferred to lower priority. The component will not create Effects until the Activity is switched to "visible". If a "visible" Activity switches to "hidden", the Effects will be destroyed. +* `children`: UI aktual yang ingin Anda render. +* **opsional** `mode`: Antara "visible" atau "hidden". Default-nya adalah "visible". Saat "hidden", pembaruan pada anak-anak akan ditunda ke prioritas yang lebih rendah. Komponen tidak akan membuat Efek hingga Activity dialihkan ke "visible". Jika Activity yang "visible" beralih ke "hidden", Efek akan dihancurkan. #### Caveats {/*caveats*/} -- While hidden, the `children` of `` are hidden on the page. -- `` will unmount all Effects when switching from "visible" to "hidden" without destroying React or DOM state. This means Effects that are expected to run only once on mount will run again when switching from "hidden" to "visible". Conceptually, "hidden" Activities are unmounted, but they are not destroyed either. We recommend using [``](/reference/react/StrictMode) to catch any unexpected side-effects from this behavior. -- When used with ``, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation. -- Parts of the UI wrapped in `` are not included in the SSR response. -- Parts of the UI wrapped in `` will hydrate at a lower priority than other content. +- Saat tersembunyi, `children` dari `` disembunyikan di halaman. +- `` akan men-*unmount* semua Efek saat beralih dari "visible" ke "hidden" tanpa menghancurkan status React atau DOM. Ini berarti Efek yang diharapkan hanya berjalan sekali saat mount akan berjalan lagi saat beralih dari "hidden" ke "visible". Secara konseptual, Activity yang "hidden" di-*unmount*, tetapi juga tidak dihancurkan. Kami merekomendasikan penggunaan [``](/reference/react/StrictMode) untuk menangkap efek samping yang tidak terduga dari perilaku ini. +- Saat digunakan dengan ``, aktivitas tersembunyi yang muncul dalam transisi akan mengaktifkan animasi "masuk". Activity yang terlihat yang disembunyikan dalam transisi akan mengaktifkan animasi "keluar". +- Bagian UI yang dibungkus dalam `` tidak disertakan dalam respons SSR. +- Bagian UI yang dibungkus dalam `` akan melakukan hidrasi (hydrate) pada prioritas yang lebih rendah daripada konten lainnya. --- -## Usage {/*usage*/} +## Penggunaan {/*usage*/} -### Pre-render part of the UI {/*pre-render-part-of-the-ui*/} +### Melakukan pra-render bagian UI {/*pre-render-part-of-the-ui*/} -You can pre-render part of the UI using ``: +Anda dapat melakukan pra-render bagian UI menggunakan ``: ```js @@ -79,11 +79,11 @@ You can pre-render part of the UI using ``: ``` -When an Activity is rendered with `mode="hidden"`, the `children` are not visible on the page, but are rendered at lower priority than the visible content on the page. +Saat Activity dirender dengan `mode="hidden"`, `children` tidak terlihat di halaman, tetapi dirender pada prioritas yang lebih rendah daripada konten yang terlihat di halaman. -When the `mode` later switches to "visible", the pre-rendered children will mount and become visible. This can be used to prepare parts of the UI the user is likely to interact with next to reduce loading times. +Saat `mode` kemudian beralih ke "visible", anak-anak yang telah dipra-render akan di-*mount* dan menjadi terlihat. Ini dapat digunakan untuk mempersiapkan bagian UI yang kemungkinan akan berinteraksi dengan pengguna selanjutnya untuk mengurangi waktu pemuatan. -In the following example from [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), the `PostsTab` component fetches some data using `use`. When you click the “Posts” tab, the `PostsTab` component suspends, causing the button loading state to appear: +Dalam contoh berikut dari [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), komponen `PostsTab` mengambil beberapa data menggunakan `use`. Saat Anda mengklik tab “Posts”, komponen `PostsTab` menangguhkan (suspends), menyebabkan status pemuatan tombol muncul: @@ -276,9 +276,9 @@ b { display: inline-block; margin-right: 10px; } -In this example, the user needs to wait for the posts to load when clicking on the "Posts" tab. +Dalam contoh ini, pengguna perlu menunggu postingan dimuat saat mengklik tab "Posts". -We can reduce the delay for the "Posts" tab by pre-rendering the inactive Tabs with a hidden ``: +Kita dapat mengurangi penundaan untuk tab "Posts" dengan melakukan pra-render Tab yang tidak aktif dengan `` yang tersembunyi: @@ -470,10 +470,10 @@ b { display: inline-block; margin-right: 10px; } --- -### Keeping state for part of the UI {/*keeping-state-for-part-of-the-ui*/} +### Menyimpan status untuk bagian UI {/*keeping-state-for-part-of-the-ui*/} -You can keep state for parts of the UI by switching `` from "visible" to "hidden": +Anda dapat menyimpan status untuk bagian UI dengan mengalihkan `` dari "visible" ke "hidden": ```js @@ -481,11 +481,11 @@ You can keep state for parts of the UI by switching `` from "visible" ``` -When an Activity switches from `mode="visible"` to "hidden", the `children` will become hidden on the page, and unmount by destroying all Effects, but will keep their React and DOM state. +Saat Activity beralih dari `mode="visible"` ke "hidden", `children` akan menjadi tersembunyi di halaman, dan di-*unmount* dengan menghancurkan semua Efek, tetapi akan menyimpan status React dan DOM mereka. -When the `mode` later switches to "visible", the saved state will be re-used when mounting the children by creating all the Effects. This can be used to keep state in parts of the UI the user is likely to interact with again to maintain DOM or React state. +Saat `mode` kemudian beralih ke "visible", status yang disimpan akan digunakan kembali saat me-*mount* anak-anak dengan membuat semua Efek. Ini dapat digunakan untuk menyimpan status di bagian UI yang kemungkinan akan berinteraksi dengan pengguna lagi untuk mempertahankan status DOM atau React. -In the following example from [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), the `ContactTab` includes a `