);
}
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..069aaa2ca 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?
+>>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3
diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 355bb25a4..270d5692b 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}`.
+>>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3
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`"*.
+>>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3
@@ -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..ef1e81fc5 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.
+=======
+The 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.
+>>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3
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..5a9887a96 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:
+>>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3
* [``](/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..678645cf1 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.
+>>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3
## 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/useCallback.md b/src/content/reference/react/useCallback.md
index 9f1c7ba5b..60ef0e534 100644
--- a/src/content/reference/react/useCallback.md
+++ b/src/content/reference/react/useCallback.md
@@ -712,7 +712,7 @@ function ChatRoom({ roomId }) {
useEffect(() => {
const options = createOptions();
- const connection = createConnection();
+ const connection = createConnection(options);
connection.connect();
// ...
```
@@ -723,7 +723,7 @@ Hal ini menimbulkan masalah. [ Setiap nilai reaktif harus dideklarasikan sebagai
```js {6}
useEffect(() => {
const options = createOptions();
- const connection = createConnection();
+ const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, [createOptions]); // 🔴 Masalah: dependensi ini akan berubah setiap render
@@ -745,7 +745,7 @@ function ChatRoom({ roomId }) {
useEffect(() => {
const options = createOptions();
- const connection = createConnection();
+ const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, [createOptions]); // ✅ hanya berubah ketika createOptions berubah
@@ -767,7 +767,7 @@ function ChatRoom({ roomId }) {
}
const options = createOptions();
- const connection = createConnection();
+ const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, [roomId]); // ✅ hanya berubah ketika roomId berubah
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/useMemo.md b/src/content/reference/react/useMemo.md
index 38f672477..21593e0a3 100644
--- a/src/content/reference/react/useMemo.md
+++ b/src/content/reference/react/useMemo.md
@@ -1056,7 +1056,88 @@ Catat bahwa Anda perlu menjalankan React di mode *production*, non-aktifkan [Rea
---
+<<<<<<< HEAD
### Memoisasi sebuah dependency dari Hook lain {/*memoizing-a-dependency-of-another-hook*/}
+=======
+### Preventing an Effect from firing too often {/*preventing-an-effect-from-firing-too-often*/}
+
+Sometimes, you might want to use a value inside an [Effect:](/learn/synchronizing-with-effects)
+
+```js {4-7,10}
+function ChatRoom({ roomId }) {
+ const [message, setMessage] = useState('');
+
+ const options = {
+ serverUrl: 'https://localhost:1234',
+ roomId: roomId
+ }
+
+ useEffect(() => {
+ const connection = createConnection(options);
+ connection.connect();
+ // ...
+```
+
+This creates a problem. [Every reactive value must be declared as a dependency of your Effect.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) However, if you declare `options` as a dependency, it will cause your Effect to constantly reconnect to the chat room:
+
+
+```js {5}
+ useEffect(() => {
+ const connection = createConnection(options);
+ connection.connect();
+ return () => connection.disconnect();
+ }, [options]); // 🔴 Problem: This dependency changes on every render
+ // ...
+```
+
+To solve this, you can wrap the object you need to call from an Effect in `useMemo`:
+
+```js {4-9,16}
+function ChatRoom({ roomId }) {
+ const [message, setMessage] = useState('');
+
+ const options = useMemo(() => {
+ return {
+ serverUrl: 'https://localhost:1234',
+ roomId: roomId
+ };
+ }, [roomId]); // ✅ Only changes when roomId changes
+
+ useEffect(() => {
+ const options = createOptions();
+ const connection = createConnection(options);
+ connection.connect();
+ return () => connection.disconnect();
+ }, [options]); // ✅ Only changes when createOptions changes
+ // ...
+```
+
+This ensures that the `options` object is the same between re-renders if `useMemo` returns the cached object.
+
+However, since `useMemo` is performance optimization, not a semantic guarantee, React may throw away the cached value if [there is a specific reason to do that](#caveats). This will also cause the effect to re-fire, **so it's even better to remove the need for a function dependency** by moving your object *inside* the Effect:
+
+```js {5-8,13}
+function ChatRoom({ roomId }) {
+ const [message, setMessage] = useState('');
+
+ useEffect(() => {
+ const options = { // ✅ No need for useMemo or object dependencies!
+ serverUrl: 'https://localhost:1234',
+ roomId: roomId
+ }
+
+ const connection = createConnection(options);
+ connection.connect();
+ return () => connection.disconnect();
+ }, [roomId]); // ✅ Only changes when roomId changes
+ // ...
+```
+
+Now your code is simpler and doesn't need `useMemo`. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
+
+
+### Memoizing a dependency of another Hook {/*memoizing-a-dependency-of-another-hook*/}
+>>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3
Misalkan Anda mempunyai perhitungan yang bergantung pada objek yang dibuat langsung pada badan komponen:
diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md
index 17fa313f4..8fe49c6b1 100644
--- a/src/content/reference/react/useReducer.md
+++ b/src/content/reference/react/useReducer.md
@@ -51,8 +51,14 @@ function MyComponent() {
#### Peringatan {/*caveats*/}
+<<<<<<< HEAD
* `useReducer` adalah sebuah Hook, jadi Anda hanya dapat memanggilnya **di tingkat atas komponen Anda** atau Hook Anda sendiri. Anda tidak dapat memanggilnya di dalam loop atau pengkondisian. Jika Anda perlu melakukannya, ekstrak komponen baru dan pindahkan state ke dalamnya.
* Dalam Strict Mode, React akan **memanggil reducer dan inisialisasi Anda sebanyak dua kali** untuk [membantu Anda menemukan ketidakmurnian yang tidak disengaja.](#my-reducer-or-initializer-function-runs-twice) Ini adalah perilaku khusus untuk tahap pengembangan dan tidak mempengaruhi tahap produksi. Jika reducer dan inisialisasi Anda murni (sebagai mestinya), ini tidak akan mempengaruhi logika Anda. Hasil dari salah satu panggilan diabaikan.
+=======
+* `useReducer` 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 new component and move the state into it.
+* The `dispatch` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
+* In Strict Mode, React will **call your reducer and initializer twice** in order to [help you find accidental impurities.](#my-reducer-or-initializer-function-runs-twice) This is development-only behavior and does not affect production. If your reducer and initializer are pure (as they should be), this should not affect your logic. The result from one of the calls is ignored.
+>>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3
---
diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md
index 132c3ae7c..2bdaf3cd9 100644
--- a/src/content/reference/react/useState.md
+++ b/src/content/reference/react/useState.md
@@ -85,7 +85,13 @@ Fungsi `set` tidak memiliki nilai kembalian.
* React [pembaruan state berkelompok.](/learn/queueing-a-series-of-state-updates) Fungsi `set` akan memperbarui tampilan **setelah semua *event handler* selesai dijalankan** dan memanggil fungsi `set` masing-masing. Hal ini mencegah terjadinya beberapa pembaruan ulang selama satu *event*. Dalam kasus yang jarang terjadi di mana Anda perlu memaksa React untuk memperbarui tampilan lebih awal, misalnya untuk mengakses DOM, Anda dapat menggunakan [`flushSync`.](/reference/react-dom/flushSync)
+<<<<<<< HEAD
* Memanggil fungsi `set` selama *rendering* hanya diperbolehkan dari dalam komponen yang sedang di-*render* saat ini. React akan membuang hasilnya dan segera mencoba me-*render* kembali dengan *state* yang baru. Pola ini jarang dibutuhkan, tetapi bisa digunakan untuk **menyimpan informasi dari render sebelumnya**. [See an example below.](#storing-information-from-previous-renders)
+=======
+* The `set` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
+
+* Calling the `set` function *during rendering* is only allowed from within the currently rendering component. React will discard its output and immediately attempt to render it again with the new state. This pattern is rarely needed, but you can use it to **store information from the previous renders**. [See an example below.](#storing-information-from-previous-renders)
+>>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3
* Pada mode ketat, React akan **memanggil fungsi pembaruan Anda dua kali** untuk [membantu Anda menemukan kejadian yang tidak diharapkan.](#my-initializer-or-updater-function-runs-twice) Ini hanya terjadi di lingkungan pengembangan dan tidak memengaruhi produksi. Jika fungsi pembaruan Anda murni (seperti seharusnya), ini tidak akan memengaruhi perilakunya. Hasil dari salah satu panggilan akan diabaikan.
diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md
index c4bac2d3b..68b1d302a 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.
+>>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3
* `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/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 51fd60ceb..e6f33ecc0 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -80,7 +80,13 @@ function TabContainer() {
* Fungsi yang Anda kirimkan kepada `startTransition` haruslah sinkron. React akan langsung mengeksekusi fungsi ini, menandai semua perubahan *state* yang terjadi sambil mengeksekusinya sebagai transisi. Jika Anda mencoba untuk melakukan perubahan *state* lebih nanti (contoh, saat *timeout*), mereka tidak akan ditandai sebagai transisi.
+<<<<<<< HEAD
* Perubahan *state* yang ditandai sebagai transisi akan terganggu oleh perubahan *state* lainnya. Contohnya, jika anda mengubah komponen chart di dalam transisi, namun kemudian memulai mengetik dalam input ketika chart sedang di tengah me*render* ulang, React akan me*render* ulang pekerjaan pada komponen chart setelah mengerjakan perubahan pada input.
+=======
+* The `startTransition` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
+
+* A state update marked as a Transition will be interrupted by other state updates. For example, if you update a chart component inside a Transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input update.
+>>>>>>> c003ac4eb130fca70b88cf3a1b80ce5f76c51ae3
* Perubahan transisi tidak dapat digunakan untuk mengontrol input teks.
diff --git a/src/content/reference/rsc/server-actions.md b/src/content/reference/rsc/server-actions.md
index 06613cb7c..d24e896f0 100644
--- a/src/content/reference/rsc/server-actions.md
+++ b/src/content/reference/rsc/server-actions.md
@@ -53,7 +53,7 @@ When React renders the `EmptyNote` Server Component, it will create a reference
export default function Button({onClick}) {
console.log(onClick);
// {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
- return
+ return
}
```
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",