From 1b5d52c1275eaa8064fad8d133f5744f39ef4be2 Mon Sep 17 00:00:00 2001 From: Resi Respati Date: Thu, 2 May 2024 13:19:34 +0700 Subject: [PATCH] resolve merge conflicts --- src/components/SocialBanner.tsx | 6 +--- .../reference/react-dom/client/createRoot.md | 13 +++----- .../reference/react-dom/client/hydrateRoot.md | 14 ++------ .../reference/react-dom/components/common.md | 18 +++-------- src/content/reference/react/Suspense.md | 4 --- src/content/reference/react/apis.md | 10 +----- src/content/reference/react/hooks.md | 32 ++----------------- src/content/reference/react/index.md | 13 ++------ .../reference/react/useDeferredValue.md | 27 ++++------------ 9 files changed, 25 insertions(+), 112 deletions(-) diff --git a/src/components/SocialBanner.tsx b/src/components/SocialBanner.tsx index 5f6836070..af2b60d07 100644 --- a/src/components/SocialBanner.tsx +++ b/src/components/SocialBanner.tsx @@ -7,11 +7,7 @@ import {useRef, useEffect} from 'react'; import cn from 'classnames'; import {ExternalLink} from './ExternalLink'; -<<<<<<< HEAD -const bannerText = 'Bergabung di React Conf tanggal 15-16 Mei.'; -======= -const bannerText = 'Stream React Conf on May 15-16.'; ->>>>>>> 9e1f5cd590fd066e72dda9022237bee30b499951 +const bannerText = 'Tonton siaran langsung React Conf tanggal 15-16 Mei.'; const bannerLink = 'https://conf.react.dev/'; const bannerLinkText = 'Info lebih lanjut.'; diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 6d3ef6ae0..3a09f02dd 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -44,17 +44,12 @@ Aplikasi yang sepenuhnya dibuat dengan React biasanya cukup memanggil `createRoo * `domNode`: Sebuah [elemen DOM.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React akan membuat akar untuk elemen DOM ini dan memungkinkan Anda untuk memanggil fungsi lain pada akar, seperti `render` untuk menampilkan konten React yang sudah di-*render*. * **opsional** `options`: Sebuah objek dengan opsi-opsi berikut untuk akar React ini. - * **opsional** `onRecoverableError`: *Callback* yang dipanggil saat React berhasil pulih secara otomatis dari kesalahan. - * **opsional** `identifierPrefix`: sebuah *string* yang React gunakan untuk ID yang dibuat oleh [`useId`.](/reference/react/useId) Berguna untuk mencegah konflik saat menggunakan banyak akar pada halaman yang sama. + * **opsional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`. + * **opsional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`. + * **opsional** `onRecoverableError`: *Callback* yang dipanggil saat React berhasil pulih secara otomatis dari kesalahan. Dipanggil dengan `error` yang dikembalikan React, dan obyek `errorInfo` berisi `componentStack`. Beberapa kesalahan yang dapat dipulihkan mungkin akan berisi kesalahan aslinya sebagai `error.cause`. + * **opsional** `identifierPrefix`: Awalan string yang digunakan React untuk ID yang dihasilkan oleh [`useId`.](/reference/react/useId) Berguna untuk mencegah konflik saat menggunakan banyak akar pada halaman yang sama. -<<<<<<< HEAD #### Kembalian {/*returns*/} -======= - * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`. - * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`. - * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`. - * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. ->>>>>>> 9e1f5cd590fd066e72dda9022237bee30b499951 `createRoot` mengembalikan sebuah objek dengan dua *method*: [`render`](#root-render) dan [`unmount`.](#root-unmount) diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 3384ca3b6..31bf02292 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -40,16 +40,10 @@ React akan ditambahkan ke dalam HTML yang ada di dalam `domNode`, dan mengambil * `reactNode`: "React node" yang digunakan untuk me-render HTML yang ada. Biasanya berupa bagian dari JSX seperti `` yang dengan *method* `ReactDOM Server` seperti `renderToPipeableStream()`. * **opsional** `options`: Objek dengan opsi untuk akar React. - -<<<<<<< HEAD - * **opsional** `onRecoverableError`: *Callback* dipanggil ketika React secara otomatis pulih dari kesalahan. - * **opsional** `identifierPrefix`: Awalan string yang digunakan React untuk ID yang dihasilkan oleh [`useId`.](/reference/react/useId) Berguna untuk menghindari konflik ketika menggunakan beberapa akar pada halaman yang sama. Harus awalan yang sama dengan yang digunakan pada *server*. -======= * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`. * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown and an `errorInfo` object containing the `componentStack`. - * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with the `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`. - * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server. ->>>>>>> 9e1f5cd590fd066e72dda9022237bee30b499951 + * **opsional** `onRecoverableError`: *Callback* yang dipanggil saat React berhasil pulih secara otomatis dari kesalahan. Dipanggil dengan `error` yang dikembalikan React, dan obyek `errorInfo` berisi `componentStack`. Beberapa kesalahan yang dapat dipulihkan mungkin akan berisi kesalahan aslinya sebagai `error.cause`. + * **opsional** `identifierPrefix`: Awalan string yang digunakan React untuk ID yang dihasilkan oleh [`useId`.](/reference/react/useId) Berguna untuk menghindari konflik ketika menggunakan beberapa akar pada halaman yang sama. Harus awalan yang sama dengan yang digunakan pada *server*. #### Kembalian {/*returns*/} @@ -377,10 +371,7 @@ export default function App({counter}) { -<<<<<<< HEAD Tidak lazim untuk memanggil [`root.render`](#root-render) pada *hydrated root*. Biasanya, Anda akan [memperbarui *state*](/reference/react/useState) di dalam salah satu komponen sebagai gantinya. -======= -It is uncommon to call [`root.render`](#root-render) on a hydrated root. Usually, you'll [update state](/reference/react/useState) inside one of the components instead. ### Show a dialog for uncaught errors {/*show-a-dialog-for-uncaught-errors*/} @@ -1204,4 +1195,3 @@ root.render(App, {onUncaughtError}); // ✅ Correct: pass options to createRoot. const root = hydrateRoot(container, , {onUncaughtError}); ``` ->>>>>>> 9e1f5cd590fd066e72dda9022237bee30b499951 diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index 2adae988e..47e499aca 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -258,20 +258,13 @@ React juga akan memanggi *callback* `ref` setiap kali anda mengoper sebuah *call #### Parameter {/*ref-callback-parameters*/} -<<<<<<< HEAD * `node`: Sebuah *node* DOM atau `null`. React akan mengoper kepada anda *node* DOM saat ref terpasang, dan `null` saat ref dilepas. Kecuali, jika anda mengoper referensi fungsi yang sama untuk *callback* `ref` pada setiap *render*, *callback* tersebut akan secara sementara dilepaskan dan dipasang kembali pada setiap *render* ulang dari komponen tersebut. -======= -* `node`: A DOM node or `null`. React will pass you the DOM node when the ref gets attached, and `null` when the `ref` gets detached. Unless you pass the same function reference for the `ref` callback on every render, the callback will get temporarily detached and re-attached during every re-render of the component. ->>>>>>> 9e1f5cd590fd066e72dda9022237bee30b499951 -#### Pengembalian (Returns) {/*returns*/} +#### Kembalian {/*returns*/} -<<<<<<< HEAD -Jangan menggembalikan apa pun pada *callback* `ref`. -======= -* **optional** `cleanup function`: When the `ref` is detached, React will call the cleanup function. If a function is not returned by the `ref` callback, React will call the callback again with `null` as the argument when the `ref` gets detached. +* **opsional** fungsi `cleanup`: Ketika `ref` dilepas, React akan memanggil fungsi `cleanup`. Jika fungsi tidak dikembalikan oleh *callback* `ref`, React akan memanggil ulang *callback* dengan `null` sebagai argumen ketika `ref` dilepas. ```js @@ -285,13 +278,12 @@ Jangan menggembalikan apa pun pada *callback* `ref`. ``` -#### Caveats {/*caveats*/} +#### Catatan Penting {/*caveats*/} -* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function. -* When you pass a *different* `ref` callback, React will call the *previous* callback's cleanup function if provided. If not cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node. +* Ketika mode Strict diaktifkan, React akan **menjalankan satu siklus *setup+cleanup* khusus pengembangan tambahan** sebelum penyiapan sebenarnya yang pertama. Ini adalah *stress-test* yang memastikan bahwa logika pembersihan Anda "mencerminkan" logika pengaturan Anda dan menghentikan atau membatalkan apa pun yang sedang dilakukan pengaturan. Jika ini menyebabkan masalah, implementasikan fungsi pembersihan. +* Ketika Anda mengoper *callback* `ref` *yang berbeda*, React akan memanggil fungsi pembersihan *callback* *sebelumnya* jika disediakan. Jika fungsi pembersihan tidak ditentukan, callback `ref` akan dipanggil dengan `null` sebagai argumennya. Fungsi *next* akan dipanggil dengan simpul DOM. ->>>>>>> 9e1f5cd590fd066e72dda9022237bee30b499951 --- diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md index ec54108df..130d1c366 100644 --- a/src/content/reference/react/Suspense.md +++ b/src/content/reference/react/Suspense.md @@ -1744,11 +1744,7 @@ function Router() { // ... ``` -<<<<<<< HEAD Dengan begitu, React diberi tahu bahwa transisi *state* tidak mendesak, dan lebih baik tetap menampilkan halaman sebelumnya daripada menyembunyikan konten yang sudah ditampilkan. Sekarang pengklikan tombol akan "menunggu" sampai `Biography` dimuat: -======= -This tells React that the state transition is not urgent, and it's better to keep showing the previous page instead of hiding any already revealed content. Now clicking the button "waits" for the `Biography` to load: ->>>>>>> 9e1f5cd590fd066e72dda9022237bee30b499951 diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md index 115d2e525..e30064cb0 100644 --- a/src/content/reference/react/apis.md +++ b/src/content/reference/react/apis.md @@ -10,18 +10,11 @@ Selain [Hooks](/reference/react) dan [Components](/reference/react/components), --- -<<<<<<< HEAD * [`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) +* [`forwardRef`](/reference/react/forwardRef) memungkinkan Anda mengekspos sebuah simpul DOM sebagai sebuah *ref* kepada *parent*. Digunakan dengan [`useRef`.](/reference/react/useRef) * [`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) -======= -* [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext) -* [`forwardRef`](/reference/react/forwardRef) lets your component expose a DOM node as a ref to the parent. Used with [`useRef`.](/reference/react/useRef) -* [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time. -* [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback) -* [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition) --- @@ -39,4 +32,3 @@ function MessageComponent({ messagePromise }) { // ... } ``` ->>>>>>> 9e1f5cd590fd066e72dda9022237bee30b499951 diff --git a/src/content/reference/react/hooks.md b/src/content/reference/react/hooks.md index fe324fe52..af6cbe3e2 100644 --- a/src/content/reference/react/hooks.md +++ b/src/content/reference/react/hooks.md @@ -106,42 +106,14 @@ Untuk memprioritaskan pe-*render*-an, gunakan salah satu dari *Hook-hook* ini: --- -<<<<<<< HEAD -## Hook Resource {/*resource-hooks*/} - -*Resource* dapat diakses sebuah komponen tanpa membuatnya menjadi bagian dari *state*. Misalnya, sebuah komponen dapat membaca pesan dari sebuah *Promise* atau membaca informasi *style* dari sebuah *context*. - -To read a value from a resource, use this Hook: - -- [`use`](/reference/react/use) memungkinkan Anda membaca nilai dari sebuah *resource seperti* [*Promise*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) atau [*context*](/learn/passing-data-deeply-with-context). - -```js -function MessageComponent({ messagePromise }) { - const message = use(messagePromise); - const theme = use(ThemeContext); - // ... -} -``` - ---- - -## Hook lainnya {/*other-hooks*/} -======= -## Other Hooks {/*other-hooks*/} ->>>>>>> 9e1f5cd590fd066e72dda9022237bee30b499951 +## Hook lainya {/*other-hooks*/} Ini adalah Hook yang sebagian besar berguna untuk penulis pustaka dan tidak umum digunakan di dalam kode aplikasi. -<<<<<<< HEAD - [`useDebugValue`](/reference/react/useDebugValue) memungkinkan Anda memodifikasi tampilan label React DevTools untuk Hook kustom Anda. - [`useId`](/reference/react/useId) memungkinkan komponen mengasosiasikan ID unik dengan dirinya sendiri. Biasanya digunakan dengan API aksesibilitas. - [`useSyncExternalStore`](/reference/react/useSyncExternalStore) memungkinkan komponen berlangganan ke *store* eksternal. -======= -- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook. -- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs. -- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store. -* [`useActionState`](/reference/react/useActionState) allows you to manage state of actions. ->>>>>>> 9e1f5cd590fd066e72dda9022237bee30b499951 +* [`useActionState`](/reference/react/useActionState) memungkinkan Anda mengelola *state* dari *action*. --- diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 07bbecfe3..ba5a556e5 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -14,17 +14,10 @@ Dokumentasi referensi React dibagi menjadi beberapa sub-bagian fungsional: Fitur-fitur React yang diprogram: -<<<<<<< HEAD -* [*Hooks*](/reference/react/hooks) — Gunakan fitur React yang berbeda dari komponen Anda. -* [Components](/reference/react/components) — Mendokumentasikan komponen bawaan yang dapat digunakan di JSX Anda. +* [*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. -* [Directives](/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) - Documents 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. ->>>>>>> 9e1f5cd590fd066e72dda9022237bee30b499951 +* [Directive](/reference/react/directives) — Menyediakan instruksi ke *bundler* yang kompatibel dengan React Server Component. ## React DOM {/*react-dom*/} diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md index 90013113c..4daa854d4 100644 --- a/src/content/reference/react/useDeferredValue.md +++ b/src/content/reference/react/useDeferredValue.md @@ -34,39 +34,26 @@ function SearchPage() { [Lihat contoh lainnya di bawah ini.](#usage) -#### Parameters {/*parameters*/} +#### Parameter {/*parameters*/} -<<<<<<< HEAD * `value`: Nilai yang ingin Anda tangguhkan. Nilai ini dapat memiliki tipe apa saja. +* **opsional** `initialValue`: A value to use during the initial render of a component. If this option is omitted, `useDeferredValue` will not defer during the initial render, because there's no previous version of `value` that it can render instead. -#### Returns {/*returns*/} - -Selama render awal, nilai tangguhan yang dikembalikan akan sama dengan nilai yang Anda berikan. Selama pembaruan, React pertama-tama akan mencoba render ulang dengan nilai lama (sehingga akan mengembalikan nilai lama), dan kemudian mencoba render ulang lainnya di latar belakang dengan nilai baru (sehingga akan mengembalikan nilai yang diperbarui). - -#### Caveats {/*caveats*/} - -- Nilai yang Anda oper ke `useDeferredValue` harus berupa nilai primitif (seperti string dan angka) atau objek yang dibuat di luar *rendering*. Jika Anda membuat objek baru selama perenderan dan langsung mengopernya ke `useDeferredValue`, objek tersebut akan berbeda di setiap perenderan, menyebabkan render ulang latar belakang yang tidak perlu. -======= -* `value`: The value you want to defer. It can have any type. -* **optional** `initialValue`: A value to use during the initial render of a component. If this option is omitted, `useDeferredValue` will not defer during the initial render, because there's no previous version of `value` that it can render instead. - - -#### Returns {/*returns*/} +#### Kembalian {/*returns*/} - `currentValue`: During the initial render, the returned deferred value will be the same as the value you provided. During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in the background with the new value (so it will return the updated value). -In the latest React Canary versions, `useDeferredValue` returns the `initialValue` on initial render, and schedules a re-render in the background with the `value` returned. +Di versi Canary React terbaru, `useDeferredValue` mengembalikan `initialValue` pada *render* awal, dan menjadwalkan *render* ulang di balik layar dengan `value` dikembalikan. -#### Caveats {/*caveats*/} +#### Catatan penting {/*caveats*/} -- When an update is inside a Transition, `useDeferredValue` always returns the new `value` and does not spawn a deferred render, since the update is already deferred. +- Ketika pembaruan berada di dalam *Transition*, `useDeferredValue` selalu mengembalikan `value` yang baru dan tidak memunculkan *render* yang ditunda, karena pembaruan telah ditunda. -- The values you pass to `useDeferredValue` should either be primitive values (like strings and numbers) or objects created outside of rendering. If you create a new object during rendering and immediately pass it to `useDeferredValue`, it will be different on every render, causing unnecessary background re-renders. ->>>>>>> 9e1f5cd590fd066e72dda9022237bee30b499951 +- Nilai yang Anda oper ke `useDeferredValue` harus berupa nilai primitif (seperti string dan angka) atau objek yang dibuat di luar *rendering*. Jika Anda membuat objek baru selama perenderan dan langsung mengopernya ke `useDeferredValue`, objek tersebut akan berbeda di setiap perenderan, menyebabkan render ulang latar belakang yang tidak perlu. - Ketika `useDeferredValue` menerima nilai yang berbeda (dibandingkan dengan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), di selain render saat ini (ketika masih menggunakan nilai sebelumnya), ia menjadwalkan render ulang di latar belakang dengan nilai baru. Render ulang latar belakang dapat diinterupsi: jika ada pembaruan lain pada `value`, React akan memulai lagi render ulang latar belakang dari awal. Misalnya, jika pengguna mengetik input lebih cepat daripada bagan yang menerima nilai yang ditangguhkan dapat render ulang, bagan hanya akan render ulang setelah pengguna berhenti mengetik.