From f3e0bc37b891e915f765bbc89092f3d8887178ff Mon Sep 17 00:00:00 2001 From: Igihcksn Date: Sun, 30 Apr 2023 22:15:39 +0700 Subject: [PATCH 1/9] docs(Hooks: useInsertionEffect): Intro --- src/content/reference/react/useInsertionEffect.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md index 5c92db2e6..69fca7b8d 100644 --- a/src/content/reference/react/useInsertionEffect.md +++ b/src/content/reference/react/useInsertionEffect.md @@ -4,13 +4,13 @@ title: useInsertionEffect -`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, Sudah pasti Anda memilih [`useEffect`](/reference/react/useEffect) atau [`useLayoutEffect`](/reference/react/useLayoutEffect) daripada sebelumya. -`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?) From a5705745261b488b68b40ba0ebdd869f6d225f9e Mon Sep 17 00:00:00 2001 From: Igihcksn Date: Sun, 30 Apr 2023 23:11:15 +0700 Subject: [PATCH 2/9] docs(Hooks: useInsertionEffect): Reference --- .../reference/react/useInsertionEffect.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md index 69fca7b8d..21bd559b4 100644 --- a/src/content/reference/react/useInsertionEffect.md +++ b/src/content/reference/react/useInsertionEffect.md @@ -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'; @@ -40,23 +40,23 @@ function useCSS(rule) { } ``` -[See more examples below.](#usage) +[Lihat contoh lain dibawah 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 first 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 one last time. +* `setup`: Fungsi berisi logika Efek Anda. Fungsi *setup* juga dapat secara opsional mengembalikan fungsi *pembersihan* (*cleanup*). Sebelum komponen pertama kali ditambahkan ke DOM, React akan menjalankan fungsi *setup*. Setelah setiap *re-render* dengan dependensi yang berubah, React akan terlebih dahulu menjalankan fungsi pembersihan (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 untuk terakhir kali. -* **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. --- From 0e2dba1a2b3be91fd57033eeee878cf736ad1e83 Mon Sep 17 00:00:00 2001 From: Igihcksn Date: Mon, 1 May 2023 00:28:27 +0700 Subject: [PATCH 3/9] docs(Hooks: useInsertionEffect): Usage --- .../reference/react/useInsertionEffect.md | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md index 21bd559b4..d45a87228 100644 --- a/src/content/reference/react/useInsertionEffect.md +++ b/src/content/reference/react/useInsertionEffect.md @@ -60,11 +60,11 @@ function useCSS(rule) { --- -## Usage {/*usage*/} +## Penggunaan {/*usage*/} -### Injecting dynamic styles from CSS-in-JS libraries {/*injecting-dynamic-styles-from-css-in-js-libraries*/} +### Menyisipkan style dimanis fari 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: @@ -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. `
` -3. Runtime injection of `