Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions src/content/reference/react/cacheSignal.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ title: cacheSignal

<RSC>

`cacheSignal` is currently only used with [React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components).
`cacheSignal` saat ini hanya digunakan dengan [React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components).

</RSC>

<Intro>

`cacheSignal` allows you to know when the `cache()` lifetime is over.
`cacheSignal` memungkinkan Anda mengetahui kapan masa pakai `cache()` telah berakhir.

```js
const signal = cacheSignal();
Expand All @@ -22,11 +22,11 @@ const signal = cacheSignal();

---

## Reference {/*reference*/}
## Referensi {/*reference*/}

### `cacheSignal` {/*cachesignal*/}

Call `cacheSignal` to get an `AbortSignal`.
Panggil `cacheSignal` untuk mendapatkan `AbortSignal`.

```js {3,7}
import {cacheSignal} from 'react';
Expand All @@ -35,32 +35,32 @@ async function Component() {
}
```

When React has finished rendering, the `AbortSignal` will be aborted. This allows you to cancel any in-flight work that is no longer needed.
Rendering is considered finished when:
- React has successfully completed rendering
- the render was aborted
- the render has failed
Ketika React telah selesai me-*render*, `AbortSignal` akan dibatalkan (*aborted*). Ini memungkinkan Anda membatalkan pekerjaan yang sedang berjalan (*in-flight work*) yang sudah tidak lagi diperlukan.
*Rendering* dianggap selesai ketika:
- React telah berhasil menyelesaikan *render*
- Proses *render* dibatalkan
- Proses *render* mengalami kegagalan

#### Parameters {/*parameters*/}
#### Parameter {/*parameters*/}

This function does not accept any parameters.
Fungsi ini tidak menerima parameter apa pun.

#### Returns {/*returns*/}
#### Nilai Kembalian {/*returns*/}

`cacheSignal` returns an `AbortSignal` if called during rendering. Otherwise `cacheSignal()` returns `null`.
`cacheSignal` mengembalikan `AbortSignal` jika dipanggil selama proses *rendering*. Selain itu, `cacheSignal()` mengembalikan nilai `null`.

#### Caveats {/*caveats*/}
#### Peringatan {/*caveats*/}

- `cacheSignal` is currently for use in [React Server Components](/reference/rsc/server-components) only. In Client Components, it will always return `null`. In the future it will also be used for Client Component when a client cache refreshes or invalidates. You should not assume it'll always be null on the client.
- If called outside of rendering, `cacheSignal` will return `null` to make it clear that the current scope isn't cached forever.
- `cacheSignal` saat ini hanya ditujukan untuk penggunaan di dalam [React Server Components](/reference/rsc/server-components). Pada Komponen Klien (*Client Components*), fungsi ini akan selalu mengembalikan `null`. Di masa mendatang fungsi ini juga akan digunakan untuk Komponen Klien ketika *cache* klien disegarkan atau diinvalidasi. Anda sebaiknya tidak mengasumsikan nilainya akan selalu `null` di sisi klien.
- Jika dipanggil di luar proses *rendering*, `cacheSignal` akan mengembalikan `null` untuk memperjelas bahwa cakupan (*scope*) saat ini tidak di-*cache* selamanya.

---

## Usage {/*usage*/}
## Penggunaan {/*usage*/}

### Cancel in-flight requests {/*cancel-in-flight-requests*/}
### Membatalkan permintaan yang sedang berjalan {/*cancel-in-flight-requests*/}

Call <CodeStep step={1}>`cacheSignal`</CodeStep> to abort in-flight requests.
Panggil <CodeStep step={1}>`cacheSignal`</CodeStep> untuk membatalkan permintaan yang sedang berlangsung.

```js [[1, 4, "cacheSignal()"]]
import {cache, cacheSignal} from 'react';
Expand All @@ -71,21 +71,21 @@ async function Component() {
```

<Pitfall>
You can't use `cacheSignal` to abort async work that was started outside of rendering e.g.
Anda tidak dapat menggunakan `cacheSignal` untuk membatalkan pekerjaan asinkron (*async work*) yang dimulai di luar proses *rendering*, contohnya:

```js
import {cacheSignal} from 'react';
// 🚩 Pitfall: The request will not actually be aborted if the rendering of `Component` is finished.
// 🚩 Jebakan: Permintaan sebenarnya tidak akan dibatalkan jika proses rendering `Component` telah selesai.
const response = fetch(url, { signal: cacheSignal() });
async function Component() {
await response;
}
```
</Pitfall>

### Ignore errors after React has finished rendering {/*ignore-errors-after-react-has-finished-rendering*/}
### Mengabaikan galat setelah React selesai me-render {/*ignore-errors-after-react-has-finished-rendering*/}

If a function throws, it may be due to cancellation (e.g. <CodeStep step={1}>the Database connection</CodeStep> has been closed). You can use the <CodeStep step={2}>`aborted` property</CodeStep> to check if the error was due to cancellation or a real error. You may want to <CodeStep step={3}>ignore errors</CodeStep> that were due to cancellation.
Jika sebuah fungsi melempar *error*, hal tersebut mungkin disebabkan oleh pembatalan (misalnya <CodeStep step={1}>koneksi Basis Data</CodeStep> telah ditutup). Anda dapat menggunakan <CodeStep step={2}>properti `aborted`</CodeStep> untuk memeriksa apakah galat tersebut disebabkan oleh pembatalan atau merupakan galat yang sebenarnya. Anda mungkin ingin <CodeStep step={3}>mengabaikan galat</CodeStep> yang disebabkan oleh pembatalan.

```js [[1, 2, "./database"], [2, 8, "cacheSignal()?.aborted"], [3, 12, "return null"]]
import {cacheSignal} from "react";
Expand All @@ -96,7 +96,7 @@ async function getData(id) {
return await queryDatabase(id);
} catch (x) {
if (!cacheSignal()?.aborted) {
// only log if it's a real error and not due to cancellation
// hanya catat log jika itu merupakan galat sebenarnya dan bukan karena pembatalan
logError(x);
}
return null;
Expand Down
Loading