diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md
index 2498f40dc..c4da2b61f 100644
--- a/src/content/blog/2023/03/16/introducing-react-dev.md
+++ b/src/content/blog/2023/03/16/introducing-react-dev.md
@@ -269,7 +269,7 @@ Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn
function Item({ name, isPacked }) {
return (
);
}
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index bebc17157..cd0862b19 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,26 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
## Upcoming Conferences {/*upcoming-conferences*/}
-### React Nexus 2024 {/*react-nexus-2024*/}
-July 04 & 05, 2024. Bangalore, India (In-person event)
-
-[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
-
-### Chain React 2024 {/*chain-react-2024*/}
-July 17-19, 2024. In-person in Portland, OR, USA
-
-[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)
-
-### The Geek Conf 2024 {/*the-geek-conf-2024*/}
-July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)
-
-[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)
-
-### React Rally 2024 🐙 {/*react-rally-2024*/}
-August 12-13, 2024. Park City, UT, USA
-
-[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)
-
### React Universe Conf 2024 {/*react-universe-conf-2024*/}
September 5-6, 2024. Wrocław, Poland.
@@ -40,6 +20,10 @@ September 19-21, 2024. Alicante, Spain.
[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
+### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/}
+October 04 - 05, 2024. Nairobi, Kenya
+
+[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
### React India 2024 {/*react-india-2024*/}
October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
@@ -51,13 +35,48 @@ October 18, 2024. In-person in Brussels, Belgium (hybrid event)
[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)
+### React Advanced London 2024 {/*react-advanced-london-2024*/}
+October 25 & 28, 2024. In-person in London, UK + online (hybrid event)
+
+[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
+
+### React Summit US 2024 {/*react-summit-us-2024*/}
+November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)
+
+[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
+
### React Africa 2024 {/*react-africa-2024*/}
November 29, 2024. In-person in Casablanca, Morocco (hybrid event)
[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)
+### React Day Berlin 2024 {/*react-day-berlin-2024*/}
+December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)
+
+[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)
+
## Past Conferences {/*past-conferences*/}
+### React Rally 2024 🐙 {/*react-rally-2024*/}
+August 12-13, 2024. Park City, UT, USA
+
+[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)
+
+### The Geek Conf 2024 {/*the-geek-conf-2024*/}
+July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)
+
+[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)
+
+### Chain React 2024 {/*chain-react-2024*/}
+July 17-19, 2024. In-person in Portland, OR, USA
+
+[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)
+
+### React Nexus 2024 {/*react-nexus-2024*/}
+July 04 & 05, 2024. Bangalore, India (In-person event)
+
+[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
+
### React Summit 2024 {/*react-summit-2024*/}
June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event)
diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md
index 1278e1122..8950cf466 100644
--- a/src/content/learn/adding-interactivity.md
+++ b/src/content/learn/adding-interactivity.md
@@ -265,7 +265,11 @@ setCount(count + 1); // Meminta render ulang dengan 1
console.log(count); // Masih 0!
```
+<<<<<<< HEAD
Perilaku ini akan membantu Anda menghindari *bug* yang susah ditemukan. Berikut adalah aplikasi chat sederhana. Coba tebak apa yang terjadi jika Anda menekan "Kirim" terlebih dahulu dan *kemudian* mengubah penerima menjadi Bob. Nama siapa yang akan muncul di `alert` lima detik kemudian?
+=======
+This behavior helps you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later?
+>>>>>>> 9aa2e3668da290f92f8997a25f28bd3f58b2a26d
diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 355bb25a4..313e3825b 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -52,13 +52,17 @@ export default function PackingList() {
+<<<<<<< HEAD
Perhatikan bahwa beberapa komponen `Item` memiliki *prop* `isPacked` yang disetel ke `true`, bukan `false`. Anda ingin menambahkan tanda centang (✔) pada item yang sudah dikemas jika `isPacked={true}`.
+=======
+Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✅) to packed items if `isPacked={true}`.
+>>>>>>> 9aa2e3668da290f92f8997a25f28bd3f58b2a26d
Anda dapat menuliskannya sebagai [pernyataan `if`/`else`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) seperti ini:
```js
if (isPacked) {
- return
{name} ✔
;
+ return
{name} ✅
;
}
return
{name}
;
```
@@ -70,7 +74,7 @@ Jika *prop* `isPacked` bernilai `true`, kode ini **mengembalikan pohon JSX yang
```js
function Item({ name, isPacked }) {
if (isPacked) {
- return
{name} ✔
;
+ return
{name} ✅
;
}
return
{name}
;
}
@@ -159,7 +163,7 @@ Dalam praktiknya, mengembalikan `null` dari sebuah komponen tidaklah umum karena
Pada contoh sebelumnya, Anda mengontrol pohon JSX mana (jika ada!) yang akan dikembalikan oleh komponen. Anda mungkin telah melihat beberapa duplikasi pada keluaran *render*:
```js
-
{name} ✔
+
{name} ✅
```
is very similar to
@@ -172,7 +176,7 @@ Kedua cabang kondisional mengembalikan `
...
`:
```js
if (isPacked) {
- return
{name} ✔
;
+ return
{name} ✅
;
}
return
{name}
;
```
@@ -187,7 +191,7 @@ Daripada ini:
```js
if (isPacked) {
- return
{name} ✔
;
+ return
{name} ✅
;
}
return
{name}
;
```
@@ -197,12 +201,16 @@ Anda bisa menulis ini:
```js
return (
- {isPacked ? name + ' ✔' : name}
+ {isPacked ? name + ' ✅' : name}
);
```
+<<<<<<< HEAD
Anda dapat membacanya sebagai *"jika nilai `isPacked` adalah true, maka (`?`) render `name + ' ✔'`, jika tidak (`:`) render `name`"*.
+=======
+You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✅'`, otherwise (`:`) render `name`"*.
+>>>>>>> 9aa2e3668da290f92f8997a25f28bd3f58b2a26d
@@ -222,7 +230,7 @@ function Item({ name, isPacked }) {
{isPacked ? (
- {name + ' ✔'}
+ {name + ' ✅'}
) : (
name
@@ -265,7 +273,7 @@ Pintasan umum lainnya yang akan Anda temui adalah [operator logis AND (`&&`) Jav
```js
return (
);
}
@@ -337,7 +345,7 @@ Gunakan pernyataan `if` untuk menetapkan kembali ekspresi JSX ke `itemContent` j
```js
if (isPacked) {
- itemContent = name + " ✔";
+ itemContent = name + " ✅";
}
```
@@ -357,7 +365,7 @@ Model ini adalah model yang paling bertele-tele, tetapi juga paling fleksibel. I
function Item({ name, isPacked }) {
let itemContent = name;
if (isPacked) {
- itemContent = name + " ✔";
+ itemContent = name + " ✅";
}
return (
@@ -401,7 +409,7 @@ function Item({ name, isPacked }) {
if (isPacked) {
itemContent = (
- {name + " ✔"}
+ {name + " ✅"}
);
}
@@ -464,7 +472,7 @@ Gunakan operator kondisional (`cond ? a : b`) untuk me-*render* ❌ jika `isPack
function Item({ name, isPacked }) {
return (
);
}
diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md
index f34c382ed..2920e8643 100644
--- a/src/content/learn/react-compiler.md
+++ b/src/content/learn/react-compiler.md
@@ -121,7 +121,7 @@ In addition to these docs, we recommend checking the [React Compiler Working Gro
Prior to installing the compiler, you can first check to see if your codebase is compatible:
-npx react-compiler-healthcheck@latest
+npx react-compiler-healthcheck@experimental
This script will:
@@ -143,7 +143,7 @@ Found no usage of incompatible libraries.
React Compiler also powers an eslint plugin. The eslint plugin can be used **independently** of the compiler, meaning you can use the eslint plugin even if you don't use the compiler.
-npm install eslint-plugin-react-compiler
+npm install eslint-plugin-react-compiler@experimental
Then, add it to your eslint config:
@@ -203,7 +203,7 @@ If you're starting a new project, you can enable the compiler on your entire cod
### Babel {/*usage-with-babel*/}
-npm install babel-plugin-react-compiler
+npm install babel-plugin-react-compiler@experimental
The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler.
@@ -258,7 +258,7 @@ Next.js has an experimental configuration to enable the React Compiler. It autom
- Install `babel-plugin-react-compiler`
-npm install next@canary babel-plugin-react-compiler
+npm install next@canary babel-plugin-react-compiler@experimental
Then configure the experimental option in `next.config.js`:
diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md
index 5342a27ed..28b9edf77 100644
--- a/src/content/learn/you-might-not-need-an-effect.md
+++ b/src/content/learn/you-might-not-need-an-effect.md
@@ -408,9 +408,15 @@ function Game() {
Ada dua masalah dengan kode ini.
+<<<<<<< HEAD
Salah satu masalahnya adalah hal ini sangat tidak efisien: komponen (dan turunannya) harus di-*render* ulang di antara setiap panggilan `set` dalam rantai. Dalam contoh di atas, dalam kasus terburuk (`setCard` → *render* → `setGoldCardCount` → *render* → `setRound` → *render* → `setIsGameOver` → *render*) ada tiga *rendering* ulang yang tidak diperlukan pada pohon di bawah ini.
Meskipun tidak lambat, seiring berkembangnya kode Anda, Anda akan menghadapi kasus di mana "rantai" yang Anda tulis tidak sesuai dengan persyaratan baru. Bayangkan Anda menambahkan cara untuk menelusuri sejarah gerakan permainan. Anda akan melakukannya dengan memperbarui setiap variabel *state* ke nilai dari masa lalu. Namun, menyetel *state* `card` ke nilai dari masa lalu akan memicu rantai *Effect* lagi dan mengubah data yang Anda tampilkan. Kode seperti ini seringkali kaku dan rapuh.
+=======
+First problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below.
+
+The second problem is that even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile.
+>>>>>>> 9aa2e3668da290f92f8997a25f28bd3f58b2a26d
Dalam hal ini, lebih baik menghitung apa yang Anda bisa selama *rendering*, dan sesuaikan *state* di *event handler*:
diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md
index 5ed4cbd6d..e666d989e 100644
--- a/src/content/reference/react-dom/components/index.md
+++ b/src/content/reference/react-dom/components/index.md
@@ -32,7 +32,11 @@ Komponen-komponen tersebut spesial dalam React karena dengan mengoper *prop* `va
## Komponen Sumber Daya dan Metadata {/*resource-and-metadata-components*/}
+<<<<<<< HEAD
Komponen bawaan peramban ini memungkinkan Anda memuat sumber daya external atau menyematkan metadata ke dokumen:
+=======
+These built-in browser components let you load external resources or annotate the document with metadata:
+>>>>>>> 9aa2e3668da290f92f8997a25f28bd3f58b2a26d
* [``](/reference/react-dom/components/link)
* [``](/reference/react-dom/components/meta)
diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md
index 44e8a8e0e..7945fc58f 100644
--- a/src/content/reference/react/cache.md
+++ b/src/content/reference/react/cache.md
@@ -226,7 +226,7 @@ Dengan melakukan *cache* pada data hasil *fetch* yang panjang, Anda dapat memula
```jsx [[2, 6, "await getUser(id)"], [1, 17, "getUser(id)"]]
const getUser = cache(async (id) => {
return await db.user.query(id);
-})
+});
async function Profile({id}) {
const user = await getUser(id);
@@ -327,7 +327,7 @@ Secara umum, anda harus menggunakan [`useMemo`](/reference/react/useMemo) untuk
'use client';
function WeatherReport({record}) {
- const avgTemp = useMemo(() => calculateAvg(record)), record);
+ const avgTemp = useMemo(() => calculateAvg(record), record);
// ...
}
diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md
index ba5a556e5..09ac6b0a8 100644
--- a/src/content/reference/react/index.md
+++ b/src/content/reference/react/index.md
@@ -14,10 +14,17 @@ Dokumentasi referensi React dibagi menjadi beberapa sub-bagian fungsional:
Fitur-fitur React yang diprogram:
+<<<<<<< HEAD
* [*Hooks*](/reference/react/hooks) — Gunakan bermacam-macam fitur React dari komponen Anda.
* [Komponen](/reference/react/components) — Mendokumentasikan komponen bawaan yang dapat digunakan di JSX Anda.
* [API](/reference/react/apis) — API yang berguna untuk mendefinisikan komponen.
* [Directive](/reference/react/directives) — Menyediakan instruksi ke *bundler* yang kompatibel dengan React Server Component.
+=======
+* [Hooks](/reference/react/hooks) - Use different React features from your components.
+* [Components](/reference/react/components) - Built-in components that you can use in your JSX.
+* [APIs](/reference/react/apis) - APIs that are useful for defining components.
+* [Directives](/reference/rsc/directives) - Provide instructions to bundlers compatible with React Server Components.
+>>>>>>> 9aa2e3668da290f92f8997a25f28bd3f58b2a26d
## React DOM {/*react-dom*/}
diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md
index b9f06bca4..db08a8a45 100644
--- a/src/content/reference/react/lazy.md
+++ b/src/content/reference/react/lazy.md
@@ -78,7 +78,7 @@ Setelah kode komponen Anda dimuat saat digunakan (*on demand*), Anda juga perlu
}>
Preview
-
+
```
Pada contoh ini, kode untuk `MarkdownPreview` tidak akan dimuat hingga Anda mencoba me-*render*nya. Jika `MarkdownPreview` belum dimuat, Komponen `Loading` akan ditampilkan sebagai gantinya. Coba centang *checkbox* **Lihat pratinjau**:
diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index fc5e2718c..20c8b76c8 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -67,6 +67,8 @@ function Tooltip() {
* 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).
+* If you trigger a state update inside `useLayoutEffect`, React will execute all remaining Effects immediately including `useEffect`.
+
---
## Penggunaan {/*usage*/}
diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md
index c4bac2d3b..6a0075c30 100644
--- a/src/content/reference/react/useSyncExternalStore.md
+++ b/src/content/reference/react/useSyncExternalStore.md
@@ -41,7 +41,11 @@ function TodosApp() {
#### Parameter {/*parameters*/}
+<<<<<<< HEAD
* `subscribe`: Sebuah fungsi yang menerima sebuah argumen `callback` dan berlangganan ke tempat penyimpanan. Saat tempat penyimpanan berubah, fungsi ini akan memanggil `callback`. Ini akan menyebakan komponen di-*render* ulang. Fungsi `subscribe` harus mengembalikan fungsi yang membersihkan langganan tersebut.
+=======
+* `subscribe`: A function that takes a single `callback` argument and subscribes it to the store. When the store changes, it should invoke the provided `callback`, which will cause React to re-call `getSnapshot` and (if needed) re-render the component. The `subscribe` function should return a function that cleans up the subscription.
+>>>>>>> 9aa2e3668da290f92f8997a25f28bd3f58b2a26d
* `getSnapshot`: Sebuah fungsi yang mengembalikan sebuah *snapshot* dari data, di tempat penyimpanan, yang dibutuhkan komponen. Saat tempat penyimpanan masih belum berubah, pemanggilan `getSnapshot` berulang kali tetap harus mengembalikan nilai yang sama. Jika tempat penyimpanan berubah dan nilai kembalian juga berubah (saat dibandingkan dengan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), React me-*render* ulang komponen tersebut.
diff --git a/vercel.json b/vercel.json
index eac0efb9c..8b0546e37 100644
--- a/vercel.json
+++ b/vercel.json
@@ -24,6 +24,11 @@
"destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key",
"permanent": false
},
+ {
+ "source": "/docs/lists-and-keys",
+ "destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key",
+ "permanent": false
+ },
{
"source": "/link/invalid-hook-call",
"destination": "/warnings/invalid-hook-call-warning",