diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index 60dde938f..4bbd642a0 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -314,7 +314,7 @@ Baca **[Mengoper Props ke sebuah Komponen](/learn/passing-props-to-a-component)*
-## Merender Secara Kondisional {/*conditional-rendering*/}
+## Me-render Secara Kondisional {/*conditional-rendering*/}
Komponen Anda seringkali perlu menampilkan hal-hal yang berbeda tergantung pada kondisi yang berbeda. Di React, Anda dapat me-*render* JSX secara kondisional menggunakan sintaks JavaScript seperti `if` *statements*, `&&`, dan `?:` operator.
@@ -358,11 +358,11 @@ export default function PackingList() {
-Baca **[Merender Secara Kondisional](/learn/conditional-rendering)** untuk mempelajari cara merender konten secara kondisional.
+Baca **[Me-*render* Secara Kondisional](/learn/conditional-rendering)** untuk mempelajari cara me-*render* konten secara kondisional.
-## Merender List {/*rendering-lists*/}
+## Me-render List {/*rendering-lists*/}
Anda akan sering ingin menampilkan beberapa komponen serupa dari koleksi data. Anda dapat menggunakan `filter()` dan `map()` dari JavaScript dengan React untuk menyaring dan mentransformasikan senarai data Anda menjadi senarai komponen.
@@ -458,7 +458,7 @@ h2 { font-size: 20px; }
-Baca **[Merender List](/learn/rendering-lists)** untuk mempelajari cara me-*render* daftar komponen dan cara memilih `key`.
+Baca **[Me-*render* List](/learn/rendering-lists)** untuk mempelajari cara me-*render* daftar komponen dan cara memilih `key`.
diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md
index 6366ac579..684d55da1 100644
--- a/src/content/learn/importing-and-exporting-components.md
+++ b/src/content/learn/importing-and-exporting-components.md
@@ -20,7 +20,7 @@ Keajaiban komponen terletak pada kemampuannya yang dapat digunakan kembali: Anda
## File komponen root {/*the-root-component-file*/}
-Pada [Komponen Pertama Anda](/learn/your-first-component), Anda membuat komponen `Profile` dan komponen `Gallery` yang merender:
+Pada [Komponen Pertama Anda](/learn/your-first-component), Anda membuat komponen `Profile` dan komponen `Gallery` yang me-*render*:
@@ -252,7 +252,7 @@ Pada halaman ini Anda belajar:
Saat ini, `Gallery.js` mengekspor kedua `Profile` dan `Gallery`, yang mana sedikit membingungkan.
-Pindahkan komponen `Profile` pada miliknya sendiri `Profile.js`, dan ubah komponen `App` untuk merender kedua ` ` dan ` ` satu setelah lainnya.
+Pindahkan komponen `Profile` pada miliknya sendiri `Profile.js`, dan ubah komponen `App` untuk me-*render* kedua ` ` dan ` ` satu setelah lainnya.
Anda mungkin menggukanan salah satu dari **default** atau **named** eskpor untuk `Profile`, tetapi pastikan bahwa Anda menggunakan sintaksis impor pada kedua `App.js` dan `Gallery.js`. Anda dapat merujuk pada table dari bagian **deep dive** di atas:
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 1e7ef5e4a..d488a2240 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -303,7 +303,7 @@ Sekarang mari kita lihat file-file dalam kode awal.
#### `App.js` {/*appjs*/}
-Kode dalam `App.js` membuat sebuah _komponen_. Dalam React, komponen adalah bagian dari kode yang dapat digunakan kembali yang merepresentasikan bagian dari antarmuka pengguna. Komponen digunakan untuk merender, mengelola, dan memperbarui elemen UI dalam aplikasi Anda. Mari kita lihat komponen ini baris demi baris untuk melihat apa yang terjadi:
+Kode dalam `App.js` membuat sebuah _komponen_. Dalam React, komponen adalah bagian dari kode yang dapat digunakan kembali yang merepresentasikan bagian dari antarmuka pengguna. Komponen digunakan untuk me-*render*, mengelola, dan memperbarui elemen UI dalam aplikasi Anda. Mari kita lihat komponen ini baris demi baris untuk melihat apa yang terjadi:
```js {1}
export default function Square() {
@@ -524,7 +524,7 @@ export default function Board() {
}
```
-Kemudian Anda akan memperbarui komponen Board untuk merender komponen `Square` tersebut dengan menggunakan sintaksis JSX:
+Kemudian Anda akan memperbarui komponen Board untuk me-*render* komponen `Square` tersebut dengan menggunakan sintaksis JSX:
```js {5-19}
// ...
@@ -581,7 +581,7 @@ Ups, ini bukan yang Anda inginkan:

-Anda ingin merender variabel JavaScript yang disebut `value` dari komponen Anda, bukan kata "value". Untuk "melarikan diri ke dalam JavaScript" dari JSX, Anda memerlukan kurung kurawal. Tambahkan tanda kurung kurawal di sekitar `nilai` di JSX seperti ini:
+Anda ingin me-*render* variabel JavaScript yang disebut `value` dari komponen Anda, bukan kata "value". Untuk "melarikan diri ke dalam JavaScript" dari JSX, Anda memerlukan kurung kurawal. Tambahkan tanda kurung kurawal di sekitar `nilai` di JSX seperti ini:
```js {2}
function Square({ value }) {
@@ -797,7 +797,7 @@ function Square() {
}
```
-Dengan memanggil fungsi `set` ini dari handler `onClick`, Anda memberi tahu React untuk merender ulang `Square` setiap kali `` diklik. Setelah pembaruan, nilai `Square` akan menjadi `'X'`, sehingga Anda akan melihat "X" pada papan permainan. Klik pada kotak mana pun, dan "X" akan muncul:
+Dengan memanggil fungsi `set` ini dari handler `onClick`, Anda memberi tahu React untuk me-*render* ulang `Square` setiap kali `` diklik. Setelah pembaruan, nilai `Square` akan menjadi `'X'`, sehingga Anda akan melihat "X" pada papan permainan. Klik pada kotak mana pun, dan "X" akan muncul:

@@ -1357,7 +1357,7 @@ Hasilnya sama, tetapi dengan tidak melakukan mutasi (mengubah data yang mendasar
Immutability membuat fitur-fitur yang kompleks menjadi lebih mudah untuk diimplementasikan. Kemudian dalam tutorial ini, Anda akan mengimplementasikan fitur "perjalanan waktu" yang memungkinkan Anda meninjau sejarah game dan "melompat kembali" ke gerakan sebelumnya. Fungsionalitas ini tidak spesifik untuk gim--kemampuan untuk membatalkan dan mengulang tindakan tertentu adalah persyaratan umum untuk aplikasi. Menghindari mutasi data secara langsung memungkinkan Anda menyimpan data versi sebelumnya, dan menggunakannya kembali nanti.
-Ada juga manfaat lain dari immutability. Secara default, semua komponen anak di-*render* ulang secara otomatis ketika state komponen induk berubah. Hal ini termasuk komponen anak yang tidak terpengaruh oleh perubahan tersebut. Meskipun perenderan ulang tidak dengan sendirinya terlihat oleh pengguna (Anda tidak boleh secara aktif mencoba menghindarinya!), Anda mungkin ingin melewatkan perenderan ulang bagian dari pohon komponen yang jelas tidak terpengaruh oleh perubahan tersebut karena alasan kinerja. Immutability membuatnya sangat murah bagi komponen untuk membandingkan apakah datanya telah berubah atau tidak. Anda dapat mempelajari lebih lanjut tentang bagaimana React memilih kapan harus merender ulang sebuah komponen di [referensi API `memo`](/reference/react/memo).
+Ada juga manfaat lain dari immutability. Secara default, semua komponen anak di-*render* ulang secara otomatis ketika state komponen induk berubah. Hal ini termasuk komponen anak yang tidak terpengaruh oleh perubahan tersebut. Meskipun perenderan ulang tidak dengan sendirinya terlihat oleh pengguna (Anda tidak boleh secara aktif mencoba menghindarinya!), Anda mungkin ingin melewatkan perenderan ulang bagian dari pohon komponen yang jelas tidak terpengaruh oleh perubahan tersebut karena alasan kinerja. Immutability membuatnya sangat murah bagi komponen untuk membandingkan apakah datanya telah berubah atau tidak. Anda dapat mempelajari lebih lanjut tentang bagaimana React memilih kapan harus me-*render* ulang sebuah komponen di [referensi API `memo`](/reference/react/memo).
### Bergiliran {/*taking-turns*/}
@@ -1749,9 +1749,9 @@ Anda akan menyimpan senarai `squares` sebelumnya dalam senarai lain yang disebut
Sekarang Anda akan menulis komponen tingkat atas baru yang disebut `Game` untuk menampilkan daftar gerakan sebelumnya. Di situlah Anda akan menempatkan state `history` yang berisi riwayat permainan.
-Menempatkan state `history` ke dalam komponen `Game` akan membuat Anda dapat menghapus state `squares` dari komponen `Board` turunannya. Sama seperti Anda "mengangkat state" dari komponen `Square` ke dalam komponen `Board`, sekarang Anda akan mengangkatnya dari `Board` ke dalam komponen `Game` tingkat atas. Hal ini memberikan komponen `Game` kontrol penuh atas data `Board` dan memungkinkannya menginstruksikan `Board` untuk merender giliran sebelumnya dari `history`.
+Menempatkan state `history` ke dalam komponen `Game` akan membuat Anda dapat menghapus state `squares` dari komponen `Board` turunannya. Sama seperti Anda "mengangkat state" dari komponen `Square` ke dalam komponen `Board`, sekarang Anda akan mengangkatnya dari `Board` ke dalam komponen `Game` tingkat atas. Hal ini memberikan komponen `Game` kontrol penuh atas data `Board` dan memungkinkannya menginstruksikan `Board` untuk me-*render* giliran sebelumnya dari `history`.
-Pertama, tambahkan komponen `Game` dengan `export default`. Buatlah ia merender komponen `Board` dan beberapa markup:
+Pertama, tambahkan komponen `Game` dengan `export default`. Buatlah ia me-*render* komponen `Board` dan beberapa markup:
```js {1,5-16}
function Board() {
@@ -1785,7 +1785,7 @@ export default function Game() {
Perhatikan bagaimana `[Array(9).fill(null)]` adalah sebuah senarai dengan satu item, yang merupakan senarai dari 9 buah `null`.
-Untuk merender kotak untuk pergerakan saat ini, Anda perlu membaca senarai kotak terakhir dari `history`. Anda tidak membutuhkan `useState` untuk ini - Anda sudah memiliki informasi yang cukup untuk menghitungnya selama render:
+Untuk me-*render* kotak untuk pergerakan saat ini, Anda perlu membaca senarai kotak terakhir dari `history`. Anda tidak membutuhkan `useState` untuk ini - Anda sudah memiliki informasi yang cukup untuk menghitungnya selama render:
```js {4}
export default function Game() {
@@ -2021,7 +2021,7 @@ body {
Karena Anda merekam riwayat permainan *tic-tac-toe* ini, Anda sekarang dapat menampilkan daftar gerakan sebelumnya kepada pemain.
-Elemen React seperti `` adalah objek JavaScript biasa; Anda dapat mengopernya di dalam aplikasi Anda. Untuk merender beberapa item di React, Anda dapat menggunakan senarai elemen-elemen React.
+Elemen React seperti `` adalah objek JavaScript biasa; Anda dapat mengopernya di dalam aplikasi Anda. Untuk me-*render* beberapa item di React, Anda dapat menggunakan senarai elemen-elemen React.
Anda telah memiliki sebuah senarai `history` yang merupakan sejarah gerakan dalam state, jadi sekarang Anda perlu mengubahnya menjadi sebuah array elemen React. Dalam JavaScript, untuk mengubah satu senarai menjadi senarai lainnya, Anda dapat menggunakan metode [array `map`:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
@@ -2249,7 +2249,7 @@ Untuk saat ini, Anda akan melihat daftar gerakan yang terjadi di dalam game dan
### Memilih key {/*picking-a-key*/}
-Ketika Anda merender sebuah list, React menyimpan beberapa informasi tentang setiap item list yang di-render. Ketika Anda memperbarui list, React perlu menentukan apa yang telah berubah. Anda bisa saja menambahkan, menghapus, mengatur ulang, atau memperbarui item pada list.
+Ketika Anda me-*render* sebuah list, React menyimpan beberapa informasi tentang setiap item list yang di-render. Ketika Anda memperbarui list, React perlu menentukan apa yang telah berubah. Anda bisa saja menambahkan, menghapus, mengatur ulang, atau memperbarui item pada list.
Bayangkan pergantian dari
@@ -2509,7 +2509,7 @@ function handlePlay(nextSquares) {
}
```
-Terakhir, Anda akan memodifikasi komponen `Game` untuk merender gerakan yang sedang dipilih, alih-alih selalu merender gerakan terakhir:
+Terakhir, Anda akan memodifikasi komponen `Game` untuk me-*render* gerakan yang sedang dipilih, alih-alih selalu me-*render* gerakan terakhir:
```js {5}
export default function Game() {
diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md
index 8e46d6db0..eb9832f05 100644
--- a/src/content/reference/react/createContext.md
+++ b/src/content/reference/react/createContext.md
@@ -150,7 +150,7 @@ function App() {
}
```
-Sekarang komponen `Page` dan semua komponen didalamnya, tidak peduli seberapa dalam, akan "melihat" nilai konteks yang diberikan. Jika nilai konteks yang diberikan berubah, React akan merender ulang komponen yang membaca konteks tersebut.
+Sekarang komponen `Page` dan semua komponen didalamnya, tidak peduli seberapa dalam, akan "melihat" nilai konteks yang diberikan. Jika nilai konteks yang diberikan berubah, React akan me-*render* ulang komponen yang membaca konteks tersebut.
[Baca lebih lanjut tentang membaca dan memberikan konteks dan lihat contohnya.](/reference/react/useContext)
diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md
index 2fea5174b..2e6876ca6 100644
--- a/src/content/reference/react/memo.md
+++ b/src/content/reference/react/memo.md
@@ -20,7 +20,7 @@ const MemoizedComponent = memo(SomeComponent, arePropsEqual?)
### `memo(Component, arePropsEqual?)` {/*memo*/}
-Bungkus komponen dengan `memo` untuk mendapatkan versi *memoized* dari komponen tersebut. Versi memo dari komponen Anda biasanya tidak akan di-*render* ulang ketika komponen induknya di-*render* ulang selama propsnya tidak berubah. Tetapi React masih bisa merender ulang: *memoisasi* adalah pengoptimalan performa, bukan jaminan.
+Bungkus komponen dengan `memo` untuk mendapatkan versi *memoized* dari komponen tersebut. Versi memo dari komponen Anda biasanya tidak akan di-*render* ulang ketika komponen induknya di-*render* ulang selama propsnya tidak berubah. Tetapi React masih bisa me-*render* ulang: *memoisasi* adalah pengoptimalan performa, bukan jaminan.
```js
import { memo } from 'react';
@@ -36,11 +36,11 @@ const SomeComponent = memo(function SomeComponent(props) {
* `Component`: Komponen yang ingin Anda buat memonya. `memo` tidak mengubah komponen ini, tetapi mengembalikan komponen baru yang telah dimemo sebagai gantinya. Setiap komponen React yang valid, termasuk fungsi dan [`forwardRef`](/reference/react/forwardRef) komponen bisa diterima.
-* **optional** `arePropsEqual`: Fungsi yang menerima dua argumen: props sebelumnya dari komponen, dan props barunya. Fungsi ini akan mengembalikan `true` jika props lama dan baru sama: yaitu, jika komponen akan merender output yang sama dan berperilaku dengan cara yang sama dengan props baru seperti pada props lama. Jika tidak, fungsi ini akan mengembalikan `false`. Biasanya, Anda tidak akan menentukan fungsi ini. Secara default, React akan membandingkan setiap prop dengan [`Object.is`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)
+* **optional** `arePropsEqual`: Fungsi yang menerima dua argumen: props sebelumnya dari komponen, dan props barunya. Fungsi ini akan mengembalikan `true` jika props lama dan baru sama: yaitu, jika komponen akan me-*render* output yang sama dan berperilaku dengan cara yang sama dengan props baru seperti pada props lama. Jika tidak, fungsi ini akan mengembalikan `false`. Biasanya, Anda tidak akan menentukan fungsi ini. Secara default, React akan membandingkan setiap prop dengan [`Object.is`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)
#### Pengembalian {/*returns*/}
-`memo` mengembalikan sebuah komponen React yang baru. Komponen ini berperilaku sama dengan komponen yang disediakan untuk `memo` kecuali bahwa React tidak akan selalu merender ulang komponen tersebut ketika induknya di-*render* ulang kecuali jika propsnya telah berubah.
+`memo` mengembalikan sebuah komponen React yang baru. Komponen ini berperilaku sama dengan komponen yang disediakan untuk `memo` kecuali bahwa React tidak akan selalu me-*render* ulang komponen tersebut ketika induknya di-*render* ulang kecuali jika propsnya telah berubah.
---
@@ -48,7 +48,7 @@ const SomeComponent = memo(function SomeComponent(props) {
### Melewatkan proses render ulang apabila props tidak berubah {/*skipping-re-rendering-when-props-are-unchanged*/}
-React biasanya merender ulang sebuah komponen setiap kali induknya di render ulang. Dengan `memo`, Anda dapat membuat komponen yang tidak akan di render ulang oleh React ketika induknya di render ulang selama props yang baru sama dengan props yang lama. Komponen seperti ini disebut sebagai *memoized*.
+React biasanya me-*render* ulang sebuah komponen setiap kali induknya di render ulang. Dengan `memo`, Anda dapat membuat komponen yang tidak akan di render ulang oleh React ketika induknya di render ulang selama props yang baru sama dengan props yang lama. Komponen seperti ini disebut sebagai *memoized*.
Untuk memo sebuah komponen, bungkus komponen tersebut dengan `memo` dan gunakan nilai yang dikembalikannya untuk menggantikan komponen asli Anda:
@@ -60,7 +60,7 @@ const Greeting = memo(function Greeting({ name }) {
export default Greeting;
```
-Sebuah komponen React harus selalu memiliki [logika rendering murni](/learn/keeping-components-pure) Artinya, ia harus mengembalikan output yang sama jika props, state, dan konteksnya tidak berubah. Dengan menggunakan `memo`, Anda memberi tahu React bahwa komponen Anda memenuhi persyaratan ini, sehingga React tidak perlu merender ulang selama propsnya tidak berubah. Bahkan dengan `memo`, komponen Anda akan di-*render* ulang jika state-nya berubah atau jika konteks yang digunakan berubah.
+Sebuah komponen React harus selalu memiliki [logika rendering murni](/learn/keeping-components-pure) Artinya, ia harus mengembalikan output yang sama jika props, state, dan konteksnya tidak berubah. Dengan menggunakan `memo`, Anda memberi tahu React bahwa komponen Anda memenuhi persyaratan ini, sehingga React tidak perlu me-*render* ulang selama propsnya tidak berubah. Bahkan dengan `memo`, komponen Anda akan di-*render* ulang jika state-nya berubah atau jika konteks yang digunakan berubah.
Pada contoh ini, perhatikan bahwa komponen `Salam` di-*render* ulang setiap kali `nama` diubah (karena itu adalah salah satu propsnya), tetapi tidak saat `alamat` diubah (karena tidak dioper ke `Salam` sebagai props):
@@ -120,9 +120,9 @@ Tidak ada manfaatnya membungkus komponen dalam `memo` dalam kasus lain. Tidak ad
**Dalam praktiknya, Anda bisa membuat banyak memo yang tidak perlu dengan mengikuti beberapa prinsip:**
-1. Ketika sebuah komponen secara visual membungkus komponen lain, biarkan komponen tersebut [terima JSX sebagai anak.](/learn/passing-props-to-a-component#passing-jsx-as-children) Dengan cara ini, ketika komponen wrapper memperbarui state-nya sendiri, React tahu bahwa anak-anaknya tidak perlu merender ulang.
+1. Ketika sebuah komponen secara visual membungkus komponen lain, biarkan komponen tersebut [terima JSX sebagai anak.](/learn/passing-props-to-a-component#passing-jsx-as-children) Dengan cara ini, ketika komponen wrapper memperbarui state-nya sendiri, React tahu bahwa anak-anaknya tidak perlu me-*render* ulang.
1. Lebih suka state lokal dan tidak [mengangkat state](/learn/sharing-state-between-components) lebih jauh dari yang diperlukan. Sebagai contoh, jangan menyimpan status sementara seperti form dan apakah item dilayangkan di bagian atas pohon Anda atau di perpustakaan status global.
-1. aga agar [logika rendering Anda tetap murni.](/learn/keeping-components-pure) Jika merender ulang komponen menyebabkan masalah atau menghasilkan artefak visual yang mencolok, itu adalah bug dalam komponen Anda! Perbaiki bug daripada menambahkan memoisasi.
+1. aga agar [logika rendering Anda tetap murni.](/learn/keeping-components-pure) Jika me-*render* ulang komponen menyebabkan masalah atau menghasilkan artefak visual yang mencolok, itu adalah bug dalam komponen Anda! Perbaiki bug daripada menambahkan memoisasi.
1. Hindari [Efek yang tidak perlu yang memperbarui status.](/learn/you-might-not-need-an-effect) Sebagian besar masalah performa pada aplikasi React disebabkan oleh rantai pembaruan yang berasal dari Effects yang menyebabkan komponen Anda di-*render* berulang kali.
1. Cobalah untuk [menghapus ketergantungan yang tidak perlu dari Efek Anda.](/learn/removing-effect-dependencies) Sebagai contoh, alih-alih memoisasi, sering kali lebih mudah untuk memindahkan suatu objek atau fungsi di dalam Efek atau di luar komponen.
@@ -343,7 +343,7 @@ function arePropsEqual(oldProps, newProps) {
}
```
-Jika Anda melakukan ini, gunakan panel Kinerja di alat pengembang browser Anda untuk memastikan bahwa fungsi perbandingan Anda benar-benar lebih cepat daripada merender ulang komponen. Anda mungkin akan terkejut.
+Jika Anda melakukan ini, gunakan panel Kinerja di alat pengembang browser Anda untuk memastikan bahwa fungsi perbandingan Anda benar-benar lebih cepat daripada me-*render* ulang komponen. Anda mungkin akan terkejut.
Ketika Anda melakukan pengukuran performa, pastikan React berjalan dalam mode produksi.
@@ -360,4 +360,4 @@ Hindari melakukan pemeriksaan kesetaraan yang dalam di dalam `arePropsEqual` kec
## Pemecahan masalah {/*troubleshooting*/}
### Komponen saya di-render ulang ketika sebuah prop adalah objek, senarai, atau fungsi {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/}
-React membandingkan props lama dan baru dengan kesetaraan yang dangkal: yaitu, mempertimbangkan apakah setiap props baru memiliki referensi yang sama dengan props lama. Jika Anda membuat objek atau array baru setiap kali induknya di-*render* ulang, meskipun setiap elemennya sama, React akan tetap menganggapnya berubah. Demikian pula, jika Anda membuat fungsi baru ketika merender komponen induk, React akan menganggap fungsi tersebut telah berubah meskipun fungsi tersebut memiliki definisi yang sama. Untuk menghindari hal ini, [menyederhanakan props atau memo props dalam komponen induk](#minimizing-props-changes).
+React membandingkan props lama dan baru dengan kesetaraan yang dangkal: yaitu, mempertimbangkan apakah setiap props baru memiliki referensi yang sama dengan props lama. Jika Anda membuat objek atau array baru setiap kali induknya di-*render* ulang, meskipun setiap elemennya sama, React akan tetap menganggapnya berubah. Demikian pula, jika Anda membuat fungsi baru ketika me-*render* komponen induk, React akan menganggap fungsi tersebut telah berubah meskipun fungsi tersebut memiliki definisi yang sama. Untuk menghindari hal ini, [menyederhanakan props atau memo props dalam komponen induk](#minimizing-props-changes).
diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md
index 6ff9e2281..c26b8a5ff 100644
--- a/src/content/reference/react/useContext.md
+++ b/src/content/reference/react/useContext.md
@@ -38,12 +38,12 @@ function MyComponent() {
#### Returns {/*returns*/}
-`useContext` mengembalikan nilai konteks untuk komponen yang dipanggil. Nilai ini ditentukan sebagai `value` yang dioper ke `SomeContext.Provider` terdekat di atas komponen pemanggil dalam pohon. Jika tidak ada penyedia tersebut, maka nilai yang dikembalikan adalah `defaultValue` yang telah Anda berikan ke [`createContext`](/reference/react/createContext) untuk konteks tersebut. Nilai yang dikembalikan selalu mutakhir. React secara otomatis merender ulang komponen yang membaca suatu konteks jika konteks tersebut berubah.
+`useContext` mengembalikan nilai konteks untuk komponen yang dipanggil. Nilai ini ditentukan sebagai `value` yang dioper ke `SomeContext.Provider` terdekat di atas komponen pemanggil dalam pohon. Jika tidak ada penyedia tersebut, maka nilai yang dikembalikan adalah `defaultValue` yang telah Anda berikan ke [`createContext`](/reference/react/createContext) untuk konteks tersebut. Nilai yang dikembalikan selalu mutakhir. React secara otomatis me-*render* ulang komponen yang membaca suatu konteks jika konteks tersebut berubah.
#### Caveats {/*caveats*/}
* Pemanggilan `useContext()` dalam sebuah komponen tidak terpengaruh oleh provider yang dikembalikan dari komponen yang *sama*. `` yang sesuai harus berada di atas komponen yang melakukan pemanggilan `useContext()`.
-* React **secara otomatis merender ulang** semua anak yang menggunakan konteks tertentu mulai dari penyedia yang menerima `nilai` yang berbeda. Nilai sebelumnya dan nilai berikutnya dibandingkan dengan perbandingan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Melewatkan render ulang dengan [`memo`](/reference/react/memo) tidak mencegah anak-anak menerima nilai konteks yang baru.
+* React **secara otomatis me-*render* ulang** semua anak yang menggunakan konteks tertentu mulai dari penyedia yang menerima `nilai` yang berbeda. Nilai sebelumnya dan nilai berikutnya dibandingkan dengan perbandingan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Melewatkan render ulang dengan [`memo`](/reference/react/memo) tidak mencegah anak-anak menerima nilai konteks yang baru.
* Jika sistem build Anda menghasilkan modul duplikat pada keluaran (yang dapat terjadi pada *symlink*), ini dapat merusak konteks. Mengoper sesuatu melalui konteks hanya berfungsi jika `SomeContext` yang Anda gunakan untuk memberikan konteks dan `SomeContext` yang Anda gunakan untuk membacanya adalah objek yang sama persis, seperti yang ditentukan oleh perbandingan `===`.
---
@@ -201,7 +201,7 @@ Sekarang setiap `Button` di dalam penyedia akan menerima nilai `theme` saat ini.
#### Memperbarui nilai melalui konteks {/*updating-a-value-via-context*/}
-Dalam contoh ini, komponen `MyApp` menyimpan variabel status yang kemudian diteruskan ke penyedia `ThemeContext`. Mencentang kotak centang "Dark mode" akan memperbarui *state*. Mengubah nilai yang disediakan akan merender ulang semua komponen yang menggunakan konteks tersebut.
+Dalam contoh ini, komponen `MyApp` menyimpan variabel status yang kemudian diteruskan ke penyedia `ThemeContext`. Mencentang kotak centang "Dark mode" akan memperbarui *state*. Mengubah nilai yang disediakan akan me-*render* ulang semua komponen yang menggunakan konteks tersebut.
@@ -964,7 +964,7 @@ Sering kali, alih-alih `null`, ada beberapa nilai yang lebih berarti yang dapat
const ThemeContext = createContext('light');
```
-Dengan cara ini, jika Anda secara tidak sengaja merender beberapa komponen tanpa penyedia yang sesuai, komponen tersebut tidak akan rusak. Hal ini juga membantu komponen Anda bekerja dengan baik di lingkungan pengujian tanpa menyiapkan banyak provider dalam pengujian.
+Dengan cara ini, jika Anda secara tidak sengaja me-*render* beberapa komponen tanpa penyedia yang sesuai, komponen tersebut tidak akan rusak. Hal ini juga membantu komponen Anda bekerja dengan baik di lingkungan pengujian tanpa menyiapkan banyak provider dalam pengujian.
Pada contoh di bawah ini, tombol "Toggle theme" selalu berwarna terang karena tombol tersebut berada di luar penyedia konteks tema apa pun dan nilai tema konteks *default* adalah `'light'. Cobalah mengedit tema default menjadi 'dark'.
@@ -1350,7 +1350,7 @@ Baca lebih lanjut tentang [`useMemo`]((/reference/react/useMemo#skipping-re-rend
Ada beberapa cara umum yang dapat menyebabkan hal ini terjadi:
-1. Anda merender `` di komponen yang sama (atau di bawahnya) dengan tempat Anda memanggil `useContext()`. Pindahkan `` *di atas dan di luar* komponen yang memanggil `useContext()`.
+1. Anda me-*render* `` di komponen yang sama (atau di bawahnya) dengan tempat Anda memanggil `useContext()`. Pindahkan `` *di atas dan di luar* komponen yang memanggil `useContext()`.
2. Anda mungkin lupa membungkus komponen Anda dengan ``, atau Anda mungkin meletakkannya di bagian pohon yang berbeda dari yang Anda kira. Periksa apakah hirarki sudah benar dengan menggunakan [React DevTools.] (/learn/react-developer-tools)
3. Anda mungkin mengalami masalah build dengan tooling Anda yang menyebabkan `SomeContext` yang terlihat dari komponen penyedia dan `SomeContext` yang terlihat oleh komponen pembacaan menjadi dua objek yang berbeda. Hal ini dapat terjadi jika Anda menggunakan *symlink*, misalnya. Anda dapat memverifikasi hal ini dengan menugaskan mereka ke global seperti `window.SomeContext1` dan `window.SomeContext2` dan kemudian memeriksa apakah `window.SomeContext1 === window.SomeContext2` di konsol. Jika tidak sama, perbaiki masalah tersebut di tingkat build tool.
diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index fec9a6979..2301aeaa1 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -75,13 +75,13 @@ function Tooltip() {
Sebagian besar komponen tidak perlu mengetahui posisi dan ukuran di layar untuk memutuskan apa yang harus di-*render*. Komponen hanya mengembalikan beberapa JSX. Selanjutnya, peramban akan mengukur *tata letak* (posisi dan ukuran) dan melukis ulang layar.
-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).
+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 me-*render* *tooltip* di posisi akhir yang tepat, maka Anda harus mengetahui ketinggiannya (yaitu, apakah muat berada di atas).
-Untuk melakukan hal tersebut, Anda perlu merender dalam dua tahap:
+Untuk melakukan hal tersebut, Anda perlu me-*render* dalam dua tahap:
-1. Merender *tooltip* di mana saja (bahkan dengan posisi yang salah).
+1. Me-*render* *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.
+3. Me-*render* ulang *tooltip* agar berada di posisi yang tepat.
**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:
@@ -257,7 +257,7 @@ Meskipun komponen `Tooltip` harus di-*render* dalam dua tahap (pertama, dengan n
#### `useLayoutEffect` memblokir peramban untuk melukis ulang {/*uselayouteffect-blocks-the-browser-from-repainting*/}
-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.
+React menjamin kode di dalam `useLayoutEffect` dan setiap pembaruan *state* yang dijadwalkan akan diproses **sebelum peramban melukis ulang layar.** Hal ini memungkinkan Anda untuk me-*render* *tooltip*, mengukurnya, dan me-*render* ulang kembali *tooltip* tersebut tanpa pengguna menyadari *render* awal tambahan. Dengan kata lain, `useLayoutEffect` memblokir peramban untuk melukis ulang.
@@ -547,7 +547,7 @@ export default function TooltipContainer({ children, x, y, contentRef }) {
-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:
+Untuk mempermudah reproduski *bug* ini, versi berikut menambahkan penundaan buatan saat me-*render*. React akan membiarkan peramban melukis ulang layar sebelum memproses pembaruan *state* di dalam `useEffect`. Hasilnya, tooltip berkedip:
@@ -634,7 +634,7 @@ export default function Tooltip({ children, targetRect }) {
const ref = useRef(null);
const [tooltipHeight, setTooltipHeight] = useState(0);
- // Berikut secara artifisial memperlambat proses merender
+ // Berikut secara artifisial memperlambat proses me-*render*
let now = performance.now();
while (performance.now() - now < 100) {
// Sementara tidak melakukan apa pun...
@@ -696,7 +696,7 @@ export default function TooltipContainer({ children, x, y, contentRef }) {
-Ubah contoh berikut menjadi `useLayoutEffect` kemudian amati proses melukis layar akan terhalang meskipun proses merender diperlambat.
+Ubah contoh berikut menjadi `useLayoutEffect` kemudian amati proses melukis layar akan terhalang meskipun proses me-*render* diperlambat.
@@ -704,7 +704,7 @@ Ubah contoh berikut menjadi `useLayoutEffect` kemudian amati proses melukis laya
-Proses merender dua tahap dan memblokir peramban akan menurunkan kinerja. Sebaiknya proses tersebut dihindari.
+Proses me-*render* dua tahap dan memblokir peramban akan menurunkan kinerja. Sebaiknya proses tersebut dihindari.
@@ -714,17 +714,17 @@ Proses merender dua tahap dan memblokir peramban akan menurunkan kinerja. Sebaik
### Saya menerima *error*: "`useLayoutEffect` does nothing on the server" {/*im-getting-an-error-uselayouteffect-does-nothing-on-the-server*/}
-Tujuan dari `useLayoutEffect` adalah memungkinkan sebuah komponen [menggunakan informasi tata letak untuk *merender*:](#measuring-layout-before-the-browser-repaints-the-screen)
+Tujuan dari `useLayoutEffect` adalah memungkinkan sebuah komponen [menggunakan informasi tata letak untuk *me-*render**:](#measuring-layout-before-the-browser-repaints-the-screen)
-1. Merender konten awal.
+1. Me-*render* konten awal.
2. Mengukur tata letak *sebelum peramban melukis ulang layar.*
-3. Merender konten akhir menggunakan informasi tata letak yang telah dibaca.
+3. Me-*render* konten akhir menggunakan informasi tata letak yang telah dibaca.
-Ketika Anda atau *framework* Anda menggunakan [*server rendering*](/reference/react-dom/server), aplikasi React Anda di-*render* menjadi HTML di *server* saat awal merender.
+Ketika Anda atau *framework* Anda menggunakan [*server rendering*](/reference/react-dom/server), aplikasi React Anda di-*render* menjadi HTML di *server* saat awal me-*render*.
Masalahnya, di *server* tidak tersedia informasi tentang tata letak.
-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.
+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 me-*render* `Tooltip` sebagai bagian dari HTML *server* awal, hal tersebut tidak mungkin dapat dilakukan. Sebab di *server* belum terdapat tata letak! Jadi, meskipun Anda me-*render*nya di *server*, posisi *tooltip* akan "melompat" di sisi klien setelah JavaScript dimuat dan dijalankan.
Biasanya, komponen yang bergantung pada informasi tata letak tidak perlu di-*render* di *server*. Sebagai contoh, tidak akan masuk akal untuk menampilkan `Tooltip` selama *render* awal. Karena hal tersebut dipicu oleh interaksi klien.
@@ -734,7 +734,7 @@ Namun, jika mengalami masalah tersebut, terdapat beberapa opsi yang tersedia:
- 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`.
+- Sebagai alternatif, Anda dapat me-*render* 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 me-*render* 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.
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index c04924c52..fcded782f 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -126,7 +126,7 @@ function TabContainer() {
Transisi akan memungkinkan Anda untuk mempertahankan perubahan tampilan pengguna secara responsif bahkan untuk perangkat lambat.
-Dengan transisi, UI Anda akan tetap responsif di tengah-tengah merender ulang. Contohnya, jika pengguna menekan tab namun mereka berubah pikiran dan menekan tab lain, mereka dapat melakukan itu tanpa menunggu muat ulang pertama selesai.
+Dengan transisi, UI Anda akan tetap responsif di tengah-tengah me-*render* ulang. Contohnya, jika pengguna menekan tab namun mereka berubah pikiran dan menekan tab lain, mereka dapat melakukan itu tanpa menunggu muat ulang pertama selesai.
@@ -273,7 +273,7 @@ b { display: inline-block; margin-right: 10px; }
Pada contoh berikut, tab "Posts" juga **Dipelankan secara artifisial** sehingga akan memakan waktu setidaknya satu detik untuk *render*. Berbeda dengan contoh sebelumnya, perubahan *state* ini **bukanlah sebuah transisi.**
-Tekan "Posts" kemudian segera tekan "Contact". Perhatikan bahwa aplikasi membeku ketika render tab yang lambat, dan UI menjadi tidak responsive. Perubahan *state* ini bukanlah sebuah transisi, sehingga merender ulang yang lambat membekukan tampilan pengguna.
+Tekan "Posts" kemudian segera tekan "Contact". Perhatikan bahwa aplikasi membeku ketika render tab yang lambat, dan UI menjadi tidak responsive. Perubahan *state* ini bukanlah sebuah transisi, sehingga me-*render* ulang yang lambat membekukan tampilan pengguna.
@@ -1116,7 +1116,7 @@ function Router() {
Ini direkomendasikan karena dua alasan:
-- [Transisi dapat terputus,](#marking-a-state-update-as-a-non-blocking-transition) yang memungkinkan pengguna mengklik tanpa menunggu merender ulang selesai.
+- [Transisi dapat terputus,](#marking-a-state-update-as-a-non-blocking-transition) yang memungkinkan pengguna mengklik tanpa menunggu me-*render* ulang selesai.
- [Transisi mencegah indikator loading yang tidak diinginkan,](#preventing-unwanted-loading-indicators) yang memungkinkan pengguna menghindari lompatan menggelegar pada navigasi.
Berikut adalah contoh router kecil sederhana menggunakan transisi untuk navigasi.