diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index fdbc50b3e..6f7536d08 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -4,13 +4,13 @@ title: useLayoutEffect
-`useLayoutEffect` can hurt performance. Prefer [`useEffect`](/reference/react/useEffect) when possible.
+`useLayoutEffect` dapat memperburuk kinerja. Gunakan [`useEffect`](/reference/react/useEffect) bila memungkinkan.
-`useLayoutEffect` is a version of [`useEffect`](/reference/react/useEffect) that fires before the browser repaints the screen.
+`useLayoutEffect` adalah versi [`useEffect`](/reference/react/useEffect) yang dijalankan sebelum peramban melukis ulang (*repaint*) layar.
```js
useLayoutEffect(setup, dependencies?)
@@ -22,11 +22,11 @@ useLayoutEffect(setup, dependencies?)
---
-## Reference {/*reference*/}
+## Referensi {/*reference*/}
### `useLayoutEffect(setup, dependencies?)` {/*useinsertioneffect*/}
-Call `useLayoutEffect` perform the layout measurements before the browser repaints the screen:
+Panggil `useLayoutEffect` untuk mengukur tata letak sebelum peramban melukis ulang layar:
```js
import { useState, useRef, useLayoutEffect } from 'react';
@@ -43,71 +43,71 @@ function Tooltip() {
```
-[See more examples below.](#usage)
+[Lihat contoh lainnya 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 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. If you omit this argument, 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 perbandingan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Jika argumen ini diabaikan, efek akan dijalankan ulang setelah setiap *re-render* dari komponen.
#### Returns {/*returns*/}
-`useLayoutEffect` returns `undefined`.
+`useLayoutEffect` mengembalikan `undefined`.
#### Caveats {/*caveats*/}
-* `useLayoutEffect` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a component and move the Effect there.
+* `useLayoutEffect` adalah sebuah Hook, sehingga hanya dapat memanggilnya **di tingkat atas komponen** ataupun di *custom* Hooks Anda. Serta tidak dapat dipanggil di dalam perulangan ataupun percabangan. Bila diperlukan, ekstrak komponen dan pindahkan Efek ke dalam komponen tersebut.
-* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, [implement the cleanup function.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)
+* Ketika Strict Mode aktif, React akan **menjalankan siklus *setup*+pembersihan khusus pengembangan *(development-only)*** sebelum menjalankan *setup* sebenarnya. Uji ketahanan *(Stress-test)* tersebut memastikan logika pembersihan "mencerminkan" logika *setup* dan pembersihan tersebut dapat menghentikan atau membatalkan apa pun yang sedang dilakukan fungsi *setup*. Jika hal ini menyebabkan masalah, maka [implementasikan fungsi pembersihan.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)
-* If some of your dependencies are objects or functions defined inside the component, there is a risk that they will **cause the Effect to re-run more often than needed.** To fix this, remove unnecessary [object](/reference/react/useEffect#removing-unnecessary-object-dependencies) and [function](/reference/react/useEffect#removing-unnecessary-function-dependencies) dependencies. You can also [extract state updates](/reference/react/useEffect#updating-state-based-on-previous-state-from-an-effect) and [non-reactive logic](/reference/react/useEffect#reading-the-latest-props-and-state-from-an-effect) outside of your Effect.
+* Jika beberapa dependensi merupakan objek atau fungsi yang didefinisikan di dalam komponen, akan timbul risiko **Efek dijalankan berulang kali lebih sering dari yang dibutuhkan.** Untuk memperbaiki ini, hilangkan dependensi [objek](/reference/react/useEffect#removing-unnecessary-object-dependencies) dan [fungsi](/reference/react/useEffect#removing-unnecessary-function-dependencies) yang tidak dibutuhkan. Anda juga dapat mengekstrak [pembaruan *state*](/reference/react/useEffect#updating-state-based-on-previous-state-from-an-effect) dan [logika non-reaktif](/reference/react/useEffect#reading-the-latest-props-and-state-from-an-effect) diluar dari efek.
-* Effects **only run on the client.** They don't run during server rendering.
+* Efek **hanya berjalan di sisi klien**. Efek tidak berjalan ketika *server rendering*.
-* The code inside `useLayoutEffect` and all state updates scheduled from it **block the browser from repainting the screen.** When used excessively, this makes your app slow. When possible, prefer [`useEffect`.](/reference/react/useEffect)
+* Kode di dalam `useLayoutEffect` serta semua pembaruan *state* yang telah dijadwalkan akan **memblokir peramban untuk melukis ulang layar.** Penggunaan berlebihan dapat menyebabkan aplikasi Anda lambat. Jika memungkinkan, gunakan [`useEffect`](/reference/react/useEffect).
---
-## Usage {/*usage*/}
+## Penggunaan {/*usage*/}
-### Measuring layout before the browser repaints the screen {/*measuring-layout-before-the-browser-repaints-the-screen*/}
+### Mengukur tata letak sebelum peramban melukis ulang layar {/*measuring-layout-before-the-browser-repaints-the-screen*/}
-Most components don't need to know their position and size on the screen to decide what to render. They only return some JSX. Then the browser calculates their *layout* (position and size) and repaints the screen.
+Sebagian besar komponen tidak perlu mengetahui posisi dan ukuran di layar untuk memutuskan apa yang harus dirender. Komponen hanya mengembalikan beberapa JSX. Selanjutnya, peramban akan mengukur *tata letak* (posisi dan ukuran) dan melukis ulang layar.
-Sometimes, that's not enough. Imagine a tooltip that appears next to some element on hover. If there's enough space, the tooltip should appear above the element, but if it doesn't fit, it should appear below. In order to render the tooltip at the right final position, you need to know its height (i.e. whether it fits at the top).
+Terkadang, itu tidak cukup. Bayangkan sebuah *tooltip* berada di sebelah elemen tertentu saat diarahkan (*hover*). Jika ruang mencukupi, posisi *tooltip* harus berada di atas elemen tersebut. Tetapi, jika tidak cukup, posisi *tooltip* harus berada di bawah. Untuk merender *tooltip* di posisi akhir yang tepat, maka Anda harus mengetahui ketinggiannya (yaitu, apakah muat berada di atas).
-To do this, you need to render in two passes:
+Untuk melakukan hal tersebut, Anda perlu merender dalam dua tahap:
-1. Render the tooltip anywhere (even with a wrong position).
-2. Measure its height and decide where to place the tooltip.
-3. Render the tooltip *again* in the correct place.
+1. Merender *tooltip* di mana saja (bahkan dengan posisi yang salah).
+2. Mengukur tingginya dan menentukan posisi *tooltip* tersebut.
+3. Merender ulang *tooltip* agar berada di posisi yang tepat.
-**All of this needs to happen before the browser repaints the screen.** You don't want the user to see the tooltip moving. Call `useLayoutEffect` to perform the layout measurements before the browser repaints the screen:
+**Seluruh proses tersebut harus terjadi sebelum peramban melukis ulang layar.** Pengguna tidak ingin melihat *tooltip* bergerak. Panggil `useLayoutEffect` untuk mengukur tata letak sebelum peramban melukis ulang layar:
```js {5-8}
function Tooltip() {
const ref = useRef(null);
- const [tooltipHeight, setTooltipHeight] = useState(0); // You don't know real height yet
+ const [tooltipHeight, setTooltipHeight] = useState(0); // Belum mengetahui ketinggian tooltip sebenarnya
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
- setTooltipHeight(height); // Re-render now that you know the real height
+ setTooltipHeight(height); // Lakukan re-render setelah mengetahui ketinggian tooltip
}, []);
- // ...use tooltipHeight in the rendering logic below...
+ // ...gunakan tooltipHeight pada logika render di bawah ini ...
}
```
-Here's how this works step by step:
+Berikut adalah langkah-langkah cara kerja:
-1. `Tooltip` renders with the initial `tooltipHeight = 0` (so the tooltip may be wrongly positioned).
-2. React places it in the DOM and runs the code in `useLayoutEffect`.
-3. Your `useLayoutEffect` [measures the height](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of the tooltip content and triggers an immediate re-render.
-4. `Tooltip` renders again with the real `tooltipHeight` (so the tooltip is correctly positioned).
-5. React updates it in the DOM, and the browser finally displays the tooltip.
+1. `Tooltip` dirender dengan menginisialisasi nilai `tooltipHeight = 0` (Sehingga, memungkinkan *tooltip* berada di posisi yang salah).
+2. React menempatkannya di DOM dan menjalankan kode di `useLayoutEffect`.
+3. `useLayoutEffect`[mengukur tinggi](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) konten `tooltip` dan akan segera memicu *re-render*.
+4. `Tooltip` dirender ulang dengan nilai `tooltipHeight` yang sebenarnya (sehingga *tooltip* berada di posisi yang benar).
+5. React memperbarui DOM dan akhirnya peramban menampilkan *tooltip* tersebut.
-Hover over the buttons below and see how the tooltip adjusts its position depending on whether it fits:
+Arahkan kursor ke tombol berikut dan perhatikan *tooltip* menyesuaikan posisinya tergantung dari ketersediaan ruang:
@@ -120,29 +120,29 @@ export default function App() {
- This tooltip does not fit above the button.
+ Tooltip ini tidak muat di atas tombol
- This is why it's displayed below instead!
+ Ini sebabnya tooltip ditampilkan di bawah
}
>
- Hover over me (tooltip above)
+ Arahkan disini (tooltip berada di atas)
This tooltip fits above the button
+
Tooltip ini muat di atas tombol
}
>
- Hover over me (tooltip below)
+ Arahkan disini (tooltip berada di bawah)
This tooltip fits above the button
+
Tooltip ini muat di atas tombol
}
>
- Hover over me (tooltip below)
+ Arahkan disini (tooltip berada di bawah)
);
@@ -197,7 +197,7 @@ export default function Tooltip({ children, targetRect }) {
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipHeight(height);
- console.log('Measured tooltip height: ' + height);
+ console.log('Hasil pengukuran tinggi tooltip: ' + height);
}, []);
let tooltipX = 0;
@@ -206,7 +206,7 @@ export default function Tooltip({ children, targetRect }) {
tooltipX = targetRect.left;
tooltipY = targetRect.top - tooltipHeight;
if (tooltipY < 0) {
- // It doesn't fit above, so place below.
+ // Tooltip tidak muat di atas, maka diletakkan di bawah
tooltipY = targetRect.bottom;
}
}
@@ -251,13 +251,13 @@ export default function TooltipContainer({ children, x, y, contentRef }) {
-Notice that even though the `Tooltip` component has to render in two passes (first, with `tooltipHeight` initialized to `0` and then with the real measured height), you only see the final result. This is why you need `useLayoutEffect` instead of [`useEffect`](/reference/react/useEffect) for this example. Let's look at the difference in detail below.
+Meskipun komponen `Tooltip` harus dirender dalam dua tahap (pertama, dengan nilai `tooltipHeight` diinisialisasi `0` dan ketika nilai tersebut diukur sesuai dengan tinggi sebenarnya), Anda hanya melihat hasil akhirnya. Ini sebabnya mengapa Anda menggunakan `useLayoutEffect` dibandingkan [`useEffect`](/reference/react/useEffect) untuk kasus contoh tersebut. Mari kita lihat perbedaanya secara detail di bawah ini.
-#### `useLayoutEffect` blocks the browser from repainting {/*uselayouteffect-blocks-the-browser-from-repainting*/}
+#### `useLayoutEffect` memblokir peramban untuk melukis ulang {/*uselayouteffect-blocks-the-browser-from-repainting*/}
-React guarantees that the code inside `useLayoutEffect` and any state updates scheduled inside it will be processed **before the browser repaints the screen.** This lets you render the tooltip, measure it, and re-render the tooltip again without the user noticing the first extra render. In other words, `useLayoutEffect` blocks the browser from painting.
+React menjamin kode di dalam `useLayoutEffect` dan setiap pembaruan *state* yang dijadwalkan akan diproses **sebelum peramban melukis ulang layar.** Hal ini memungkinkan Anda untuk merender *tooltip*, mengukurnya, dan merender ulang kembali *tooltip* tersebut tanpa pengguna menyadari *render* awal tambahan. Dengan kata lain, `useLayoutEffect` memblokir peramban untuk melukis ulang.
@@ -270,29 +270,29 @@ export default function App() {
- This tooltip does not fit above the button.
+ Tooltip ini tidak muat di atas tombol
- This is why it's displayed below instead!
+ Ini sebabnya tooltip ditampilkan di bawah
}
>
- Hover over me (tooltip above)
+ Arahkan disini (tooltip berada di atas)
This tooltip fits above the button
+
Tooltip ini muat di atas tombol
}
>
- Hover over me (tooltip below)
+ Arahkan disini (tooltip berada di bawah)
This tooltip fits above the button
+
Tooltip ini muat di atas tombol
}
>
- Hover over me (tooltip below)
+ Arahkan disini (tooltip berada di bawah)
);
@@ -355,7 +355,7 @@ export default function Tooltip({ children, targetRect }) {
tooltipX = targetRect.left;
tooltipY = targetRect.top - tooltipHeight;
if (tooltipY < 0) {
- // It doesn't fit above, so place below.
+ // Tooltip tidak muat di atas, maka diletakkan di bawah
tooltipY = targetRect.bottom;
}
}
@@ -402,9 +402,9 @@ export default function TooltipContainer({ children, x, y, contentRef }) {
-#### `useEffect` does not block the browser {/*useeffect-does-not-block-the-browser*/}
+#### `useEffect` tidak memblokir peramban {/*useeffect-does-not-block-the-browser*/}
-Here is the same example, but with [`useEffect`](/reference/react/useEffect) instead of `useLayoutEffect`. If you're on a slower device, you might notice that sometimes the tooltip "flickers" and you briefly see its initial position before the corrected position.
+Berikut merupakan contoh identik menggunakan [`useEffect`](/reference/react/useEffect) daripada `useLayoutEffect`. Jika menggunakan perangkat yang lebih lambat, terkadang *tooltip* terlihat "berkedip" dan secara singkat posisi awal *tooltip* terlihat sebelum diperbaiki.
@@ -417,29 +417,29 @@ export default function App() {
- This tooltip does not fit above the button.
+ Tooltip ini tidak muat di atas tombol
- This is why it's displayed below instead!
+ Ini sebabnya tooltip ditampilkan di bawah
}
>
- Hover over me (tooltip above)
+ Arahkan disini (tooltip berada di atas)
This tooltip fits above the button
+
Tooltip ini muat di atas tombol
}
>
- Hover over me (tooltip below)
+ Arahkan disini (tooltip berada di bawah)
This tooltip fits above the button
+
Tooltip ini muat di atas tombol
}
>
- Hover over me (tooltip below)
+ Arahkan disini (tooltip berada di bawah)
);
@@ -502,7 +502,7 @@ export default function Tooltip({ children, targetRect }) {
tooltipX = targetRect.left;
tooltipY = targetRect.top - tooltipHeight;
if (tooltipY < 0) {
- // It doesn't fit above, so place below.
+ // Tooltip tidak muat di atas, maka diletakkan di bawah
tooltipY = targetRect.bottom;
}
}
@@ -547,7 +547,7 @@ export default function TooltipContainer({ children, x, y, contentRef }) {
-To make the bug easier to reproduce, this version adds an artificial delay during rendering. React will let the browser paint the screen before it processes the state update inside `useEffect`. As a result, the tooltip flickers:
+Untuk mempermudah reproduski *bug* ini, versi berikut menambahkan penundaan buatan saat merender. React akan membiarkan peramban melukis ulang layar sebelum memproses pembaruan *state* di dalam `useEffect`. Hasilnya, tooltip berkedip:
@@ -560,29 +560,29 @@ export default function App() {
- This tooltip does not fit above the button.
+ Tooltip ini tidak muat di atas tombol
- This is why it's displayed below instead!
+ Ini sebabnya tooltip ditampilkan di bawah
}
>
- Hover over me (tooltip above)
+ Arahkan disini (tooltip berada di atas)
This tooltip fits above the button
+
Tooltip ini muat di atas tombol
}
>
- Hover over me (tooltip below)
+ Arahkan disini (tooltip berada di bawah)
This tooltip fits above the button
+
Tooltip ini muat di atas tombol
}
>
- Hover over me (tooltip below)
+ Arahkan disini (tooltip berada di bawah)
);
@@ -634,10 +634,10 @@ export default function Tooltip({ children, targetRect }) {
const ref = useRef(null);
const [tooltipHeight, setTooltipHeight] = useState(0);
- // This artificially slows down rendering
+ // Berikut secara artifisial memperlambat proses merender
let now = performance.now();
while (performance.now() - now < 100) {
- // Do nothing for a bit...
+ // Sementara tidak melakukan apa pun...
}
useEffect(() => {
@@ -651,7 +651,7 @@ export default function Tooltip({ children, targetRect }) {
tooltipX = targetRect.left;
tooltipY = targetRect.top - tooltipHeight;
if (tooltipY < 0) {
- // It doesn't fit above, so place below.
+ // Tooltip tidak muat di atas, maka diletakkan di bawah
tooltipY = targetRect.bottom;
}
}
@@ -696,7 +696,7 @@ export default function TooltipContainer({ children, x, y, contentRef }) {
-Edit this example to `useLayoutEffect` and observe that it blocks the paint even if rendering is slowed down.
+Ubah contoh berikut menjadi `useLayoutEffect` kemudian amati proses melukis layar akan terhalang meskipun proses merender diperlambat.
@@ -704,40 +704,38 @@ Edit this example to `useLayoutEffect` and observe that it blocks the paint even
-Rendering in two passes and blocking the browser hurts performance. Try to avoid this when you can.
+Proses merender dua tahap dan memblokir peramban akan menurunkan kinerja. Sebaiknya proses tersebut dihindari.
---
-## Troubleshooting {/*troubleshooting*/}
+## Pemecahan Masalah {/*troubleshooting*/}
-### I'm getting an error: "`useLayoutEffect` does nothing on the server" {/*im-getting-an-error-uselayouteffect-does-nothing-on-the-server*/}
+### Saya menerima *error*: "`useLayoutEffect` does nothing on the server" {/*im-getting-an-error-uselayouteffect-does-nothing-on-the-server*/}
-The purpose of `useLayoutEffect` is to let your component [use layout information for rendering:](#measuring-layout-before-the-browser-repaints-the-screen)
+Tujuan dari `useLayoutEffect` adalah memungkinkan sebuah komponen [menggunakan informasi tata letak untuk *merender*:](#measuring-layout-before-the-browser-repaints-the-screen)
-1. Render the initial content.
-2. Measure the layout *before the browser repaints the screen.*
-3. Render the final content using the layout information you've read.
+1. Merender konten awal.
+2. Mengukur tata letak *sebelum peramban melukis ulang layar.*
+3. Merender konten akhir menggunakan informasi tata letak yang telah dibaca.
-When you or your framework uses [server rendering](/reference/react-dom/server), your React app renders to HTML on the server for the initial render. This lets you show the initial HTML before the JavaScript code loads.
+Ketika Anda atau *framework* Anda menggunakan [*server rendering*](/reference/react-dom/server), aplikasi React Anda dirender menjadi HTML di *server* saat awal merender.
-The problem is that on the server, there is no layout information.
+Masalahnya, di *server* tidak tersedia informasi tentang tata letak.
-In the [earlier example](#measuring-layout-before-the-browser-repaints-the-screen), the `useLayoutEffect` call in the `Tooltip` component lets it position itself correctly (either above or below content) depending on the content height. If you tried to render `Tooltip` as a part of the initial server HTML, this would be impossible to determine. On the server, there is no layout yet! So, even if you rendered it on the server, its position would "jump" on the client after the JavaScript loads and runs.
+Pada [contoh sebelumnya](#measuring-layout-before-the-browser-repaints-the-screen), pemanggilan `useLayoutEffect` pada komponen `Tooltip` memungkinkan posisi *tooltip* disesuaikan dengan benar (antara di atas atau di bawah konten) tergantung pada ketinggian konten. Sedangkan, jika Anda mencoba merender `Tooltip` sebagai bagian dari HTML *server* awal, hal tersebut tidak mungkin dapat dilakukan. Sebab di *server* belum terdapat tata letak! Jadi, meskipun Anda merendernya di *server*, posisi *tooltip* akan "melompat" di sisi klien setelah JavaScript dimuat dan dijalankan.
-Usually, components that rely on layout information don't need to render on the server anyway. For example, it probably doesn't make sense to show a `Tooltip` during the initial render. It is triggered by a client interaction.
+Biasanya, komponen yang bergantung pada informasi tata letak tidak perlu dirender di *server*. Sebagai contoh, tidak akan masuk akal untuk menampilkan `Tooltip` selama *render* awal. Karena hal tersebut dipicu oleh interaksi klien.
-However, if you're running into this problem, you have a few different options:
+Namun, jika mengalami masalah tersebut, terdapat beberapa opsi yang tersedia:
-- Replace `useLayoutEffect` with [`useEffect`.](/reference/react/useEffect) This tells React that it's okay to display the initial render result without blocking the paint (because the original HTML will become visible before your Effect runs).
+- Ubah `useLayoutEffect` menjadi [`useEffect`.](/reference/react/useEffect) Hal tersebut menginformasikan React bahwa hasil *render* awal dapat ditampilkan tanpa memblokir proses melukis (karena HTML asli akan terlihat sebelum Efek dijalankan).
-- Alternatively, [mark your component as client-only.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) This tells React to replace its content up to the closest [``](/reference/react/Suspense) boundary with a loading fallback (for example, a spinner or a glimmer) during server rendering.
-
-- Alternatively, you can render a component with `useLayoutEffect` only after hydration. Keep a boolean `isMounted` state that's initialized to `false`, and set it to `true` inside a `useEffect` call. Your rendering logic can then be like `return isMounted ? : `. On the server and during the hydration, the user will see `FallbackContent` which should not call `useLayoutEffect`. Then React will replace it with `RealContent` which runs on the client only and can include `useLayoutEffect` calls.
-
-- If you synchronize your component with an external data store and rely on `useLayoutEffect` for different reasons than measuring layout, consider [`useSyncExternalStore`](/reference/react/useSyncExternalStore) instead which [supports server rendering.](/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+- Sebagai alternatif, [tandai komponen Anda sebagai khusus klien (*client-only*).](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) Hal tersebut menginformasikan React untuk mengganti kontennya hingga [``](/reference/react/Suspense) terdekat dengan *fallback loading* (Sebagai contoh, *spinner* atau *glimmer*) selama *server rendering*.
+- Sebagai alternatif, Anda dapat merender komponen dengan `useLayoutEffect` hanya setelah proses hidrasi (*hydration*). Tambahkan *state boolean* `isMounted` yang diinisialisasi dengan nilai `false`, dan atur nilainya menjadi `true` di dalam panggilan `useEffect`. Logika merender Anda dapat dituliskan seperti ini: `return isMounted ? : `. Selama di sisi *server* atau proses hidrasi, pengguna akan melihat `FallbackContent` yang tidak memanggil `useLayoutEffect`. Kemudian React akan menggantinya dengan `RealContent` yang hanya dijalankan di sisi klien dan juga dapat mencakup pemanggilan `useLayoutEffect`.
+- Jika Anda menyinkronkan komponen dengan penyimpanan data eksternal menggunakan `useLayoutEffect` untuk penggunaan selain dari pengukuran tata letak, pertimbangkan [`useSyncExternalStore`](/reference/react/useSyncExternalStore) yang [mendukung *server rendering*](reference/react/useSyncExternalStore#adding-support-for-server-rendering) sebagai gantinya.