docs: changes dirender to di-*render* (#507)

Co-authored-by: M Haidar Hanif <git@mhaidarhanif.com>

Author: r17x

src/content/learn/tutorial-tic-tac-toe.md

@@ -593,7 +593,7 @@ Untuk saat ini, Anda akan melihat papan kosong:
 
 ![papan kosong](../images/tutorial/empty-board.png)
 
-Hal ini karena komponen `Board` belum meneruskan prop `value` ke setiap komponen `Square` yang di-render. Untuk memperbaikinya, Anda harus menambahkan prop `value` ke setiap komponen `Square` yang dirender oleh komponen `Board`:
+Hal ini karena komponen `Board` belum meneruskan prop `value` ke setiap komponen `Square` yang di-render. Untuk memperbaikinya, Anda harus menambahkan prop `value` ke setiap komponen `Square` yang di-*render* oleh komponen `Board`:
 
 ```js {5-7,10-12,15-17}
 export default function Board() {
@@ -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 dirender 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 merender ulang sebuah komponen di [referensi API `memo`](/reference/react/memo).
 
 ### Bergiliran {/*taking-turns*/}
 

src/content/reference/react/apis.md

@@ -12,6 +12,6 @@ Selain [Hooks](/reference/react) dan [Components](/reference/react/components),
 
 * [`createContext`](/reference/react/createContext) memungkinkan Anda untuk mendefinisikan dan memberikan konteks komponen turunan. Digunakan dengan [`useContext`.](/reference/react/useContext)
 * [`forwardRef`](/reference/react/forwardRef) memungkinkan Anda mengekspos sebuah *DOM node* sebagai sebuah *ref* kepada *parent*. Digunakan dengan [`useRef`.](/reference/react/useRef)
-* [`lazy`](/reference/react/lazy) memungkinkan Anda menunda pemuatan kode komponen sampai kode tersebut dirender untuk pertama kalinya.
+* [`lazy`](/reference/react/lazy) memungkinkan Anda menunda pemuatan kode komponen sampai kode tersebut di-*render* untuk pertama kalinya.
 * [`memo`](/reference/react/memo) memungkinkan komponen Anda melewatkan render ulang dengan *props* yang sama. Digunakan dengan [`useMemo`](/reference/react/useMemo) dan [`useCallback`.](/reference/react/useCallback)
 * [`startTransition`](/reference/react/startTransition) memungkinkan Anda menandai pembaruan *state* sebagai tidak urgen. Mirip dengan [`useTransition`.](/reference/react/useTransition)

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 dirender ulang ketika komponen induknya dirender 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 merender ulang: *memoisasi* adalah pengoptimalan performa, bukan jaminan.
 
 ```js
 import { memo } from 'react';
@@ -40,7 +40,7 @@ const SomeComponent = memo(function SomeComponent(props) {
 
 #### 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 dirender 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 merender ulang komponen tersebut ketika induknya di-*render* ulang kecuali jika propsnya telah berubah.
 
 ---
 
@@ -60,9 +60,9 @@ 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 dirender 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 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.
 
-Pada contoh ini, perhatikan bahwa komponen `Salam` dirender ulang setiap kali `nama` diubah (karena itu adalah salah satu propsnya), tetapi tidak saat `alamat` diubah (karena tidak dioper ke `Salam` sebagai props):
+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):
 
 <Sandpack>
 
@@ -114,7 +114,7 @@ label {
 
 Jika aplikasi Anda seperti situs ini, dan sebagian besar interaksinya bersifat kasar (seperti mengganti halaman atau seluruh bagian), memoisasi biasanya tidak diperlukan. Di sisi lain, jika aplikasi Anda lebih seperti editor gambar, dan sebagian besar interaksinya bersifat granular (seperti memindahkan bentuk), maka Anda mungkin akan merasa sangat terbantu dengan adanya memoisasi. 
 
-Mengoptimalkan dengan `memo` hanya berguna ketika komponen Anda sering dirender ulang dengan props yang sama persis, dan logika render ulangnya mahal. Jika tidak ada jeda yang terlihat ketika komponen Anda dirender ulang, `memo` tidak diperlukan. Perlu diingat bahwa `memo` sama sekali tidak berguna jika props yang dioper ke komponen Anda *selalu berbeda, seperti jika Anda mengoper sebuah objek atau fungsi biasa yang didefinisikan selama rendering. Inilah sebabnya mengapa Anda akan sering membutuhkan[`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components) dan [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components) serta `memo`.
+Mengoptimalkan dengan `memo` hanya berguna ketika komponen Anda sering di-*render* ulang dengan props yang sama persis, dan logika render ulangnya mahal. Jika tidak ada jeda yang terlihat ketika komponen Anda di-*render* ulang, `memo` tidak diperlukan. Perlu diingat bahwa `memo` sama sekali tidak berguna jika props yang dioper ke komponen Anda *selalu berbeda, seperti jika Anda mengoper sebuah objek atau fungsi biasa yang didefinisikan selama rendering. Inilah sebabnya mengapa Anda akan sering membutuhkan[`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components) dan [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components) serta `memo`.
 
 Tidak ada manfaatnya membungkus komponen dalam `memo` dalam kasus lain. Tidak ada kerugian yang signifikan untuk melakukan hal tersebut, sehingga beberapa tim memilih untuk tidak memikirkan kasus-kasus individual, dan membuat memo sebanyak mungkin. Kelemahan dari pendekatan ini adalah kode menjadi kurang mudah dibaca. Selain itu, tidak semua memoisasi efektif: satu nilai yang "selalu baru" sudah cukup untuk mematahkan memoisasi untuk seluruh komponen.
 
@@ -123,7 +123,7 @@ Tidak ada manfaatnya membungkus komponen dalam `memo` dalam kasus lain. Tidak ad
 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. 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. 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 dirender berulang kali.
+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.
 
 Jika interaksi tertentu masih terasa lamban, [gunakan profiler React Developer Tools](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) untuk melihat komponen mana yang paling diuntungkan dengan memoisasi, dan menambahkan memoisasi jika diperlukan. Prinsip-prinsip ini membuat komponen Anda lebih mudah di-debug dan dipahami, jadi sebaiknya Anda mengikutinya dalam hal apa pun. Dalam jangka panjang, kami sedang meneliti [melakukan memoisasi granular secara otomatis](https://www.youtube.com/watch?v=lGEMwh32soc) untuk menyelesaikan masalah ini untuk selamanya.
@@ -134,7 +134,7 @@ Jika interaksi tertentu masih terasa lamban, [gunakan profiler React Developer T
 
 ### Memperbarui komponen yang telah dimemo menggunakan state {/*updating-a-memoized-component-using-state*/}
 
-Bahkan ketika sebuah komponen dimemoisasi, komponen tersebut akan tetap dirender ulang ketika statusnya berubah. Memoisasi hanya berkaitan dengan props yang diteruskan ke komponen dari induknya.
+Bahkan ketika sebuah komponen dimemoisasi, komponen tersebut akan tetap di-*render* ulang ketika statusnya berubah. Memoisasi hanya berkaitan dengan props yang diteruskan ke komponen dari induknya.
 
 <Sandpack>
 
@@ -209,7 +209,7 @@ Jika Anda menetapkan variabel state ke nilai saat ini, React akan melewatkan pro
 
 ### Memperbarui komponen yang telah dimemo menggunakan context {/*updating-a-memoized-component-using-a-context*/}
 
-Bahkan ketika sebuah komponen dimemoisasi, komponen tersebut akan tetap dirender ulang ketika konteks yang digunakan berubah. Memoisasi hanya berkaitan dengan props yang dioper ke komponen dari induknya.
+Bahkan ketika sebuah komponen dimemoisasi, komponen tersebut akan tetap di-*render* ulang ketika konteks yang digunakan berubah. Memoisasi hanya berkaitan dengan props yang dioper ke komponen dari induknya.
 
 <Sandpack>
 
@@ -263,13 +263,13 @@ label {
 
 </Sandpack>
 
-Untuk membuat komponen Anda dirender ulang hanya ketika sebuah _bagian_ dari konteks berubah, pisahkan komponen Anda menjadi dua. Baca apa yang Anda butuhkan dari konteks di komponen luar, dan turunkan ke anak komponen yang dimodifikasi sebagai prop.
+Untuk membuat komponen Anda di-*render* ulang hanya ketika sebuah _bagian_ dari konteks berubah, pisahkan komponen Anda menjadi dua. Baca apa yang Anda butuhkan dari konteks di komponen luar, dan turunkan ke anak komponen yang dimodifikasi sebagai prop.
 
 ---
 
 ### Meminimalkan perubahan props {/*minimizing-props-changes*/}
 
-Ketika Anda menggunakan `memo`, komponen Anda akan dirender ulang setiap kali ada prop yang tidak *sama persis* dengan sebelumnya. Ini berarti React membandingkan setiap prop dalam komponen Anda dengan nilai sebelumnya menggunakan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) perbandingan. Perhatikan bahwa `Object.is(3, 3)` adalah `true`, namun `Object.is({}, {})` adalah `false`.
+Ketika Anda menggunakan `memo`, komponen Anda akan di-*render* ulang setiap kali ada prop yang tidak *sama persis* dengan sebelumnya. Ini berarti React membandingkan setiap prop dalam komponen Anda dengan nilai sebelumnya menggunakan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) perbandingan. Perhatikan bahwa `Object.is(3, 3)` adalah `true`, namun `Object.is({}, {})` adalah `false`.
 
 
 Untuk mendapatkan hasil maksimal dari `memo`, minimalkan waktu perubahan props. Sebagai contoh, jika props adalah sebuah objek, cegah komponen induk untuk membuat ulang objek tersebut setiap saat dengan menggunakan [`useMemo`:](/reference/react/useMemo)
@@ -358,6 +358,6 @@ Hindari melakukan pemeriksaan kesetaraan yang dalam di dalam `arePropsEqual` kec
 ---
 
 ## Pemecahan masalah {/*troubleshooting*/}
-### Komponen saya dirender ulang ketika sebuah prop adalah objek, senarai, atau fungsi {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/}
+### 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 dirender 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 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).

src/content/reference/react/useContext.md

@@ -195,7 +195,7 @@ function MyPage() {
 }
 ```
 
-Sekarang setiap `Button` di dalam penyedia akan menerima nilai `theme` saat ini. Jika Anda memanggil `setTheme` untuk memperbarui nilai `theme` yang Anda berikan ke penyedia, semua komponen `Button` akan dirender ulang dengan nilai `'light' yang baru.
+Sekarang setiap `Button` di dalam penyedia akan menerima nilai `theme` saat ini. Jika Anda memanggil `setTheme` untuk memperbarui nilai `theme` yang Anda berikan ke penyedia, semua komponen `Button` akan di-*render* ulang dengan nilai `'light' yang baru.
 
 <Recipes titleText="Examples of updating context" titleId="examples-basic">
 
@@ -1310,7 +1310,7 @@ function MyApp() {
 }
 ```
 
-Di sini, <CodeStep step={2}>context value</CodeStep> adalah sebuah objek JavaScript dengan dua properti, salah satunya adalah sebuah fungsi. Setiap kali `MyApp` dirender ulang (misalnya, pada pembaruan rute), ini akan menjadi objek *berbeda* yang menunjuk ke fungsi *berbeda*, sehingga React juga harus me-render ulang semua komponen di dalam pohon yang memanggil `useContext(AuthContext)`.
+Di sini, <CodeStep step={2}>context value</CodeStep> adalah sebuah objek JavaScript dengan dua properti, salah satunya adalah sebuah fungsi. Setiap kali `MyApp` di-*render* ulang (misalnya, pada pembaruan rute), ini akan menjadi objek *berbeda* yang menunjuk ke fungsi *berbeda*, sehingga React juga harus me-render ulang semua komponen di dalam pohon yang memanggil `useContext(AuthContext)`.
 
 Pada aplikasi yang lebih kecil, hal ini tidak menjadi masalah. Namun, tidak perlu me-render ulang jika data yang mendasarinya, seperti `currentUser`, tidak berubah. Untuk membantu React memanfaatkan fakta tersebut, Anda dapat membungkus fungsi `login` dengan [`useCallback`](/reference/react/useCallback) dan membungkus pembuatan objek ke dalam [`useMemo`](/reference/react/useMemo). Hal ini merupakan pengoptimalan kinerja:
 
@@ -1338,7 +1338,7 @@ function MyApp() {
 }
 ```
 
-Sebagai hasil dari perubahan ini, meskipun `MyApp` perlu dirender ulang, komponen yang memanggil `useContext(AuthContext)` tidak perlu dirender ulang kecuali jika `currentUser` telah berubah.
+Sebagai hasil dari perubahan ini, meskipun `MyApp` perlu di-*render* ulang, komponen yang memanggil `useContext(AuthContext)` tidak perlu di-*render* ulang kecuali jika `currentUser` telah berubah.
 
 Baca lebih lanjut tentang [`useMemo`]((/reference/react/useMemo#skipping-re-rendering-of-components) dan [`useCallback`.](/reference/react/useCallback#skipping-re-rendering-of-components)