Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: translate API Reference -> react -> useInsertionEffect #516

Merged
merged 12 commits into from Jul 3, 2023
Merged

docs: translate API Reference -> react -> useInsertionEffect #516

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f3e0bc3
docs(Hooks: useInsertionEffect): Intro
igihcksn Apr 30, 2023
a570574
docs(Hooks: useInsertionEffect): Reference
igihcksn Apr 30, 2023
0e2dba1
docs(Hooks: useInsertionEffect): Usage
igihcksn Apr 30, 2023
7c64f46
docs(Hooks: useInsertionEffect): Fix conflict from upstream/main
igihcksn May 21, 2023
24448f8
docs(Hooks: useInsertionEffect): Update translation base on feedback
igihcksn May 24, 2023
effbd0c
docs(Hooks: useInsertionEffect): Fix typo text
igihcksn May 25, 2023
8403794
docs(Hooks: useInsertionEffect): Fix missplleing
igihcksn May 26, 2023
263731e
docs(Hooks: useInsertionEffect): Fix misspelling in heading
igihcksn May 26, 2023
cdc1055
docs(Hooks: useInsertionEffect): Fix misspelling in heading #2
igihcksn May 26, 2023
67bb170
Merge branch 'main' into react-hooks-useinsertioneffect
mazipan May 30, 2023
efa289a
Merge branch 'main' into react-hooks-useinsertioneffect
mazipan Jun 22, 2023
631879e
Apply suggestions from code review
resir014 Jul 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
62 changes: 31 additions & 31 deletions src/content/reference/react/useInsertionEffect.md
View file
Open in desktop
Expand Up @@ -4,13 +4,13 @@ title: useInsertionEffect

<Pitfall>

`useInsertionEffect` is for CSS-in-JS library authors. Unless you are working on a CSS-in-JS library and need a place to inject the styles, you probably want [`useEffect`](/reference/react/useEffect) or [`useLayoutEffect`](/reference/react/useLayoutEffect) instead.
`useInsertionEffect` digunakan untuk pengguna library CSS-in-JS. Kecuali jika Anda sedang mengerjakan sebuah pustaka CSS-in-JS dan butuh sebuah tempat untuk menyisipkan *style*, Anda mungkin lebih menginginkan [`useEffect`](/reference/react/useEffect) atau [`useLayoutEffect`](/reference/react/useLayoutEffect).

</Pitfall>

<Intro>

`useInsertionEffect` is a version of [`useEffect`](/reference/react/useEffect) that fires before any DOM mutations.
`useInsertionEffect` adalah sebuah versi dari [`useEffect`](/reference/react/useEffect) yang akan berjalan sebelum adanya mutasi DOM.

```js
useInsertionEffect(setup, dependencies?)
Expand All @@ -22,11 +22,11 @@ useInsertionEffect(setup, dependencies?)

---

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

### `useInsertionEffect(setup, dependencies?)` {/*useinsertioneffect*/}

Call `useInsertionEffect` to insert the styles before any DOM mutations:
Panggil `useInsertionEffect` untuk menyertakan sebuah *style* sebelum terjadinya mutasi DOM:

```js
import { useInsertionEffect } from 'react';
Expand All @@ -40,31 +40,31 @@ function useCSS(rule) {
}
```

[See more examples below.](#usage)
[Lihat contoh lain di bawah ini.](#usage)

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

* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your component is added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. Before your component is removed from the DOM, React will run your cleanup function.
* `setup`: Fungsi berisi logika Efek Anda. Fungsi *setup* juga dapat secara opsional mengembalikan fungsi *pembersihan* (*cleanup*). Sebelum komponen ditambahkan ke DOM, React akan menjalankan fungsi *setup*. Setelah setiap *render* ulang dengan dependensi yang berubah, React akan terlebih dahulu menjalankan fungsi *pembersihan* (*cleanup*) (jika Anda memberikannya) dengan nilai lama. Selanjutnya, React akan menjalankan fungsi *setup* dengan nilai baru. Sebelum komponen dihapus dari DOM, React akan menjalankan fungsi *pembersihan* (*cleanup*).

* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. If you don't specify the dependencies at all, your Effect will re-run after every re-render of the component.
* **opsional** `dependencies`: Daftar semua nilai reaktif yang dirujuk di dalam kode `setup`. Nilai reaktif termasuk *props*, *state*, dan semua variabel dan fungsi yang dideklarasikan langsung di dalam komponen. Jika linter Anda telah [dikonfigurasi untuk React](/learn/editor-setup#linting), maka *linter* tersebut akan memverifikasi bahwa setiap nilai reaktif sudah diatur dengan benar sebagai dependensi. Daftar dependensi ini harus memiliki jumlah *item* yang konstan dan ditulis secara *inline* seperti `[dep1, dep2, dep3]`. React akan membandingkan setiap dependensi dengan nilai lama menggunakan algoritma perbandingan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Jika Anda tidak menentukan sebuah dependensi sama sekali, efek akan dijalankan ulang setelah setiap *re-render* dari komponen.

#### Returns {/*returns*/}

`useInsertionEffect` returns `undefined`.
`useInsertionEffect` mengembalikan `undefined`.

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

* Effects only run on the client. They don't run during server rendering.
* You can't update state from inside `useInsertionEffect`.
* By the time `useInsertionEffect` runs, refs are not attached yet, and DOM is not yet updated.
* Efek hanya berjalan di sisi klien. Efek tidak berjalan ketika *server rendering*.
* Anda tidak dapat mengupdate *state* dari dalam `useInsertionEffect`.
* Pada saat `useInsertionEffect` berjalan, *refs* belum terpasang, dan DOM belum diperbarui.

---

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

### Injecting dynamic styles from CSS-in-JS libraries {/*injecting-dynamic-styles-from-css-in-js-libraries*/}
### Menyisipkan style dinamis dari pustaka CSS-in-JS {/*injecting-dynamic-styles-from-css-in-js-libraries*/}

Traditionally, you would style React components using plain CSS.
Secara tradisional, kamu dapat menata komponen-komponen React menggunakan CSS biasa.

```js
// In your JS file:
Expand All @@ -74,28 +74,28 @@ Traditionally, you would style React components using plain CSS.
.success { color: green; }
```

Some teams prefer to author styles directly in JavaScript code instead of writing CSS files. This usually requires using a CSS-in-JS library or a tool. There are three common approaches to CSS-in-JS:
Beberapa tim lebih memilih untuk menulis *style* secara langsung di dalam pada kode Javascript daripada menuliskan file CSS terpisah. Biasanya ini memerlukan penggunaan sebuah pustaka CSS-in-JS atau sebuah alat. Terdapat 3 pendekatan umum dalam CSS-in-JS:

1. Static extraction to CSS files with a compiler
2. Inline styles, e.g. `<div style={{ opacity: 1 }}>`
3. Runtime injection of `<style>` tags
1. Ekstraksi statis ke dalam file-file CSS dengan sebuah kompiler
2. *Style* *inline*, e.g. `<div style={{ opacity: 1 }}>`
3. Injeksi *runtime* tag `<style>`

If you use CSS-in-JS, we recommend a combination of the first two approaches (CSS files for static styles, inline styles for dynamic styles). **We don't recommend runtime `<style>` tag injection for two reasons:**
Jika kamu menggunakan CC-in-JS, kami merekomendasikan sebuah kombinasi dari dua pendekatan pertama (File CSS untuk *style* statis, *inline* untuk *style* dinamis). **Kami tidak merekomendasikan injeksi *runtime* tag `<style>` karena dua alasan:**

1. Runtime injection forces the browser to recalculate the styles a lot more often.
2. Runtime injection can be very slow if it happens at the wrong time in the React lifecycle.
1. Injeksi *runtime* memaksa peramban untuk menghitung ulang *style* dengan lebih sering.
2. Injeksi *runtime* bisa lebih lambat jika injeksi terjadi pada waktu yang salah pada *React lifecycle*.

The first problem is not solvable, but `useInsertionEffect` helps you solve the second problem.
Masalah pertama tidak dapat diselesaikan, tapi `useInsertionEffect` membantu Anda menyelesaikan masalah kedua.

Call `useInsertionEffect` to insert the styles before any DOM mutations:
Panggil `useInsertionEffect` untuk menyertakan sebuah *style* sebelum terjadinya mutasi DOM:

```js {4-11}
// Inside your CSS-in-JS library
let isInserted = new Set();
function useCSS(rule) {
useInsertionEffect(() => {
// As explained earlier, we don't recommend runtime injection of <style> tags.
// But if you have to do it, then it's important to do in useInsertionEffect.
// Seperti yang sudah dijelaskan sebelumnya, kami tidak merekomendasikan injeksi *runtime* dari tag <style>.
// Tapi jika Anda harus melakukannya, maka sangat penting untuk melakukannya di dalam useInsertionEffect.
if (!isInserted.has(rule)) {
isInserted.add(rule);
document.head.appendChild(getStyleForRule(rule));
Expand All @@ -110,7 +110,7 @@ function Button() {
}
```

Similarly to `useEffect`, `useInsertionEffect` does not run on the server. If you need to collect which CSS rules have been used on the server, you can do it during rendering:
Sama seperti `useEffect`, `useInsertionEffect` tidak berjalan di sisi *server*. Jika Anda ingin mengumpulkan aturan CSS yang telah digunakan pada *server*, Anda dapat melakukannya saat rendering:

```js {1,4-6}
let collectedRulesSet = new Set();
Expand All @@ -126,14 +126,14 @@ function useCSS(rule) {
}
```

[Read more about upgrading CSS-in-JS libraries with runtime injection to `useInsertionEffect`.](https://github.com/reactwg/react-18/discussions/110)
[Baca lebih lanjut tentang memperbarui pustaka CSS-in-JS dengan injeksi *runtime* ke `useInsertionEffect`.](https://github.com/reactwg/react-18/discussions/110)

<DeepDive>

#### How is this better than injecting styles during rendering or useLayoutEffect? {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
#### Bagaimana ini bisa lebih baik daripada menyisipkan style saat render atau useLayoutEffect? {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
mazipan marked this conversation as resolved.
Show resolved Hide resolved

If you insert styles during rendering and React is processing a [non-blocking update,](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) the browser will recalculate the styles every single frame while rendering a component tree, which can be **extremely slow.**
Jika kamu menambahkan *style* saat rendering dan React sedang memproses [non-blocking update,](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) peramban akan menghitung ulang *style* setiap *frame* saat me-*render* sebuah pohon (*tree*) komponen, yang dapat **sangat lambat.**

`useInsertionEffect` is better than inserting styles during [`useLayoutEffect`](/reference/react/useLayoutEffect) or [`useEffect`](/reference/react/useEffect) because it ensures that by the time other Effects run in your components, the `<style>` tags have already been inserted. Otherwise, layout calculations in regular Effects would be wrong due to outdated styles.
`useInsertionEffect` lebih baik daripada menyertakan *style* saat [`useLayoutEffect`](/reference/react/useLayoutEffect) atau [`useEffect`](/reference/react/useEffect) karena `useInsertionEffect` memastikan pada saat efek lain berjalan di dalam komponen Anda, tag `<style>` sudah terpasang. Jika tidak, perhitungan tata letak pada efek biasa akan salah karena *style* yang sudah usang.

</DeepDive>