Skip to content

Commit 848c021

Browse files
committed
feat: translate activity
1 parent 36ade0b commit 848c021

File tree

1 file changed

+38
-38
lines changed

1 file changed

+38
-38
lines changed

src/content/reference/react/Activity.md

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ Anda dapat mencobanya dengan memperbarui *package* React ke versi eksperimental
1313
- `react-dom@experimental`
1414
- `eslint-plugin-react-hooks@experimental`
1515

16-
Versi eksperimental React mungkin mengandung bug. Jangan menggunakannya dalam produksi.
16+
Versi eksperimental React mungkin mengandung bug. Jangan menggunakannya dalam *production*.
1717

1818
</Experimental>
1919

2020
<Intro>
2121

22-
`<Activity>` lets you hide and show part of the UI.
22+
`<Activity>` memungkinkan Anda untuk menyembunyikan dan menampilkan bagian dari UI.
2323

2424

2525
```js
@@ -34,11 +34,11 @@ Versi eksperimental React mungkin mengandung bug. Jangan menggunakannya dalam pr
3434

3535
---
3636

37-
## Reference {/*reference*/}
37+
## Referensi {/*reference*/}
3838

3939
### `<Activity>` {/*activity*/}
4040

41-
Wrap a part of the UI in `<Activity>` to manage its visibility state:
41+
Bungkus bagian UI dalam `<Activity>` untuk mengelola status visibilitasnya:
4242

4343
```js
4444
import {unstable_Activity as Activity} from 'react';
@@ -48,42 +48,42 @@ import {unstable_Activity as Activity} from 'react';
4848
</Activity>
4949
```
5050

51-
When "hidden", the `children` of `<Activity />` are not visible on the page. If a new `<Activity>` 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.
51+
Saat "hidden" (tersembunyi), `children` dari `<Activity />` tidak terlihat di halaman. Jika `<Activity>` 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".
5252

53-
In the future, "hidden" Activities may automatically destroy state based on resources like memory.
53+
Di masa mendatang, Activity yang "hidden" mungkin secara otomatis menghancurkan status berdasarkan sumber daya seperti memori.
5454

5555
#### Props {/*props*/}
5656

57-
* `children`: The actual UI you intend to render.
58-
* **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.
57+
* `children`: UI aktual yang ingin Anda render.
58+
* **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.
5959

6060
#### Caveats {/*caveats*/}
6161

62-
- While hidden, the `children` of `<Activity>` are hidden on the page.
63-
- `<Activity>` 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 [`<StrictMode>`](/reference/react/StrictMode) to catch any unexpected side-effects from this behavior.
64-
- When used with `<ViewTransition>`, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation.
65-
- Parts of the UI wrapped in `<Activity mode="hidden">` are not included in the SSR response.
66-
- Parts of the UI wrapped in `<Activity mode="visible">` will hydrate at a lower priority than other content.
62+
- Saat tersembunyi, `children` dari `<Activity>` disembunyikan di halaman.
63+
- `<Activity>` 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 [`<StrictMode>`](/reference/react/StrictMode) untuk menangkap efek samping yang tidak terduga dari perilaku ini.
64+
- Saat digunakan dengan `<ViewTransition>`, aktivitas tersembunyi yang muncul dalam transisi akan mengaktifkan animasi "masuk". Activity yang terlihat yang disembunyikan dalam transisi akan mengaktifkan animasi "keluar".
65+
- Bagian UI yang dibungkus dalam `<Activity mode="hidden">` tidak disertakan dalam respons SSR.
66+
- Bagian UI yang dibungkus dalam `<Activity mode="visible">` akan melakukan hidrasi (hydrate) pada prioritas yang lebih rendah daripada konten lainnya.
6767

6868
---
6969

70-
## Usage {/*usage*/}
70+
## Penggunaan {/*usage*/}
7171

72-
### Pre-render part of the UI {/*pre-render-part-of-the-ui*/}
72+
### Melakukan pra-render bagian UI {/*pre-render-part-of-the-ui*/}
7373

74-
You can pre-render part of the UI using `<Activity mode="hidden">`:
74+
Anda dapat melakukan pra-render bagian UI menggunakan `<Activity mode="hidden">`:
7575

7676
```js
7777
<Activity mode={tab === "posts" ? "visible" : "hidden"}>
7878
<PostsTab />
7979
</Activity>
8080
```
8181

82-
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.
82+
Saat Activity dirender dengan `mode="hidden"`, `children` tidak terlihat di halaman, tetapi dirender pada prioritas yang lebih rendah daripada konten yang terlihat di halaman.
8383

84-
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.
84+
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.
8585

86-
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:
86+
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:
8787

8888
<Sandpack>
8989

@@ -276,9 +276,9 @@ b { display: inline-block; margin-right: 10px; }
276276

277277
</Sandpack>
278278

279-
In this example, the user needs to wait for the posts to load when clicking on the "Posts" tab.
279+
Dalam contoh ini, pengguna perlu menunggu postingan dimuat saat mengklik tab "Posts".
280280

281-
We can reduce the delay for the "Posts" tab by pre-rendering the inactive Tabs with a hidden `<Activity>`:
281+
Kita dapat mengurangi penundaan untuk tab "Posts" dengan melakukan pra-render Tab yang tidak aktif dengan `<Activity>` yang tersembunyi:
282282

283283
<Sandpack>
284284

@@ -470,22 +470,22 @@ b { display: inline-block; margin-right: 10px; }
470470

471471
---
472472

473-
### Keeping state for part of the UI {/*keeping-state-for-part-of-the-ui*/}
473+
### Menyimpan status untuk bagian UI {/*keeping-state-for-part-of-the-ui*/}
474474

475475

476-
You can keep state for parts of the UI by switching `<Activity>` from "visible" to "hidden":
476+
Anda dapat menyimpan status untuk bagian UI dengan mengalihkan `<Activity>` dari "visible" ke "hidden":
477477

478478
```js
479479
<Activity mode={tab === "posts" ? "visible" : "hidden"}>
480480
<PostsTab />
481481
</Activity>
482482
```
483483

484-
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.
484+
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.
485485

486-
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.
486+
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.
487487

488-
In the following example from [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), the `ContactTab` includes a `<textarea>` with a draft message to send. If you enter some text and change to a different tab, then when you click the “Contact” tab again, the draft message is lost:
488+
Dalam contoh berikut dari [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), `ContactTab` menyertakan `<textarea>` dengan pesan draf untuk dikirim. Jika Anda memasukkan beberapa teks dan beralih ke tab lain, maka saat Anda mengklik tab “Contact” lagi, pesan draf akan hilang:
489489

490490

491491
<Sandpack>
@@ -679,7 +679,7 @@ b { display: inline-block; margin-right: 10px; }
679679

680680
</Sandpack>
681681

682-
This results in losing DOM state the user has input. We can keep the state for the Contact tab by hiding the inactive Tabs with `<Activity>`:
682+
Hal ini mengakibatkan hilangnya status DOM yang telah dimasukkan pengguna. Kita dapat mempertahankan status untuk tab Contact dengan menyembunyikan Tab yang tidak aktif dengan `<Activity>`:
683683

684684

685685
<Sandpack>
@@ -872,15 +872,15 @@ b { display: inline-block; margin-right: 10px; }
872872

873873
---
874874

875-
## Troubleshooting {/*troubleshooting*/}
875+
## Pemecahan Masalah {/*troubleshooting*/}
876876

877-
### Effects don't mount when an Activity is hidden {/*effects-dont-mount-when-an-activity-is-hidden*/}
877+
### Efek tidak di-*mount* saat Activity tersembunyi {/*effects-dont-*mount*-when-an-activity-is-hidden*/} {/*efek-tidak-di-mount-saat-activity-tersembunyi-effects-dont-mount-when-an-activity-is-hidden*/}
878878

879-
When an `<Activity>` is "hidden", all Effects are unmounted. Conceptually, the component is unmounted, but React saves the state for later.
879+
Saat `<Activity>` "hidden", semua Efek di-*unmount*. Secara konseptual, komponen di-*unmount*, tetapi React menyimpan status untuk nanti.
880880

881-
This is a feature of Activity because it means subscriptions won't be subscribed for hidden parts of the UI, reducing the amount of work for hidden content. It also means cleanup, such as pausing a video (which would be expected if you unmounted without Activity) will fire. When an Activity switches to "visible", it will mount by creating the Effects, which will subscribe and play the video.
881+
Ini adalah fitur Activity karena berarti langganan tidak akan dilanggan untuk bagian UI yang tersembunyi, mengurangi jumlah pekerjaan untuk konten yang tersembunyi. Ini juga berarti pembersihan, seperti menjeda video (yang diharapkan jika Anda men-*unmount* tanpa Activity) akan aktif. Saat Activity beralih ke "visible", ia akan di-*mount* dengan membuat Efek, yang akan berlangganan dan memutar video.
882882

883-
Consider the following example, where a different video is played for each button:
883+
Pertimbangkan contoh berikut, di mana video yang berbeda diputar untuk setiap tombol:
884884

885885

886886
<Sandpack>
@@ -953,7 +953,7 @@ video { width: 300px; margin-top: 10px; }
953953
</Sandpack>
954954

955955

956-
Whenever you change videos and come back, the video re-loads from the beginning. To maintain the state, you may try to render both videos, and hide the inactive video in `display: none`. However, this will cause both videos to play at the same time:
956+
Setiap kali Anda mengganti video dan kembali, video dimuat ulang dari awal. Untuk mempertahankan status, Anda dapat mencoba merender kedua video, dan menyembunyikan video yang tidak aktif dalam `display: none`. Namun, ini akan menyebabkan kedua video diputar secara bersamaan:
957957

958958

959959
<Sandpack>
@@ -1045,9 +1045,9 @@ video { width: 300px; margin-top: 10px; }
10451045

10461046
</Sandpack>
10471047

1048-
This is similar to what would happen if Activity mounted Effects when hidden. Similarly, if Activity didn't unmount Effects when hiding, the videos would continue to play in the background.
1048+
Ini mirip dengan apa yang akan terjadi jika Activity *mount* Efek saat tersembunyi. Demikian pula, jika Activity tidak *unmount* Efek saat menyembunyikan, video akan terus diputar di latar belakang.
10491049

1050-
Activity solves this by not creating Effects when first rendered as "hidden" and destroying all Effects when switching from "visible" to "hidden":
1050+
Activity memecahkan masalah ini dengan tidak membuat Efek saat pertama kali dirender sebagai "hidden" dan menghancurkan semua Efek saat beralih dari "visible" ke "hidden":
10511051

10521052

10531053
<Sandpack>
@@ -1154,8 +1154,8 @@ video { width: 300px; margin-top: 10px; }
11541154

11551155
</Sandpack>
11561156

1157-
For this reason, it's best to think of Activity conceptually as "unmounting" and "remounting" the component, but saving the React or DOM state for later. In practice, this works as expected if you have followed the [You Might Not Need an Effect](learn/you-might-not-need-an-effect) guide. To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects.
1157+
Oleh karena itu, yang terbaik adalah menganggap Activity secara konseptual sebagai "unmounting" dan "remounting" komponen, tetapi menyimpan status React atau DOM untuk nanti. Dalam praktiknya, ini berfungsi seperti yang diharapkan jika Anda telah mengikuti panduan [Anda Mungkin Tidak Memerlukan Efek](learn/you-might-not-need-an-effect). Untuk menemukan Efek yang bermasalah dengan segera, kami merekomendasikan penambahan [`<StrictMode>`](/reference/react/StrictMode) yang akan segera melakukan unmount dan mount Activity untuk menangkap efek samping yang tidak terduga.
11581158

1159-
### My hidden Activity is not rendered in SSR {/*my-hidden-activity-is-not-rendered-in-ssr*/}
1159+
### Activity saya yang tersembunyi tidak dirender di SSR {/*my-hidden-activity-is-not-rendered-in-ssr*/}
11601160

1161-
When you use `<Activity mode="hidden">` during server-side rendering, the content of the Activity will not be included in the SSR response. This is because the content is not visible on the page and is not needed for the initial render. If you need to include the content in the SSR response, you can use a different approach like [`useDeferredValue`](/reference/react/useDeferredValue) to defer rendering of the content.
1161+
Saat Anda menggunakan `<Activity mode="hidden">` selama rendering sisi server (SSR), konten Activity tidak akan disertakan dalam respons SSR. Ini karena konten tidak terlihat di halaman dan tidak diperlukan untuk render awal. Jika Anda perlu menyertakan konten dalam respons SSR, Anda dapat menggunakan pendekatan yang berbeda seperti [`useDeferredValue`](/reference/react/useDeferredValue) untuk menunda rendering konten.

0 commit comments

Comments
 (0)