From 31b7881905460b755345b41110892f5c5af80679 Mon Sep 17 00:00:00 2001
From: Kathryn Middleton <kmiddleton14@gmail.com>
Date: Mon, 16 Oct 2023 15:03:02 -0400
Subject: [PATCH 01/52] Add GA4 tag to react.dev (#6350)

---
 src/pages/_document.tsx | 9 +++++++++
 src/siteConfig.js       | 1 +
 2 files changed, 10 insertions(+)
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 392fdf88a..d8fb0c621 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -9,6 +9,15 @@ const MyDocument = () => {
   return (
     <Html lang={siteConfig.languageCode} dir={siteConfig.isRTL ? 'rtl' : 'ltr'}>
       <Head />
+      <script
+        async
+        src={`https://www.googletagmanager.com/gtag/js?id=${siteConfig.googleAnalyticsTagId}`}
+      />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '${siteConfig.googleAnalyticsTagId}');`,
+        }}
+      />
       <body className="font-text font-medium antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
         <script
           dangerouslySetInnerHTML={{
diff --git a/src/siteConfig.js b/src/siteConfig.js
index 0ada6b934..c676ca6e2 100644
--- a/src/siteConfig.js
+++ b/src/siteConfig.js
@@ -17,4 +17,5 @@ exports.siteConfig = {
     apiKey: 'e8451218980a351815563de007648b00',
     indexName: 'beta-react',
   },
+  googleAnalyticsTagId: 'G-B1E83PJ3RT',
 };

From d22efb32f192ccd139e4ea6c39b47de7af50d2c3 Mon Sep 17 00:00:00 2001
From: "Alex P. Andrade" <g.alex.andrade@gmail.com>
Date: Mon, 16 Oct 2023 23:29:50 -0600
Subject: [PATCH 02/52] Added new meetup in Saskatoon - SK (#6341)

Added new meetup in Saskatoon - SK
---
 src/content/community/meetups.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index 680fd323b..644bbcee3 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -48,6 +48,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
 * [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/)
 * [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
+* [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)
 * [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)
 
 ## Chile {/*chile*/}

From 90ca701621424ca6cb4b2753df600604e73f465f Mon Sep 17 00:00:00 2001
From: Matt Carroll <7158882+mattcarrollcode@users.noreply.github.com>
Date: Tue, 17 Oct 2023 15:33:17 -0700
Subject: [PATCH 03/52] Add `useFormStatus` Hook API reference documentation
 (#6314)

Co-authored-by: Luna Wei <luwe@fb.com>
---
 .../reference/react-dom/hooks/index.md        |  48 ++++
 .../react-dom/hooks/useFormStatus.md          | 260 ++++++++++++++++++
 src/sidebarReference.json                     |  11 +
 3 files changed, 319 insertions(+)
 create mode 100644 src/content/reference/react-dom/hooks/index.md
 create mode 100644 src/content/reference/react-dom/hooks/useFormStatus.md

diff --git a/src/content/reference/react-dom/hooks/index.md b/src/content/reference/react-dom/hooks/index.md
new file mode 100644
index 000000000..c7afa1189
--- /dev/null
+++ b/src/content/reference/react-dom/hooks/index.md
@@ -0,0 +1,48 @@
+---
+title: "React DOM Hooks"
+---
+
+<Intro>
+
+The `react-dom` package contains Hooks that are only supported for web applications (which run in the browser DOM environment). These Hooks are not supported in non-browser environments like iOS, Android, or Windows applications. If you are looking for Hooks that are supported in web browsers *and other environments* see [the React Hooks page](/reference/react). This page lists all the Hooks in the `react-dom` packakge.
+
+</Intro>
+
+---
+
+## Form Hooks {/*form-hooks*/}
+
+<Canary>
+
+Form Hooks are currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+</Canary>
+
+*Forms* let you create interactive controls for submitting information.  To manage forms in your components, use one of these Hooks:
+
+* [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) allows you to make updates to the UI based on the status of the a form.
+* `useFormState` allows you to manage state inside a form.
+
+```js
+function Form({ action }) {
+  async function increment(n) {
+    return n + 1;
+  }
+  const [count, incrementFormAction] = useFormState(increment, 0);
+  return (
+    <form action={action}>
+      <button formAction={incrementFormAction}>Count: {count}</button>
+      <Button />
+    </form>
+  );
+}
+
+function Button() {
+  const { pending } = useFormStatus();
+  return (
+    <button disabled={pending} type="submit">
+      Submit
+    </button>
+  );
+}
+```
diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md
new file mode 100644
index 000000000..ec63ed31f
--- /dev/null
+++ b/src/content/reference/react-dom/hooks/useFormStatus.md
@@ -0,0 +1,260 @@
+---
+title: useFormStatus
+canary: true
+---
+
+<Canary>
+
+The `useFormStatus` Hook is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+</Canary>
+
+<Intro>
+
+`useFormStatus` is a Hook that gives you status information of the last form submission.
+
+```js
+const { pending, data, method, action } = useFormStatus();
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useFormStatus()` {/*use-form-status*/}
+
+The `useFormStatus` Hook provides status information of the last form submission.
+
+```js {4},[[1, 5, "status.pending"]]
+import action from './actions';
+
+function Submit() {
+  const status = useFormStatus();
+  return <button disabled={status.pending}>Submit</button>
+}
+
+export default App() {
+  return (
+    <form action={action}>
+      <Submit />
+    </form>
+  );
+}
+```
+
+To get status information, the `Submit` component must be rendered within a `<form>`. The Hook returns information like the <CodeStep step={1}>`pending`</CodeStep> property which tells you if the form is actively submitting. 
+
+In the above example, `Submit` uses this information to disable `<button>` presses while the form is submitting.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+`useFormStatus` does not take any parameters.
+
+#### Returns {/*returns*/}
+
+A `status` object with the following properties:
+
+* `pending`: A boolean. If `true`, this means the parent `<form>` is pending submission. Otherwise, `false`.
+
+* `data`: An object implementing the [`FormData interface`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) that contains the data the parent `<form>` is submitting. If there is no active submission or no parent `<form>`, it will be `null`.
+
+* `method`: A string value of either `'get'` or `'post'`. This represents whether the parent `<form>` is submitting with either a `GET` or `POST` [HTTP method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). By default, a `<form>` will use the `GET` method and can be specified by the [`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method) property.
+
+[//]: # (Link to `<form>` documentation. "Read more on the `action` prop on `<form>`.")
+* `action`: A reference to the function passed to the `action` prop on the parent `<form>`. If there is no parent `<form>`, the property is `null`. If there is a URI value provided to the `action` prop, or no `action` prop specified, `status.action` will be `null`.
+
+#### Caveats {/*caveats*/}
+
+* The `useFormStatus` Hook must be called from a component that is rendered inside a `<form>`. 
+* `useFormStatus` will only return status information for a parent `<form>`. It will not return status information for any `<form>` rendered in that same component or children components.
+
+---
+
+## Usage {/*usage*/}
+
+### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
+To display a pending state while a form is submitting, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned.
+
+Here, we use the `pending` property to indicate the form is submitting. 
+
+<Sandpack>
+
+```js App.js
+import { useFormStatus } from "react-dom";
+import { submitForm } from "./actions.js";
+
+function Submit() {
+  const { pending } = useFormStatus();
+  return (
+    <button type="submit" disabled={pending}>
+      {pending ? "Submitting..." : "Submit"}
+    </button>
+  );
+}
+
+function Form({ action }) {
+  return (
+    <form action={action}>
+      <Submit />
+    </form>
+  );
+}
+
+export default function App() {
+  return <Form action={submitForm} />;
+}
+```
+
+```js actions.js hidden
+export async function submitForm(query) {
+    await new Promise((res) => setTimeout(res, 1000));
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "^5.0.0"
+  },
+  "main": "/index.js",
+  "devDependencies": {}
+}
+```
+</Sandpack>  
+
+<Pitfall>
+
+##### `useFormStatus` will not return status information for a `<form>` rendered in the same component. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/}
+
+The `useFormStatus` Hook only returns status information for a parent `<form>` and not for any `<form>` rendered in the same component calling the Hook, or child components.
+
+```js
+function Form() {
+  // 🚩 `pending` will never be true
+  // useFormStatus does not track the form rendered in this component
+  const { pending } = useFormStatus();
+  return <form action={submit}></form>;
+}
+```
+
+Instead call `useFormStatus` from inside a component that is located inside `<form>`.
+
+```js
+function Submit() {
+  // ✅ `pending` will be derived from the form that wraps the Submit component
+  const { pending } = useFormStatus(); 
+  return <button disabled={pending}>...</button>;
+}
+
+function Form() {
+  // This is the <form> `useFormStatus` tracks
+  return (
+    <form action={submit}>
+      <Submit />
+    </form>
+  );
+}
+```
+
+</Pitfall>
+
+### Read the form data being submitted {/*read-form-data-being-submitted*/}
+
+You can use the `data` property of the status information returned from `useFormStatus` to display what data is being submitted by the user.
+
+Here, we have a form where users can request a username. We can use `useFormStatus` to display a temporary status message confirming what username they have requested.
+
+<Sandpack>
+
+```js UsernameForm.js active
+import {useState, useMemo, useRef} from 'react';
+import {useFormStatus} from 'react-dom';
+
+export default function UsernameForm() {
+  const {pending, data} = useFormStatus();
+
+  const [showSubmitted, setShowSubmitted] = useState(false);
+  const submittedUsername = useRef(null);
+  const timeoutId = useRef(null);
+
+  useMemo(() => {
+    if (pending) {
+      submittedUsername.current = data?.get('username');
+      if (timeoutId.current != null) {
+        clearTimeout(timeoutId.current);
+      }
+
+      timeoutId.current = setTimeout(() => {
+        timeoutId.current = null;
+        setShowSubmitted(false);
+      }, 2000);
+      setShowSubmitted(true);
+    }
+  }, [pending, data]);
+
+  return (
+    <>
+      <label>Request a Username: </label><br />
+      <input type="text" name="username" />
+      <button type="submit" disabled={pending}>
+        {pending ? 'Submitting...' : 'Submit'}
+      </button>
+      {showSubmitted ? (
+        <p>Submitted request for username: {submittedUsername.current}</p>
+      ) : null}
+    </>
+  );
+}
+```
+
+```js App.js
+import UsernameForm from './UsernameForm';
+import { submitForm } from "./actions.js";
+
+export default function App() {
+  return (
+    <form action={submitForm}>
+      <UsernameForm />
+    </form>
+  );
+}
+```
+
+```js actions.js hidden
+export async function submitForm(query) {
+    await new Promise((res) => setTimeout(res, 1000));
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "^5.0.0"
+  },
+  "main": "/index.js",
+  "devDependencies": {}
+}
+```
+</Sandpack>  
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### `status.pending` is never `true` {/*pending-is-never-true*/}
+
+`useFormStatus` will only return status information for a parent `<form>`. 
+
+If the component that calls `useFormStatus` is not nested in a `<form>`, `status.pending` will always return `false`. Verify `useFormStatus` is called in a component that is a child of a `<form>` element.
+
+`useFormStatus` will not track the status of a `<form>` rendered in the same component. See [Pitfall](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) for more details.
\ No newline at end of file
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index f9049956f..3c8daf71a 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -161,6 +161,17 @@
       "hasSectionHeader": true,
       "sectionHeader": "react-dom@18.2.0"
     },
+    {
+      "title": "Hooks",
+      "path": "/reference/react-dom/hooks",
+      "routes": [
+        {
+          "title": "useFormStatus",
+          "path": "/reference/react-dom/hooks/useFormStatus",
+          "canary": true
+        }
+      ]
+    },
     {
       "title": "Components",
       "path": "/reference/react-dom/components",

From 5750680120cce4b0afb4b3d1b4ddbec2eabc0d02 Mon Sep 17 00:00:00 2001
From: Yoshitaka Terazawa <locol6622@gmail.com>
Date: Wed, 18 Oct 2023 11:43:37 +0900
Subject: [PATCH 04/52] docs: Remove unnecessary `when` (#6344)

---
 src/content/reference/react/cache.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md
index 7f9afdb99..65d95ab76 100644
--- a/src/content/reference/react/cache.md
+++ b/src/content/reference/react/cache.md
@@ -252,7 +252,7 @@ function Page({id}) {
 
 When rendering `Page`, the component calls <CodeStep step={1}>`getUser`</CodeStep> but note that it doesn't use the returned data. This early <CodeStep step={1}>`getUser`</CodeStep> call kicks off the asynchronous database query that occurs while `Page` is doing other computational work and rendering children.
 
-When rendering `Profile`, we call <CodeStep step={2}>`getUser`</CodeStep> again. If the initial <CodeStep step={1}>`getUser`</CodeStep> call has already returned and cached the user data, when when `Profile` <CodeStep step={2}>asks and waits for this data</CodeStep>, it can simply read from the cache without requiring another remote procedure call. If the <CodeStep step={1}> initial data request</CodeStep> hasn't been completed, preloading data in this pattern reduces delay in data-fetching.
+When rendering `Profile`, we call <CodeStep step={2}>`getUser`</CodeStep> again. If the initial <CodeStep step={1}>`getUser`</CodeStep> call has already returned and cached the user data, when `Profile` <CodeStep step={2}>asks and waits for this data</CodeStep>, it can simply read from the cache without requiring another remote procedure call. If the <CodeStep step={1}> initial data request</CodeStep> hasn't been completed, preloading data in this pattern reduces delay in data-fetching.
 
 <DeepDive>
 

From b68e15a756d6915b35ba098c864ae5387a568c3e Mon Sep 17 00:00:00 2001
From: dragonsuperf <dragonsuperf@gmail.com>
Date: Wed, 18 Oct 2023 17:59:59 +0900
Subject: [PATCH 05/52] fix typo in react-dom/hooks (#6355)

---
 src/content/reference/react-dom/hooks/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/hooks/index.md b/src/content/reference/react-dom/hooks/index.md
index c7afa1189..6490dc111 100644
--- a/src/content/reference/react-dom/hooks/index.md
+++ b/src/content/reference/react-dom/hooks/index.md
@@ -4,7 +4,7 @@ title: "React DOM Hooks"
 
 <Intro>
 
-The `react-dom` package contains Hooks that are only supported for web applications (which run in the browser DOM environment). These Hooks are not supported in non-browser environments like iOS, Android, or Windows applications. If you are looking for Hooks that are supported in web browsers *and other environments* see [the React Hooks page](/reference/react). This page lists all the Hooks in the `react-dom` packakge.
+The `react-dom` package contains Hooks that are only supported for web applications (which run in the browser DOM environment). These Hooks are not supported in non-browser environments like iOS, Android, or Windows applications. If you are looking for Hooks that are supported in web browsers *and other environments* see [the React Hooks page](/reference/react). This page lists all the Hooks in the `react-dom` package.
 
 </Intro>
 

From 10574e59a81425e9e8f63f0b094d09e3636b3198 Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Wed, 18 Oct 2023 18:03:54 +0900
Subject: [PATCH 06/52] fix: add a missing import statement in useFormStatus.md
 (#6356)

* fix: add a missing import statement in useFormStatus.md

* Update src/content/reference/react-dom/hooks/useFormStatus.md

Co-authored-by: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>

---------

Co-authored-by: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
---
 src/content/reference/react-dom/hooks/useFormStatus.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md
index ec63ed31f..abaa9b6f2 100644
--- a/src/content/reference/react-dom/hooks/useFormStatus.md
+++ b/src/content/reference/react-dom/hooks/useFormStatus.md
@@ -29,7 +29,8 @@ const { pending, data, method, action } = useFormStatus();
 
 The `useFormStatus` Hook provides status information of the last form submission.
 
-```js {4},[[1, 5, "status.pending"]]
+```js {5},[[1, 6, "status.pending"]]
+import { useFormStatus } from "react-dom";
 import action from './actions';
 
 function Submit() {
@@ -257,4 +258,4 @@ export async function submitForm(query) {
 
 If the component that calls `useFormStatus` is not nested in a `<form>`, `status.pending` will always return `false`. Verify `useFormStatus` is called in a component that is a child of a `<form>` element.
 
-`useFormStatus` will not track the status of a `<form>` rendered in the same component. See [Pitfall](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) for more details.
\ No newline at end of file
+`useFormStatus` will not track the status of a `<form>` rendered in the same component. See [Pitfall](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) for more details.

From 9af01e2bb2c6517c3ca14b551cdfa42424370a6e Mon Sep 17 00:00:00 2001
From: Luna <lunaleaps@gmail.com>
Date: Thu, 19 Oct 2023 12:12:51 -0400
Subject: [PATCH 07/52] Describing Your UI > Your UI as a tree (#6334)

Co-authored-by: Luna Wei <luwe@fb.com>
---
 .../diagrams/conditional_render_tree.dark.png | Bin 0 -> 13413 bytes
 .../docs/diagrams/conditional_render_tree.png | Bin 0 -> 14003 bytes
 .../diagrams/generic_dependency_tree.dark.png | Bin 0 -> 11328 bytes
 .../docs/diagrams/generic_dependency_tree.png | Bin 0 -> 11852 bytes
 .../diagrams/generic_render_tree.dark.png     | Bin 0 -> 14768 bytes
 .../docs/diagrams/generic_render_tree.png     | Bin 0 -> 15294 bytes
 .../diagrams/module_dependency_tree.dark.png  | Bin 0 -> 16577 bytes
 .../docs/diagrams/module_dependency_tree.png  | Bin 0 -> 16977 bytes
 .../images/docs/diagrams/render_tree.dark.png | Bin 0 -> 12030 bytes
 public/images/docs/diagrams/render_tree.png   | Bin 0 -> 12607 bytes
 src/content/learn/describing-the-ui.md        |  24 ++
 .../learn/preserving-and-resetting-state.md   |  24 +-
 .../learn/understanding-your-ui-as-a-tree.md  | 299 ++++++++++++++++++
 src/sidebarLearn.json                         |   4 +
 14 files changed, 331 insertions(+), 20 deletions(-)
 create mode 100644 public/images/docs/diagrams/conditional_render_tree.dark.png
 create mode 100644 public/images/docs/diagrams/conditional_render_tree.png
 create mode 100644 public/images/docs/diagrams/generic_dependency_tree.dark.png
 create mode 100644 public/images/docs/diagrams/generic_dependency_tree.png
 create mode 100644 public/images/docs/diagrams/generic_render_tree.dark.png
 create mode 100644 public/images/docs/diagrams/generic_render_tree.png
 create mode 100644 public/images/docs/diagrams/module_dependency_tree.dark.png
 create mode 100644 public/images/docs/diagrams/module_dependency_tree.png
 create mode 100644 public/images/docs/diagrams/render_tree.dark.png
 create mode 100644 public/images/docs/diagrams/render_tree.png
 create mode 100644 src/content/learn/understanding-your-ui-as-a-tree.md

diff --git a/public/images/docs/diagrams/conditional_render_tree.dark.png b/public/images/docs/diagrams/conditional_render_tree.dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..5189a44c80c32e9d33fd84f4719d4feafbb44c97
GIT binary patch
literal 13413
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
E0*Cxr(f|Me

literal 0
HcmV?d00001

diff --git a/public/images/docs/diagrams/conditional_render_tree.png b/public/images/docs/diagrams/conditional_render_tree.png
new file mode 100644
index 0000000000000000000000000000000000000000..c76e8cb63482b4f9fb753485dbefa98a8f0d6977
GIT binary patch
literal 14003
zcmbWecT`hfw>2C@LFtO3l+Zys2m%s%lh8W|7(nU01wsb}MCl#r0tq0!mrxZEksg|q
z&|3(-S9znq=icvm?sv!g$2$h(?7h}pbIr3e_E~4FJ@P?ILy44#h6n%vkSc=}bO3;x
z7y#ggz-@e-WjT8=3wOC`Bdab8093^iU%tA9o8x)tD9HiJ2k3A}z#Uhxkp}=kO!?;@
z50IYu2nT>^sp%;yxvByD@&UnxfZ!Z}FC5^D_%rp*2l(d$ymJ6P`2fE>KybxhZyvxm
z58#Kx;EaEffAIf|;gYbJKOw$2lH5NezWEZ~k$=4Z0DN$Pc>o_cj$Fzs=1+Jq0!J<r
z94q4;E8`j~0gICGjQYdipD*bZBL&0#MM-!?f;=O*VMzjB2~u9sGQP1m``;{i*VorL
zW=Whe0~y>h+&;U`7*S5~_Vdok+1&O4V`K$mM1^_j_qm+|*V<n5(yqCk!%zKa^OCN(
zZxik4^_+fmPXCNRVy#wwM^NkV-1gz%>h|F3mOx@%#rR@u*Tmq;wpM;Sg-=$+*i!7b
z30m(oK3HPK*ka}Q;%%Q#4Bj8feX@vsa>Tr1#9*<+zBv`+ORjajE_J<TrCm3Db7_6j
z1Yz+vee?KW3Bs^A5m=l|MsvsPdiyLUxOF(FW%!F1r~>!BNJ4cqbOAezjC1Dg!7_}W
zTq!7UqqrP_!JXKgb}fP6pbD9w!9mwp*TF$E0WAtfinzE6mz}w|V1c=vV1c;cN-9J7
zVF2K%zp{d?p7+!y8e?c;b)(}|0y`@OhZSdi-7ot>zNPiei-j<OJF2-vYN^A;W1#JU
zOreW*X_%@zzAWOVuX4^>NEq#H?;W3@wN`Emi`|*xxknYDc^uLF1JkS>mExlG5!Nlv
zH30dip4_41$N9~@if%9`8==rH&J2P_Df@D^lD7O0`$8zFeu|I@z^T!4zZz>^N?<cy
zeJLe-6l2mw0!ctBW)MDl=X)DBPC^>E8sB*IPIcjnyS8v=Bk9e|8SJb4%3KrYj8VK!
z0a~vJ6XeR)Zl3y0l2>b<WgUo%zHM%Sn+Vs24ulE$gN)nHswh$-d2VLh)&c<#_*x(t
zOcI$E2!WrZfdL?N|26%8@dWE~qmS)N%b*?WDch}awp>5~Bw|`wwILVU@gv1q(sDeB
z?9mviOBWeEwk}<wLKtO_5y}6tB@L=k&O+hYm?5tk-C$E?>+RDxpEYLjYCLOY#rjaw
zVK<DOJht&S{7MTG?4gZ3sYZ`4&!K1c>#S?21CX<qx|tmpJBO>m!^FcAJ5F6S9no3h
zDunmjpyF9rRkF-PTlQX<Nfu>I3C!K2!`iQ~=JHqS0w>UQ9HAOBxYf<Db)1t3R+%7?
zq=mU7{G?C5#-Q-J_#nPgdDAUhZKy6)V-u4T(ZoD7Hkr@Vwc_GyISMa~4>D7BfeGI^
z&Px1I;K2ZwoY~weEH4mhfgYbQLRCLQWn@)TXBet-vO?A~auA5=9e;>mD>k{jhC8Fc
z*#r}OBh|T(wi3)8q`}OI4r$ApJmfIdLAD>N6Pe(|H$pScgoviyI=5G2M~=Kyr_oI&
z&Oxw_4<rcu2m@qmn_AflKaCx|H?pTyV}23k1pIZ4)(3s6M5vZWOmEn)Y<N{d8CEKq
zr#HAK_R2r&g617nCy2t!NcqssbNWap9E~yZ3NII{hkbz%D#Rx;LB<j!mkT#S(HUK2
zN#$iwnRwMyg^m2W%=Qy6GxC&j&u`Qpmf_#Kaq4QJ7vaox<I@37$7Yh%6Rk1cb=P|u
z;@z#va+u&69<)+8|M?c0C_c$KKdXJ0k95j@j`RI8bE3W>8NMPfq~w}re!HvFp|$zT
zHoB*O#>@Sr)mmwFT=d{1iW8_+iwY27)XDLD>^KShP2228E<F<<4P&{sKmIDtAT{Gq
zA9KA%nN0Sq6GaO8I=-F4Eym&|9i(#{GBctnLMYLwfeBtr<|`k&2+3Ydnz=|%Di7Gv
zT1R<QU|UC>TGo^^WwccrM0Z!;S+9wVZ*nCP8lem(_IYQFO$X^KW_^c_p`M=_J&-%&
zt=Z07iPi^$unU`jy(1_#HoaeyzApCaJ8lUopdrUD4VSHk|7@WD+%bH|4P|9zZ^+f>
zqD_Apg3Rx$!0i8Qv;Rc>-*#N^+f#`dUf1>U&UPo}`EP9`3=bQjehXFVH#2`deAV26
zn7*Uwh;sx|8gDJ8I162lv)|Cz{F$0-^lM1CbBSBzuIuae3r$-z=jPe_T@1q?tf{fj
zJ&}ks<Wc{w<;sc3U4c;aL`6H7^+w)Mz(sVHq4~2!<aOYK2v})3+A+-Kx?w+o^d?E?
zG`E@bomUn%JFi{|p6pgkmr-Q<*X*bC<CAo0nnH}u4&6A?yK~A*Th1+T&E{L!*Y
zY)<U8_Q#(AzfU8JJh&^`?3MuX8Dp)jItngn!+4#CsN}Dn+YyO(J1VcvQw;-6KmNR0
z{8<4d<0v?#$fyHw0E1C@|Nij_szUhh^Z#<I5PpIJ{`2F%T>lRL|ABBZ5|7yzQR*+q
zJ2?CxnBaKBSXILY`e1E?XjQ{H+*O1&)p^_(@O%={2wfV-7x<~-hT$_I@8JAwP;xMM
z4g+hnQe7n}+%>qro0Ru;H2Y|02&^jVpoo_*9?Wfr;nOtI?kFOgU$#e{YM~<y?h6#-
zpL!jNw`g&n!!<B67!7mwrU#Co>``80?G7;6ynANj!|&f0l_B2!5jWaK^y;*C0`>gz
zXRbHG?8}UIt|iX)F9F%Hsp_PGBgDgg2AT_?ICr+@=AiRMBgD3UIfwW5*di@Sd7*B8
z5pW6fxo;18yIWHs{YQ#EC?9!nrsfP7gcr(ii=s3iFNwA$w_^N{vxh}VCj9s1gYE};
z^EL&ZKHw&L<__py5(PRS;+iDps5_1}K`{fj`C#p<$=iUoS)(L$ig23Wi0=uu6D2T6
zqlV^K;e)G^{R(TUesGI~zGJxD46~wIgZafXRz6NUobXdmB>176UA=K6jC>907xgfo
zt)X*e01(r?(f|Bv!*cCghvl|<entDQqC$Q$muf*zmaU(b+t(~<+{tAe=0kuO_U9u#
z-5$d)RI}~Gv{m@ERI}IogaX~py}X#ZkG3Va&IY^zsY^y+n6?<OBTKXlmXqjH_O#St
zc9nJsA>Z)44<4!F;mJ+({AbviXz|$86VgW={FdFxzKI`<K`)o^{GR}4jy6|O-mCEe
zSVxiI<|Qeg${)BvjcD2N@1LEAZx|pIz`4a49Yk}Yp)bp|7v)3o$W$`=eFg(e_He}8
zwQ+w7=Umv!wPyq*^NxqYzJoW@G{Uh8E?~{V!DfHS1_$9R(s>nF?ROXL9s<|ng1rvu
z*QwQ18gM=F7op#~W=e>cJUr?O4H>wHBF<mYjGedO`$xr{zr<kh-Mj&Y)#O1mTft*O
zh-LVy!Zs%p#<rE_Y9xS13CTg<9n{yh_52*4-9s}<HJhQK@|lqI3`*Y~-&%_DY&=WN
zsq`85#tW>~=Y=ZHsJEM$OPopDsNAYR9PL3+cEO3F59JkpW3#T$`r?N|KFHJb3SgaY
zxrV945i08_0(5+y#!34))8lL)nJYD>J=|*?-`mmAn)4#-VS$E!X1R8&@74vG1;l};
z^(80>A?~Xv*;OH3=$UD=5;miKl1tY(Kss;x3*9m#6fg>)uhczO*}nKrMmGOUN~lK<
zOESo*F@f!tHaU>&#$=C0oWE(`-<(0DdK`fA!#uEcn<^2L3lQaa+Ky;>&6{Ep!H+>O
zwkSj)V-5ZmA$_Qr*gU_u+RXM9{9rw^w8%k7)d=hSh(A+zBKFzZGdQ0A){y1mE+FRG
zQGN}(R;^ew+_AICqYk9$SQ%K(0|_FyPb1PlD#xDoQ$NX6l_qYAG}L?rc-)<XnqI~x
zPsBXxsN1GM&WdFw&oIVC&3`t*+%1>^@EL*{@}DnVt=cA)pK^0aPS)7=xsoNz|Jb^l
z^&JpXaZ0WlZEqn#+lWu#y8kQg=W8c737>Hn-sueD<R*L1swAM=AnClfl&;+<cI>(a
z=G^MUV)IC&z8+hvoUT~InQ)(DXzRw7{<Vx4BWFT_XC<4eR1YC*$Esj+tK$Who2*A{
zkFh6)GBI#A1ERVd^=wX@d~G*=vUx{ox1AY7A1H4{+Z2SD_;jo+MY|h*vDu+Hiy?_N
z94r>E)Obg+1B>8QVKG~771HzB6TgCFghQPiIE*gHH#_piF@q;h@;pGhi8em4=`$1b
zej;dfMLK(PJ@xKNMqtIUYOm%-Gk<g2sgv@=+jj{|8o#?-Mt?S84Nn_>n{MuGZ~wMd
zf9%`bd{Mqw(;zH)Xk@(F9CK^=i|FVM!|(QxNG)ZI;6SfUE&kMtibtcl$9CZjDY;v<
z*YnrFm!U5a<WcQ#>LHPHjH!XwUF2F1HpiBrHX4;R8#GK(<dkS=kUDIjG8cb>-ygio
zvr(U&&aWrCzJTSOwzc)U67su#BIh*h(yk#0+(>Dw@ExX?o5|EJtnHPevQIUwVtP~m
zFp|E=YU;_HdE}6_3PU$Kms+bC+|5q&7Fsl2e5%w+VO;p|lt2~~>O%3g>h>ICsKwnj
z+1uUB{vi}Gil+ojbdkHHIL87l&hb_Be>mixQQ;h}JUGX~3mij?B94JBlA=xae>naJ
zwJVR@DFH6xFZKVP^B?Me<@`(iFEM`|hcdO-sja{_Q$>Y-F2CP1++m;kX6OgVADf!)
zj=f1)HhjPk_WpS)C3&58qN@bOV!y{FSU@|m&5t*4<k9O|qe8is-(=GF)J9zi19;En
zUktmm;qRS`1+soDGLXK3j5&-EJ&iZdo9Z%S0ze-7DzP5#v3yYw_GQy}V(|F>d&xg+
zb-($}e-+b4Gz*Y*!~%&{Lr^ELqsl;e@!qjGJ;iA}p^e2X=c8|^$pbgF1Q?RCBkq)M
z{1mMJ^#!L;U*)#i7`5m8B=quEuK6O5!dgdc9GMLhSV@2hI3O1nW6qqZh_l_KT;Kr_
z;&jE44U6rvd<liVA9#bKACQBR;Y7Gm<$262fx~Mk;PU?pzdP{9^!9@*RTe((4#DB;
zbhulQ1O3TxlhTIiFWWQXKWy+$quVH^ztJooZ`=G$pztj6Zvwdd-vms+f7og${<39;
z;n?n?7I<!ADB#$rnni7wyE6-yb`_%ZvqwsqS^WdA|52-f={UI>PK{iAQ3~}N1r`=w
zz|Qb$%$eZK*8&9|wF9xb?WGwP4!^F?$IfL0npaC_A;UU+8ksZahqOIK(}p>xU$vxz
zp-u-&@f;;VL8Rgj$3VD6DA#tE5uRNP4N3l8_?rgZ|7%2tfjSVMrwb!YilK{r2Nj%u
z0{7E{H>-79c9xx2+Lc&Vo*$gnClj8vc)GbSlD7dj5^5JIP?9vLo?uNzbUt%dYTsHF
z%mL-ovm((#yM8H9B28`6%K8pk#saa$Uea42xRh;Jh>r|OFpTI_)7n#=NM?6Y`Apwq
zfLqDur*OYV@C&Nvhc0t>8G-PNbU5v^PrX`e<V-+#2sExd0lH_@RgE?3ci)^uat)-%
zn5rVr_qSYPxCvZ)=Ixgji`$EOdmWGkAk>&4P##ID++cM&p5Xz+h$#1kLU~!xPjA1~
zCsco~jcl`G-~IlE!HUzqE4)NL#AEQnD6s9(XN$x`V!IgEBkAsJQPtSf`J~tPnQL@z
zd|qUM>^ZX5801lggq_{3p)@*x+LB_@30=>~1^9Reg0^{@$!MEuLb8uMBzLMC3&z$a
z&W`w)4;~iW`boN6)dK(AmJsGjl(-ep2C~ray@x7$oHadOe5W<C+A7(H$U`Gp$df0;
z8nwc9zdUtz+%p{YLHX`(Jjv-3xC0)>R}f=pWq-(@oWtBoDkA*uHOP;b3wfx9p1on@
z`UzJ3R%buFW=`K<k0iWrxiQd|>_#UKuxsXJR+(9%5FbnB_V>L;X6~+{)*xqS=VCgF
z;ePClg9;anv}}p2zd%|oC1aCM4jEC;mp)WkI@|o-B^0>TL2XA)SDg&Dp<%=l5%*>p
z;R%V)OTit8F(mYgYX<wz%i|Z-1t`8+h07x?>TDSJ`{k<hGL%zEN?q_1p%$G-Rlnn-
z)3z*XYO9oyR-bFf1egTL+n<6{MU~cn%S~Q!DI0pQRcG+sf=`D+d#brKbwqOQCUXs~
zvK2FxR%Mc5Oqu@dsZg&w`x=3Ky@H#y#bl_uB&ePDLqfu~yCTXZwoh{gyYa`gS8Om$
zT~%Tvj;JHT2<YSp`Qv<<0gzDMp+N$}3EUC2qG6&Rm!)00+C$!-uJp4g&rV&D>`q=t
zEQ1n$KuYcPFCN}*EoSVY(!u<<by+*nO=3l)tidve_;V3MotL^^%55HO_-Lo<<KMBt
zP}+EBBWH*FJHTFFxACEkrNkMgc&qTDS6O_-#!t^b8a^tX#^}*r*(<7v&p(bUXM=OE
zelYsf`SnJZ)*95)wKUwKH+SG=<f0&^`mp{~;&`z(N!JJL{`$}hrX-iBL7%*nnY}?&
znm)*KboRR6!ZKl^xAc8biSa(u3xocuJ&q|xQFrYRE(LWl2M)%-`&QkotKYt(;~!xe
zG9e$HiB5@wvPxA#p#AX3hju32&L$HtL|pc@)a6FRzKs&~c0e{=!J^~hXVvp<>Fqz8
zO&zlbV-#qW4f}}YggZW{Q9-VXKj;N_9t3J{x+@pfNNJ3{WQrlt9gEkXg63-)bn-eR
z_#iYI3dr{NGUaqv9EFAT%Ll+Pivs#^BHykyry?mSF33ojk2+y8T(#7wYL6^rc9q;s
zLJ)PNrcN`3{9f&qcrlr!mMtRqxZ;&0=AO{d+WEkvm4k^YY7lthIqI|1d&Rw?K+C8O
z9%hV2@#IR}09_yUvz2*N`vxwL3*y{<m%Wd_){hs(hCn2y)$veL>7u_OV_x80d{5Ut
zS7cM#u2*{9|L!~)PMcc6nqhtN?R#vS<Z9s;c2Xzw2+Q&%KjxX=DOJ$GZ$FD)&U(gz
zmCB;^Z44zl<<-gLKJDjfDaw(`YpGkTHWd>O;Iv|q=5A@wv9p?-DB(H~N>N02b%U5z
zBy#b%?Hx3xCg1;px$4!3P}67WY^ui$V>Z=&o}%vHHOKw1jfjz{6ngk{95ja7vHr71
z>d$J#h#U)F2&%Ws5jB}Otwm_aS4>A%nkxx+uuAzLw!49~TYr6c;2H3>!g9j%15}vU
zMyQio7~bq!uXE(uE45H`dKPcDEr{{=3-(DgE5>J&URzZw3KbI`tFk|!@y*e-<;i?f
zMf2`hBq*5y&V5$cQ#}yy%kc~!IE-8D*VBPjzkzO5Y|X45jSlbw=y>J;ofktN|8K8j
z(=x>s%ok=eUn5OqnmF@jT1W#C?mMgezG^YuW~?&qARV^m06yt4;^7K(`2amn&jX>7
z%N2NuWsqfp;lS&sFY2KlPYl&xXKmsbh+kcFy<hM-V-t%jXMy*M&}~{)ZYe)hNN(7m
zLG?opN?Fj_h-rVy&=?x9;Spa>r5Z>mP2W)sgcX&=J+uwc<6|l6_ViCiS?Uyh!bX|V
zrC$LIeF5B9NASc0Ty0UB>uEx#LwnPeds3OvwflA3Cn`v9Mn?1mGg@aR3tEgxj9Bii
zgNxS+MzDN`LRhn2CSTdEwt`I4jcNvnP(6~|*Y57qo}ku49eE^N5N|@%rb6`CWH3P(
z3-!3zZB#&Ro{hVrS~Ltdyd<qFrV};D;Lcxrvc@r^*%!5oJ+ke!2v1{?;Hs1*d1Oq2
z278ENL26(4SP6{ve9X^?HjdBho$dKT77faZEOUIa!J0q!9aOnL-^z<Kz6sAz6~tfN
z49P1eK{;t4tAo;cOfI;p6}>L=n0Y(+yS$9`-<B>J(jwx@J>b3XshX96-|GWOF|SJw
z7{uWj29{~3$HyreDkUrs4ldKpZIi_5g#vg9mP-ktk9EKj(meEg5l>XaFBJ+kiRY`D
zI#2b4i&tmN9Pj9)7)W1M_`a6IczAV7a*|J1FhQ`&qNJO-`m!K(jw|Oz8kA88+!0~1
zSlTWICoUzrr#=osS%rWu;zM3+wf?+sk!79mtsm}@fX8197Og=UM|*+>>0?ce@c~Q2
z%;1J67(V+y+dLP&d~T(VB6u~nJoajO^k?2l=|jS(12*F$is#H5&x7O2)#1cZnuUsd
z;R4#Q+&R*Trv<b|sz^!}w}2PyS%;Pjb(=}OxO%uk@V$49ne<18uhEG4UC{)M@$w?-
z`w!@o$K7w#+zNf7Bp4?ykj~}D*8K$D-1U*Ka<N6~i3&qSNIX5W*@I_}>{$v%dx8u*
z0z|bYZ1Zy1JD=9CH?uIh(_otLDwavX`aM}j8M)iaV0I7d<2GB1@9dKudbe7r!HkM4
zMNJOY$K_M)fu1E+z2-~u_GdnAtiP&bPEI|sTLunA4^uutd-RYjHrm1$JzomuU<U-R
z=h~$L+xeq=j!Q<wa!-7l18je4s_KB6_x#<5Fwo5hl=v%R#ANdv<6n-uRMsRSTzEgC
zo}L{0&v66W;|NsDTBT>Dq-IWnMl~^+`3+>I4b$C&uuGQXam+UlZ2GahMMX@pl%4NH
zEjII=4_kQkaUN8D6w|i;A%{4bPvFeYFJ9w%wtB1VOHDu(N=(wt&Gpx;)b^&gQhc`H
zh4OZ{82^sHvm%5Rp<AzcA_|+@eaLI)jo!}h5n7&MFUvszdzOxD5>U#z!d~(!YkU_A
z2gLztD9;M~wOx-Fgq_@JNBSU}*2Hbk?yo8^_ML6;&mk{vs5;t^nZNuUinIXAWRhcA
z49(q=*K}?ohSEa{pxO%!kA)jG3U`cbMfQU6DLEiISg3T^{Y9%!q6z-3zV!jQDCIXJ
zAfjmfEQzgr=)#K&L~Fojl#h#4(gPJ^U4`*4hWz~7Bc8ykwW54w`_tu>+|1m<vN)7e
zP7hZz3;)MR6zQ{^?T4H<PWTLwl|6$<_H+eOjiV^pQ2b9@DNL8N3lJZzZ4!iP*DnV~
zMqZcCfl4kdw~9>6>Kgd9ky|XV?+73HhxEyF;;!u&0}!S$!5jjIei_INpO_8ZW}7ne
zncJd+2p-!9oqU}hj7$xPS=}B&UdEx)3Wte!r#G*7fiwu(ZM(|+j`0u<i245bK(Di6
zr186USZ$s7Wp=oDNUjxCtCPu0E4y$tfn~#pqlowy;vmV^NpUBUIg(TQ`NR>8$G#(p
zXf*oA_sZ6b?=#mJtsQD9u>gxKhc)=1RSSj$boAM2>$Atg*p^owxuw}iPik)3L?@lE
zb@Dc|NyeUspc;n)!QeKcch~I6B@!5e;`|J4ou!#@Fvde<u!rOGSjP%|;7N*E)-u6l
zleJuO4zN~hffD4k5e{T6d6NH{sUtkb13_QYIDjhQD1;tns(;nYB=<yMK`n_4A&)^7
zK>hMyb>^8LP`OYJ2v@T68ufqzhM?Owe&bq;F+rXe;jp#2hy!aO^}3f*op3-r6(xy9
zHD+Qk+2UQBdqy(u6tNt@_*)#nPf!J_Pta$S?|BkJyuYQ%SjN+RW5KZnFEi4+v8xcW
z67IdnNoEv#uav25iPs}5k@q*^8;gqQ-8TB=vBXa|{T9t|F`?i#;Gw=toHtpQ7%qk>
z!R4EjcJe*4Zzi~ua;)vN>j8_OZfJJxd{D}~6JP4jogS*sWgBtu;IBLAw82)ArBX-x
zE7i_#1)SFR%U(-Pmld*apDcgZ-K*bI`UA_E4%=yGsnv<6mHu5RheNGTzyG}^F6*S=
zG}WJSy4M~({YOcl|J3R4G73#HvRG{rHnG6=xqFLS<k6bAd$<#Db}E~{xBW8sXJ)&@
zQ+j{!AC^HSYg^&pXR!zEERR(7kIqD`?QyO@G8!u%T-D+gAM}L(A@2Rz!3_>WmCmr^
z7Kfz6C8%{@>}@V<yYX4S6HedPk5$EYUf_+~h>Hof!viaI)B@lv1-F8|Kc}1DN+JW`
zP7VMvxbx_LU2sPUfPb^%rei&6e}KWzn`*=|pc@6Z7=cfC0dX-OsQ_RlHR8W)0My+-
z3H}g+#Y@X^$6NqhXB^jU|E~+KEe^o-&;M;2NALmyMBp<5|65u&^>ZP0lMWJG7!J*m
zh0;?Wq4|ghK&T2I6xez8;Rq1vEp}5h)&MZzmh2Ndo%I5{w36F#w-LRcpoxx(DG6m=
z$hP-6=Ilj8PKmZTBx!JR<&SHr-Rc6ANxi?!b^0E+YK5clI(|GF-*UKvzz^0tNiCb6
z$lw5WIJ(!#c`H|}xnp~|`n&ocx9H-4b~&{-{Tw~xcxp?HvyfIvWajTsfwih_O#UgO
z)ZFzT&&7rNWO}H`ch~Kg`Q=581#6xxmkq5=o9`8|H9ChH6=@fvK9!{4iw|b|k_Vz`
zm&MvfmCKMU4fNM<2tF5e%{D9gm3K#mB5R?F1H&K(6|*l_eJ=M~+qn~1xY7?M-yN*A
z)Q$LUYdk~;q)P*|1h;C86#34o&JulWq@s)m`zt21cA6;-K&tC>+CM{0WK=OEyffE>
z=hHJsK(}5OF^@KskGSyVR+sMw|63160#!#z+4y`sWlNi{g-5yg^c_DGX_hNLNgi<A
z70eh*XL)Tv`QoYcuu3@!@-QtuyMd+)$qP-{<^7oB_<?OODWwR_NmFuQYUE}*^||Rv
zZrHUAZb-;g(3%zIB?OrSdyCe`ozNR`a~M1yY;FjfRNii1ed_P2o8%~NM1F>bMzd|d
zFiUBec{OkH8)|)#n!;IQ0PDZzz;a|Y=ynFZbmjF(gx<O}GTRp2v_R!tZlD^GOW|BJ
zURU%C7L<0!Gv~nc!+>^a#Pw%{gMmL!Qb4njjk)LWOwRaArPCXBbF8B;5gxE&!btS)
zGt#1u$Hz`l=$9^#Tt|8nCVxm1+Z`fe=QQq`*)8-F&Mb%6*OhrPlf!j#6bx22buHxZ
z_ngf!L;glJUb#&whPUM$Sya73itXBM8MfLyOa%QWCCcSaTSKM2D3slp9`Ovm92~=*
z#jksXigFyK`4rkWS~|{A!9nE~NBRdjUAtGIY~Dd$LG=rV^Q(xXf>Ptk#<rIj`elY)
z%SdF^51HrbNg7qPFze+p_*=BA)qywB0-NgY+8A-%+fq-K5lu|-LjS(DN@1^)MP<Ai
zQz<kswYDS~xEfV=#7w*jSHS40UgX6EN#Jy)$Td2NDyHs1vdpw}F@5h`(N4A%spUn`
z7%g}5Oag>1-&TX1v{&zHT`r%`Mwn}V^PE9q-Qu~m^;;F2^qqmaV0URmWTRgz_my+G
z38qxH;+I^2$4x}WrX_8oF{$cAh@8A(L-V@7JuCN?e4(Xx;p|n9yX0+smV=@ON7F|t
zm;%Uc{(@J}4JQSb*J*6B%74{l%T%Bqz>9haV%F^!S6Rlx_#MLvKa+b`*ZF$tZcH%o
zeaK@MRe)5$P?shltcZa1q<z$t>cnFhJPFI2p*q~Un%ckR@x#mJ1zp%~f5-D|U+E3I
zw{m4#VjPi$bzFR6ugeM@r?Iykm@Hi`kQedP+p4C}WZxt{tYTW=5uy7y7uFfz{E1IF
z?^z3~EAu#nE6eNE<VzGOx;?OS#Q3fUQwv=nBP+kckDKZ1O^#=eJTQi!Y03ddCV9VK
zN|=4qs$bMMdi|0uO*T|cGIcVS-<PgN|D2E~U8%g!6(f)Rq1uup5>@n+!5H&e<w7=D
zgCt&Nj|<|$)I!nLO0R)Qv6jVbo-mX>JbFFgDHDpCj3l$|J+t!2h;raAv6|RGwq?3S
z^NM}lIJHweND&v^$8XV4<7E+XtB#NN=!>(FAT=nA6yG8&9(iyyc83E!O0+QW+)x)}
z*NzzFLeCfrw3+ZKa6^XdBQnx$N;;-v%Gi{W)<Sl+qrA%pa(9?TtKwVvmeuIkrf~AA
zYH+K`UpAuNKoN)lLCWYeTjI;By}_7OqH;dFlZ!FTr4to>zulKoPuS=u`$N#z3%*2#
zGdBT~jg&`kq9emQHL4mJ|1dqH<Y@}q1=m7TyL#W1V^g2L4bz91MV>m=#U?!{4JeOZ
z+T6TwFg*cMHavH(8dbljg0dCp-8P$X7iIWBWVQE<lL#^XQ0+l%*wY=@cT}K6ssuvr
zboB)iU-9Q+l@3DpA*B)1^K73A$En!Q5>K<_8b#ivpVC?FeN?_wb=8f8IG6R=PsOe!
z6zbk)m|(e=)Ma6%x}|hJ+NIKQQIm1J^qMBj)k1BjFpr1+u|eeThkX=;$(KBZS3Ej&
zPC9p^z7pDHcaz3(6q|Na7id0j($B}cZ$+9F89V69P<0akrWWp+-6jACNcf)mSOJ3X
zSO5GW3V>(71^;A;{#(#G^f?QC?yQHplTrfIXp@{b^c2~<^?U$Hd}v#V`%h~cw8VJj
zt8ODQm=H@%Nok?g&s4&DUJ;x_PqS+~mxFikMl9SrPJ%H{#OD1v4nNZEN)`~Rk)6_y
zbe<OBDl&>xKoU?!_pj>tr)=Vi=zmsEc0vG(ED;}I7v974d0DOU25x{ihhNZ*W4|7p
zoqXC9Ve+cc+TPuPss_x}V4bK)Rg)(DhUitObceI!l5=wadaS|T+Q+6^jq7X=?@lP|
z&BkUY$9c&N<!QkgI!wSoJd{G9k)AI+cjuL><V!O7xy~bjM!I)x;n-KHRqb#Bei>(+
zpCDw$+*Oi<py|uJ@1spA(!!DusK6r<0@N3Cfk$A%kT2$pKoSCcj5&HT_VX9wKep6P
zbAcaZeBocr<A5*8E<RqJ4r)rr`8DiFU0uSU4=izj+1@5iIREh-)wVda`D;<s8;z|(
zv)g-}OQ<H8iSKY!Tu#v2sZaF_-<;w2kjayr57$33vwyKL<+LjmkkpYfd$9o5-Szz0
zM-*dy1wY0Q2CP3X+OoFC8gA0VKts7#DE=Y0(W@vmYI|C>O?o%b5axblTw8QR$75JK
z8D1S)!>K)L_9#G^5LDNm&^_zP!Unr0Gx|&MYLng$H1zpOrQiyy=ylS1`wu!G3caNE
z2OM7%-ufsZh*9_5)H}*%r8F`quX06r>*+;SH+RvNmp#^IlimU}R2HC=5|Bw1&k)Bc
z?}Q(LX2AuE$oWo2!hUB`j(UmL9SM2G3IG8Z0vXWXFwA@U9IyZ%!O#b-=`9dZ8zDvp
z<oy61vLg$EGLPa``-Bk)x@(V*nfHq$%er0n21;?~=^d1;)2^h#4fVHBEn0ta)T@`l
z&~=VedN>ZI5514Gyn*g=feGhApz8`nr2h*W<2~DZ@Q|r_zxOxOZ(=@);9@%)0hl4}
zT}dz@>PyLgv&E6&Bn^G|U)f|?hgiXcbze^YTM{_j4ezhE|Bs~kw9(twSh}jl7@63^
zO7KrEY#O`fQ>K|qbaCqus}oojR78qP<BRB-591Jlyn&|f+NZPRWS2`HlW%`JqA|J5
zE|^bzf@`pp9J@;nUU%0`bAw@p=`YU|8YtiwpA4xz!*l~+b&Xu>Z#Sg^mx?<@F2bYU
zK*{0uBiN=u)y?`FnC(R9)16POq)K83_Xtn{9VJo4RTe50%1F=VMj50yJ20d0y9|;H
ze4@TgANzIs;{7%C8|co-#w%-*tK|qg^qaXaehir38O4sbQ0N4x>~SO;7#4uK^)kho
zT3;m4!Q~A!db5WTshrNT)|X*=*YjGX;(D<q7V3Q7<!_E_yiJ?AEy&EWP7kOqn~}hq
zl~8+h+eTO493aK`m?^3O%NV-%bYe}5mt)huWZ=ijut?x=U+lKH+Z~jrJhCIf-JfY&
z)=bsgo&{JkZE5M~2+yFVf1oVn>1@LY#4Yz;l7)r!9ed69D&ljHv3NeGg$&-;Dt5jP
zKt7#Av;-JiHs~&^3n2=f2|Zdk#i;iWvZKYqP8lIe@C@Mzj>;heo5F<h+*^L^mX2^r
z>db5wzi%AgB@+~Ws(7aAZ7-YN$${kkmY5)SW0Jp~^3d!6*C?#b)L6;}#}`8RL7~Kx
zNnGXP)<L3)eC=}DmiH~&Id-<Jg7~V*oBY3SY9jG4<w~G7j|PX~vZuyu5Z%ZYdLKRb
z^e?Y+$+8<=NBy8?bx>dI=Vz<wtFPrXGA>>C?rHZ__v#zkv#uIyE{555-$x-}2D&?&
z?nY~DFRh?YEKzm~-nmi3$&|f=y{*K@ucK`3H(drvs`bGS8&|GkE)x}66&U#{$4?v~
zaofJ|3&{i5EtXO>bDp$8*kVu@JBEwbb~4X=z6iW#pbH9c$C_+xD%d}uNuJJCG`)MG
zd+yd|mEAjCHrfC`PZ(jAMGCTqt+dxZb?JZ;XV)PU!{k85f!qA0dy*x*E4qD6*$j>}
z;6k%ECDs+rYKn_qj1U++KRV>)X0Pv=h@!P$2=rz2NK2TRsbj)J3@`O`Yy>np%TW@#
z?)^azrMUW0^tfXp3|4d9Ht;?SN?2#^gGkhPVD?N9<u-J75Vx(DXK8Ub$E?=8v1WBh
z#jxXUbGGlBdu*5t{W=kND%_s?7(tZ^Ib++Z*nA>s8u!hK5Cw^a`a5RQoLHrS_&q#P
z81aVe*|(?R!}@8Z8NKCQrMApM^F{X~Dgy3OX=K{JvN7&>%0z{_W%YI|l9&sgVHK&@
zwIYO(T;@6m>myJDrTF$<f9-aQ`#Ag})NTPZ7`5YnZ=<jZH2(HW-=<{<^pYsnDo1VQ
zGI=dp?Ml*%6~qe3%8?IX|9%l`2Nz<05#KWPtsWtM10`HR@J)rFWnl`$McH#1sno-4
zpK2&IagKzh_(emtSGb5Ux6cxL_-F8Tz-oHE;m0hTZ}|>Zu2(+L6iDVNxv)zv^F`!@
zZ7h$KJcek!<;$t_btjkNd_8^x-pqhv^M&ujBiJza0?NIHjMcLC;`yBY+bj!6-OSE^
zjOkdUNeFqy+VFP9?2U%8W@VcPJyAX>Dnc;`V4iZn^ZFFFW2cO4HRi2Mgm8#`Z%dwR
zG;0dYf@-rpg!S^>QM?Y6PgZV#6VqB(^p$!iFK8tU_@}?ltG}%TMt=7kjLu$9ae`bC
zH-NJtih}VZTnd_XY?!ECB@l+WY}Has5H+dd%x*mSMSj6-f(9;$u&_y1am|9BFOPFm
z_ZV&&2(fJjLm~0yoP-P1Qzg9J+~9{F+r1(e_OsWz2;`Caom^RYx$e)GjT6=kBU?lg
zpz*qF=*TvWz#(NA3VsAKMwJPpw9D2C>erp#`7HcWl*D{2r#1L3{-TQeFzV+*hF)4I
zX$dyFOxi*DM2jS~D#3YL0r{;60v&t$+F7|Ec`Vm`f8$X@99)Qs_D23sg=u=z=u-EO
zT?edYNCzfhiIE+m`dhXEvD{M>FexB=@m+ScZK1RrKJGaM8rOQD-Gh0#3}yI07t=(;
zxb*f8U7EC3T7e=P8y38VZ6LsuhIPWjpt9<vTtanl<YYm-vy<2ljDG)FommJJ9j8%x
z$LC0qy^8lS=l9z+b*|lN$WNbdjIsiG6>M%O@xfA>{cCjiJmEro<S5J$lz}x1Zp5fc
zF)M>iHqhQ=Da2+&N16K>gQf;2JSo7OJx>-*3Lpy~mDiqTc{(R(P<<Lt&<LzCNI6Y+
zM~Z<Bg}$4$tc2qlt$Cc3s?+f!G9YcsyqtvYq?SDAcszJB7v@wau8MDAm7J?}y%_!D
zrhH61p=#uWcH(w!?x%r|rta5M<CyzZKo3Hth?Wg-;SSqd=yB_i0ZM(NdS9VdlP8fe
zK((iW_QoZB&<4jX42T(G3PV6iA|s0OrDNcFe!Wjnv#%ZD2err%W*?Imhm7|dYXC|C
zrGke2YLk+<BlLq=the$*Ta&?{+W75UKJHi_b0SAY4&TA?EQ1sEL#&3008x6j&J7G7
z7%7pT5<XsPv!WuG*Vpjvt{SaHRAU+M^XDKp3L9H0UiTB7GCh6EhqOk0y@x7|x|}kG
z87<=peC2-Th-@hT4oIxR1}<*P_RR?kwLat{cUT-@7!>gl{za9l*=|_?q@!4=V;6ix
z5Un{D41LH7*;{W=ZJ2&RSFE4p>bDp<hQY87%zp%Ze>B-p|A-bN@fz*zZQZndctcnF
z*`mFT4d-V!KK|b{`RcToj|LqSi9+BLbE#sfUzr-xmZcw{#)lfysccL}i2_ww`uT}5
z`F;FyQ$Gt;#Mrps{m{t5YEb_vxoJv$R;|l+x+Yj3Q9Yw{2gfIZs1KO<1eRv2^&!Fe
zqEdjDvSJjiu<+8_58f&8<82<_U~P9Y%p$BcyVeB@mB6)JJIC#w9-AmXem%C`Ff!tD
z8K)uEV0k7>Qa+*vYD1<UZ>5WAnlv;<Cb(bcuDUHg`}9mz=n)vEkLv0EvXUnIlR92#
zdTry8SbhB?YRn6_0q~>35YaiOUh;YhyB+&0XvElrdSh37e_>%=3XLlIb7G${D!H4q
zzr-f(h4SN7_hGMQM9D&eM)bt*s${6Of6!=sT<K%OkK7*bK4nL;Y%>dEOl-%#**L2O
zLm8N}C>0V6+XC--pG7whzh#wd?`j0ERYDM%8>+v@W+yz>6giX7efwc=zo?624tp5}
z8MEBMX#Ym|5`RP=(C_w?a%xVk?IDEPld23pqTNj%pEj21Qt<WxycvWMOr~qsQE9la
zC)jf0yh1u{gdI~^Fhf9IM@N7ab%%>It786onPkPATjtV({<0pDn53}VbK-?R;r{nL
zhTz-<?2{#&gG>;b)+^?12CimU{D=l}aVvFlEjzP0W!S!Oz$~&}%DMtqgO5e%P-0)$
zna;tfcjhd<q%1~PR{xSGJ1sgtZRDyTz%>9@%N~cpr@@9gXF>Rk5M2Q&XD98J1wy;|
zYhTNht%3<5T|exDjeU~AX?{Y+dvVT|@Luz^J-W$#xs$8-$AbjD)tOw+rfL^j_jWz%
zpQ>1zuwi^uS4lFUsZ~efF%Y_Buncl9e!Gk<`lzP6|6=)pXxng}8PJoT#rOC)u~rro
zM+O&<g}THURt^PG;a)_a+PBrxG2>xmkgD-~64D6qzIz45`@9~eapj&V3<(*9P~6*>
zs1~YK(R9+^6KN2b@{AE3#-YR+wDrvA4Oj*gxBV3^{$L;EagU3rra+u#+rNg39DWgZ
z3+`(ypl}2Crv8u#ZOmCE-5Z6vjK)VnQlQ&6{wCy(ACPRnp%CD`b2c9gO=Zp6I~=;6
z7KddKyk?B}{oR05m*U=sll({A6pSUo3MlwXyO4cn?`x@eTMiDdyAFO5Yk^;Xt@WWf
z65iY#d4){(={xY>Z^mpa3ZMOUZ5^o40TtbLhL#1<y#}d;W74~^xv#jke&>*Z&F_uK
z($;iCXNc7Zo%-lU-1r56gk76YfCU!CA7jixYTbHIfH*%LbL}gTbu8wYf^8@C5AOZY
zJ52CR_9wvFCw`0zrsg19i{p>m?Lrm%na0qjWYK@<^arXp4ivSmcy1Mh)Q5UCd;!gi
z5mR$YeDmY9`#F>{v@P<2P-3kXMcY(m#bNW*%2w4DMq7%XoyZ&1qF&Axz$ut6Sj$%1
zOgfG?C>G?hdFKs*^ao2XW!-o6P_KqA92>9UyP&E3g7tSgNa8=(nr8KJydAA_L!@2<
zCEAPftp07iYc1ytS_B(>9l2L^Pm*-GKss)#&|x?!mp2*hR7>WqIasC|-+Zz6^!y-0
zDw=?K<-6w}bw9R6ObA<S+P7v(DR?=p2kK62an`TfA`rrs!W!KyzW~nc{Dzs97n>4m
zQ^0?c_m95;h~}?7#qIdpxx9={zFrMmAc{o`Zr!COwVn#{A*whLtLABY;O&IO{7uI5
zCGozPqsyN}PE2;XxZ9k-lhb`CLfJg+3uMHt#)U~60GMX-qavxs0QZ9?fU=^7Lb;sz
G+y4U|3Y-uC

literal 0
HcmV?d00001

diff --git a/public/images/docs/diagrams/generic_dependency_tree.dark.png b/public/images/docs/diagrams/generic_dependency_tree.dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..64694f58577fee331d4687d8588ce81edc594b13
GIT binary patch
literal 11328
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

literal 0
HcmV?d00001

diff --git a/public/images/docs/diagrams/generic_dependency_tree.png b/public/images/docs/diagrams/generic_dependency_tree.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ab6f1a3464ec34be46ec3ec4b0af891d793b429
GIT binary patch
literal 11852
zcmch7XHb(}v~EC=s`MsJMMMb^5RhJ^N(X83(o_V32uO!e0!R-<q)CU+OF$v?5(`B@
zAhaM|dI?2(hZFt2bAH^Jd*_~WXYNeiyn8+CS!?aR_RiXS_9Q}ATlFf%bqWv&bXD!K
z(i0HqG8zOTzDIV6fJC9<9ui)cZ69ep0)aloQl361A;?6oPgE5^<-P1H1cCg`V-r^p
zh?4%#Lj+1qXCV+gbu|r?Ro`fWd~*MMyb0fVAXq-gD+>h61;O$_z61mb3aI!a1{8u|
z$Uh)~6F?vkm`EAVm_K}2uCy284~O6Zmi5<)p#5tL%aQen0eSzmB6uT^0|=ii`G8n?
zuUPpvvC^JV((X}z<Nob~Z?3Foj10j9hLk0!JP?xZkzmgRL67&c9?|l!Sb`ShP3Xp-
zpcfYxgl`#-=zykv`LqU_pyJJgqZ^Usn5pF(h>Gcrog0xA**%lfo4e1-+A)*M)0;b4
zJrmE$+Om2k-=MqSwT|fKeug*q_bqM+#-pb<b}MkReT(b5xfsFt>b`}I*wzsm?~K^C
z5jL-sis89urEMQ^v-dsYD~4w)aC2{}yUDz>xx7A5duLF3XGwU(NO;Cl!m^yIyD!6X
z*t}C7c*b3ZA@6&>7xjGi(DR*TSzACep`VSPr<O5OE53fTDTH~Eb$g<%55jC_W1igz
zn3jJ-^X|rURu)a)GmPM-JX}{$H?|@+pzlqe6I}2H%?+A&?=1WJDyBC-z6%hX-V6|Y
z_ol*Wa=!Hd1mb5<Q+j0JHMTZ+<TQ>W`n)BMU>lEMzU`V?^L@Zgv9_Ee^lGD+ypFV{
zp2uyy<OQ&YKCd0jQ|!uGY}TPyvua!=e|#m>S57V;t=aWpZ=L%{X}T^j(gbd6t@X@N
z%$QT|r2sKgav5W#t2Y?GruJE3!uwY6u+&e~bH~P*5r)|<j{Q5?zG>9KqUe?0{Hq~e
zA3M)4C&>1~Zd`YW)W2MNk5dpw+_fKU!)Su)SksfQ$Ax5@v>A5OrAL!?xoc3_X*pAU
z`YKD3u%g(XEkaVs`if|w0W7VqpO@*C)l6}BZy9@2L>bn(byK$_El482Ei;nYe$7xm
zA~;*PjV`E};s&5Z3F^NEfclC1iNl%tiRIDZO!8=XGzh7T2GKx}Bs35jNC1=;0#ZUi
ziIganDE~($$u%<jqiE8mT`r-yuBdf~zB_<CN$%bc1FB3`NaN?;pDrk=c*{4W5|$rQ
zscshdt9HO!U*lJgsX1sM*+KndOm-HHAEEUwA<>=JVB3`KiOSsxeS{8;+ya=RBOW@k
zomff&@p#uZMpgU|__9zxak(0LvBHRt|9LvUlxwzoNdH(>JM~#Ql!!4J_e>1!`AgJV
zJ6$1{2X>qb%$DRDx>8GeME}(auQSwN;KUHoNk0cUhntR}LJLH7_xnpmAKdeB?ynr6
z-4&P=4QC2?fix7pv-)gv=?C;@t!=o`v^s~=vEiDH64+L_e^vsSc+k2drhpDuRmSJ@
zYn?hiRPlG?cU7fMm=uF}->_2>z8xhban|{67P@|@p$cPAtu{cLS=|om$-86FiHbUQ
z-~oEQ*3af64%w=Ba~WkHb=zBuc3l)KN7TZ$UnyCAR73~xsg&mLwr=nwGqA1t0N1j1
z_4SLv@6^!qM7CzEBNx3joT#Rrx{j@Zx3_`NhaKvUR-U(jEYra|nf0B+S56*}))1UT
zs@U@~Mh``}>X^z_7OH4uwni4p98RweqoMUZYdz5J3`*s0UE`n7CDm?R?IbTCzkpoe
z$$j_hstj!ZHFn5_jw-5b%f(xlIo<X^?ueJ!$w`%qm@1ctH=9lU{uqE>+qF3cs=h8n
zBa}+Hq#<*yP#X&>EhG;d*vT7|AXhm3GcAauG~cgny4O+~j0PTfGfh$~+DK|u+nDgq
zc3iB-zAt-LH`iBm*ixXZftwY7x>wjm6_Hta^jwf8RS5Xf_vVA|lC~rI6iyXC%BiRV
z$hRRGTUSozQCu8=MCUtYk5yfnP{g%!7bH&@@YbtA(G-zX>L>e&%}HhY^!Kg)?e~vy
zubdvp+OVjW=J#xR4KAcJ>4rd~qja5~-Qx{BKAt!f8)K7Ueb0VZ)y=y<lKW<%)DRl#
zJwucWb9<$Fw7S}Di%3GrJQ`0;pUt9&lyedfhZ_OnO+tIrjE#EfFqrkLuC@LqXeai=
zjC^T<s(oITn+vk%(0H$`$z3ZNr*TG}8n6F#7TVczbxet}$ORoUrWOcWiM<y}E2v+q
z`LQ=5iG72;Zc82<k(7~X^D2b2toVcZv#z%}Be)Muo<=U(-BdcGeJ)%=ND_W4^p##E
zX9d;glmmrdqULG9V!$?)Pi|ps=gX37XYgXr+tDwq^HU{!(DTu@HCDKJ2k3h!&mf=5
zls%HffEy^FuN=~!rSF%dw2F%{;_YoufVO45cPvB>t4|x=y8b<1^;wl__Yd*eo(!{9
z&V?UYJizAx74Us*;VSLS4{p>sKR4=^Sz@{|toJc~yI->LF}l6)2b)kmLy-+SNJ#zA
zre@G-w&+gokOb1=L9wek`s<dC6bD4CIR(16^3Z}GxT;zu#si%9t+LqQwA{j(KF;?K
zENVL7ZNIKVSv(3XarzYxv=K?UT1t=G^^!Pw#g4o5UIir3qrP=Q_o_CMBt-$2QNcO?
z5GBf|8&DG7;j0TJ*{I1Y8k`;Zi%#`jJ~E=O24V%zd~(O)`z5=6M$yYKs#><tcXZ+w
zomToKr4JTM9T&M{dh5?__7f)w0AH3s2k&$AbWYT{Gg|})O8a}w($e76Ww(K2n+Y%B
znEm1}zxbwO9>#+mO<*dgk1yEdw?xYPd>#PpnMSV(Sp@@MPCfJ`C>i}qj>IJz;;pim
zoieVkuIzE|?Fb92l;YBVYI?rdnfVd?ve#IgsK(k_xwKT4_vEf`8N4?2w+U~&Mr_DJ
z5jTpcpSXk(b%Rl=bGnRnv3KWeDKy{gEoG=xw7>m@x23G~MuN1<Yp)FL!jVh~;ETI5
zTp0CCxMOu&rBWI&768u2C^r_Ros&t0eU*BWruj;FoaXcWr}`r}mpfDPAvzZmG=vDW
z5Y?kx%gG<H2bvQg@R5~S*JN>eN-pEn*mD<QMfc+RjEO~!`b*E>%q_a12XublK4+6J
z;6yD4;yf0I$Ovl?j-KzaLT0iTIr-~LZ0IMK9-K_r_tK&OF<W8vYE7w#Bs%@lG(UQI
z&%83BIz;bt!5KME72o}J;s~aXyZtW1mt;o}Q$yTmpYLr%i4NUiuCoxNs=QAJu@)|<
zVYOv&xb0Q2wHxt!X7TyddXjMFueAB4Cl#C?bL6|lTp>`RZWh#z1jje=l{IbtX(>Uf
z+;|~Y*FNX;N#w)1m|B<jLVjN)I;RfNyvr=S9=HV3am!I}du~A95b4fQ?|R1S@MrTw
zk_13ADx^j%`|l7o$%gBlYyJcnWzF@HRi$rW(?y4{Q&u<i+N8cG?3c)Dv;NdvlRtZ;
z@h{9aC!=Dc3IR2Y8~okq>d#HsVU6<t=ewy%3r(Y2!Q=8nULQtXWJRlOaKU4UbC(54
z!m>s`w}|p~E9E|4wi28sNz0C6hynhxf><5Bmne9ba7b`&X#2y{xu7#j!!dYXw`e-1
z{NqJ+kJ<GshyUfn(t8#|7e5FbnD1fFh(T$cjo$%8HB5d~5e0`s#48Lz;~!f+FN)<}
zWD$4mshy=UD~L4VWG7Rm&+(Z&tq3PPSCuLe&q>=L>}<IBbACok$w=0Dx(vnLan-q3
z!xvizgP6FCBR}Wk1#y$TLatA8M3gM{eos_y%G#up@VDnef?T~#)8CRZEgfJckFSoV
zOjp$Ut5$-PPODU!C_v#%gwx31Gsq19L^z%VK#BhUG~T#RZRhSWRa^>)JbVWwDthlO
z2jH8of%skw$Kv?@z;$?4{QbX;1y%cy5h8iziQU}2hXmx+J7#KTmplGvlUf#zW~OV?
zlvT7!rKj<LPVm#lZ}@2Y$TJ^jToAO`d>`+Zg-EDt|A}E1FW9rRzd++otesYDOh|Ls
zz+kyW<_K{6d9xtqI%ep=QQ$?<-V`d!SGOw?F36d@gJ@;6y0A##>g@YHad089RaYW+
z31eVpyEfgRg)usCocJ9E%qE{cA==;Mal!$I&sR?5%-pIs%BH5s`aq|z_x4v|s|Yr>
z%~xTi)Mq?tD~6ZtAD=y`;-uhbI`LHF?6T>+v~@7gFo;R2uO6SVmz!E%&EVaBzc6-K
zJ#7|o;jO6Mhhg^DYodqab)2qfocB$o?A1i)=?%T-vEQOIQ3<*oBelF|*TA+s!di4A
z;ypyFrrJv_{Uvspyy1kGYH@_xB=7rdfi4&^R8JlFeDHy@({OP~MWp5omcxev$5bVu
z#!s%(qLDS|jJ>0LGS&L@cV!Vf_I(?qUwlHdNQ*ag_5Atp*#P<8>tn@!G->WxQ1ZBj
z*btYJL6O{L0cGe87U@?(Zc>xh7`c>GEkG?s^GctAy35^O?YQQZpNT|jX8qmH9p;OY
z5zpr4z)<(Q-<teK%)h2ureO3=%iTWeJBj=duoU4RB^6g+0M_T3r)Wc;yk%PV;lO`|
z<*-PS!C$~je-@!+44hxG`oESC@RxmvnE*@5p|2$6j^K=aRD0`_<5!fo`Me(}w)?zk
zn$s>Qv_HSJQ=5UYfm0}0j_CARCUz%!=WCsm&zn14w>9((HSx`FxbKiKEn7OWKSBZV
zd3RT5u6oJ)M7!vki2XHvjSb~((`m^ZSy#EI<nALU=R$t8JggYD9^})<V`!&O%6vva
z9F6{Yr)U$XNK&?y!xc39+(FapvbxN1^7DshA@5H^tlVXvR$C&g@M-KPs<)i!zI4AV
zNw)9vhP_4@*fS(A%Z;Ho*B=>G(+M$;>VK+E=M&C0+?u%WbA(&FF?n-Q{$W(=v0H2T
z8C{0?H09?6T@-oEU8bqaHNi{U3uV3Sa~=lni0<k)4r2#NAbc68>6XN#%)n*9U1BO>
zSg-I!ZQ@T|Pwhgn&2hTS@htjY?*((d%E;jX;!+BNi4CPD-zu}PqvLRQVFku$!`oc$
zr2K;xbbT!&;j8Ia$_f8VuNO?hwDSEMQ@3p+*QLhWQMw(~W5iN?ov(l$%`BZB_~coT
zCFX&j2L;)l@P*G+`l;<lxw{z;#*y|*Mi*~9x~Prn^fO<a^wu~_g6)b(@^z1@%!_>4
z?i=({44a$^>|1;r;k8ZI?y2_=9}OQ1-A83Pdk5g$E=#!WTc}UjyK1NR(8G%u7Z?w!
z6)TjbO?R~qwAZ>Gz1_&r@DuP|%C0H*v$rw3pS`DmW1%iwGA~<CEcj7k<kpKjQiS+a
zAvX*Ayw;7mOJ40vzD}CPy|qcS4nFz5j;nFXi0ZzC{xRRn$LJlj_}To#m@P5VR|#(@
zZgBMQqe8Bp*L_Q){-P0!;k0hq#b;UQGhTCP`1`O@oth>;`<G^%*?X@&0ZIXhWDc)1
z*z`uQV#fJ2`y%Puy$;bNUpV@-h<WYiVpaCuI<D5qFRGga?J>WTk6hM*XIziJD^b`@
zoU@VsT?>OeBI;mV8dx0Q4wC-f0e_L!-8MtCZpt<HK%lVYDLDBoOx_|Zsk=~^BA}ys
zM6Njb93A9STv%NZg)0g@kpGobyQ#^VOa!%a71pfYE_hYq&WalIOp3Y$kQ<J-!k+{`
z<iqnX(XLCmwiBW9j;&AlV#hy9`l_7traQ}ni^~Q946XW<QJCnM=OV#KZ7)~%8h0-H
z-E}2lN=So3(>3+{29;X<dBdHf0lO|AaBB7D8cP@*-gq<bYS&x7bkVPMO**Ga6tP}6
zRc=NpB1(QFskIm&)1#avn88Qs#jB^J^kj3}eE7Ied=KYKH$PPcIm=U8tI%E`u6?aD
zTlrA7>_ay9og$96{br@Ye1vm&*?0Qq>?Sw2Tg8=(!li|-#W8x{isA+<WwM0*OS`2L
z?EEt1JN+EZzqI)X!I&}{?-%U1{-H%m)3(Pk-qMLu{FfHT`&Im3@Bh%Yl~`2&_5PQp
zocaIIi3R2A<dBk|7L1fmnR8jP9xu?cG4_Zu;!g;Ls~5W;>2vp-&5YOK+)AFOGbPo{
z4Xf0o3QeOOnBDbOs2}@?QJ7YLv)K1Di}1yp=lKr2D)_m&mYuQ!am-C;edbI36CD`0
zf0)M8ScU}b^e@YXzcKKpZ<&J%euYjkik@l=YDeKZoc#>x4qmR8KqwBA3o=+xv2$aq
zs?OR2nNi-Ve5a<xf1%@5c`7xa|7lYjW_Rsx54_!f@<Np@7t<}~rq%xqrTj%t#*#<h
zU`s$oN(kWU*h{3DUmHyCL(l$8AqC_qrR<925j7xm0249r@*3e4a|x0ik|AP{O+pZ`
z3i6ah1bI%L68fC?DkGF2kf3S)z|a|SEHUs?O_7A)g@9isz{G&~9~Z>`AlV`RG&=(S
z`uR^=Bn0%Y$D9AeAO^^w{Y->lU!DIt|JVF78cO+}VaWb5URGeaihg28$>q~L^%6%i
zvPjZgYIs`QX;tAGuLE_!wiRk`Zhfm!w9og)z~N_8PqQZFHCD|#3=C{Manxh3N29a~
zKTf0VcZlQep4aS+%zfG&J<fLZ%g#?h%*7xZJ=gIc@K<oWd%|Q8h$*Un!wsdOT<cnY
zr!g?eK&OGd;M?P|i~BrK^Y0kWi{}n;EO55KB%AvlO7ctJ((0(`;;9rgz8Tq5`Gs1R
zw>f4nv<Yk=RYQidtrgYW=4{63kE|30peu7P$N(FGh6uLn=im9z=vUPvlL0fH?bp|?
z0P3eXYNd+N=xkA%szM;t{fnQ5Fw}1D#btD>_vP8mo=x~GYbM}&^_WJ-LT0_B`|mwy
z*_2~;e)}{z6~&}Mj&;v=BhIan&8IVL++RZqx-$DhwK=(zdjG36yYusln&~b<G}^9O
zXaDQ3sl}mhf~y-w&&9A$=9te#58eDS>Ck1~Lmx4bl?ygG`3OXYd@^f~nY}GD&~WH?
z)A&kO6XRjn249!4yuHfl+h41X%3DZ_A8A;4(67Q$6*ah-6?;4PW|w>)X>eo0a`q11
zDx+><0WS2|TX{#Ln1hTrr|l=p6oV&ibFq@c56~wQFJp?0eq=b%0oUtUf{dPkr`bjW
zlVttJ89gqvJ2sJnmd%s$-3ZL4rA*X(9c}ouM99Fp+3{d~3tszRX!4M2tRUgIs5mVA
z@S+K?lJP3e;n~acHb+gK_SKL@)%{5+pQxrPEkzA3W<_j6bg0qv>G%HK-a8&7N6x<S
zw1m9YmR*q6hHwJ*AK9SZTiw6fTiy>8EyQBh9acONUtV>}Em?09I0;{^()at_b|Dfz
z8q1{x{ylf7uGz=NIbNmH@%kEYT*o3aNFg=4Uw)!7TFJ$h5|H%JUoMmvh>QH>0|lX!
zvw09x)T{4?x7(Z!#rng}De`hV&9*F$_vg5Rti2>2v>6M_K%@OUaoY62SRG3c?nZ<3
z@*c9&nA+Wr45D?~LPL(I=pMg{9-5Nd^~HP)<F`EJT35WgIW>9J_h=l2#QVYpRZsWt
zI2ZbjZ(J_<Ff#R|fO-778FZA*YHoadeC9?|7U6_LSVlC!+=t?Tam0NyX6yXBvp)-B
zumi1|c%|G0b;9C%bz12^<cVswKblQ`DP9Yge)97f{hYuFzFcfrjRv!KZ?Z+dYBxl7
zmlOQDRMAcZUDkLyzdP)6^V~j<9Aa*UK3_gsH?T5!%i6Q5OmE#J=5&)=m@t6M+cL{7
zO@x^oIe{p0P3rw>=em&3_}0bkyR>o8Hi+I9*E!{`esJ0dG(JcW&7qYFt;cQ~e%RbJ
z&N%YL4z#slBMw(Sb<|nx>Y2;POjzd?<VQ@e=QU3JNs8}Q_apmRO}9{p<tewVl+Gmo
ziq0VWF(ym!JaAL2QGNYY-hFFH=fYV(?6H+!N*_5y%Zy5{-IcRmZDAkTJ5iXn8<520
z-$#uKS-%3z%)XO&Q>U0TyQX^K^K2rQj2>RB<S%D(%6y*Q(bX_z92+5HIX~s$)T^)v
z%gK*G#PxA%+w3Bp-@9aoVh6r%9_3VjoRkNDylT6N^wPQIvn6-sRS3t@m%i9QZ{2Ob
z4+7_qL(>XB^TT#k?u}xqgPQeA)Uk7Na`r?J88fu(Y(L6Q!f-C!Vs;<dvO}EKxfJzC
zgA_CFI)Y}ZVS|#)Cfn|fO>rhL!#`H;a`Eo}x?{L~Xx%HLGqvZ!emdP)+#sY{Ju&`}
zbF!hwyemv&&soTA{?P_1#BX>1*XAUvNuggn57h40fy2NORdOxCqmG?6Gh;5!c-BeE
z4#EnTx7ZUY>Ncr$I7RUXjuk6vP%?khaZus%*4LIgFK3Z!>b!;)`Q4bcdvkq(kgqR?
z86zQ?wJl5+UVfA7_hw1;RI3xl9nGVpW-bL2N&_h~H>c>P3J2*Em>&Mc(2C94o8mkE
z-Pct-WuXwL7?xtsUn+q*=ddv_Za()3$01txbieA2zc&PY+iKCFJEawqaVa?2PVtYU
z>|q3~*k9_+<hSp#IccX0*H;uZE@7m|!CQaUfx;GB%YmKOmM5_gb-JDpJ1COvf_a*|
zfO+Qd#JNKKlkBmc0|Q)@nF>ZrS~vgbi}osZ;B%XD4$qd{hb1lCb$PHKhF4GEc9ghP
zC1I_CCr+YEOTpai@Mk&)FhJpOcKTuc8{T=H7E5T@+`)dz8SGfj$MblkCa%MoosH5|
zHk|rKpnPh<BzoMc@nG0IHk#^Z5An4G(5OgoPeH}{WHZ;A9Hv3Ea$)Go==GVt6IuZ)
z$_24)vD|(rL#FB6UUO{+1q42HYZR;A5=ooG=m$3&s)hdQE8zk<N5=jAelgp?9iic8
z#|wARD)1B1)C;@A@J(-e^R@Qv&Fkn92Ty^O&h8UQ#II|bgX7oawDP%QrP!&~Ll5No
zM@N4<a&d*lcF!w<xA;_ojV#BEKDHSAhQMG9vI6S*P#()o=36cx2dRA*dcaByzN25S
zb^Im3(-bht-O+p{QS9D0@Khgr+PDpRx%AzOj@_j1R)fxdVdMB0)zeAY_Z}FT_HQ)t
zl&Dcd=ey|r3wD0}5h3`L6xSh>-;2vSvEGuMe1#NYI4b<Q#n)YdOB-@Kcn+s}a@1DZ
z^pTV8X8c)IUyRR_ZxUy-%~m^m9y%6m1?x>0RaJiW%G}(uxIs+)=CWIFS*+yxg~%)s
z)ff1O!U1^3lp~i^+NYR+s(tZfYI-V^iDCcQ{*jKojJtroAJ^-ljLHQ+gvVshQ>h(q
zr}s<0O4xy_(%Ny$su8%jwCq^io##yj6QuFUY1r$SqYR#k{1d0<ajiZ@vB=B#X^;68
zBVH*zFnva-0FCT{st9Rg*ZJuaZ^>l%PD&%IRR_!Fs&i0|Xepn{bo*Rev$WLIMa6X5
zT3r==>TbdYHr2ejCqSB`LG|pD!3HMkZmrOB!hp$B<(eE*6R2VrjPr+U^5+)vSVvE{
z^K_p#k-^B`o@@<hJWx!HrT-DWsmhtG9*T=9VPOT%H!ak4sG?GlkUKDB-aw9M6^z<g
z_cfPh?nE%|cF*)$`tGe{iIx4g#tW*K-6jQkR~&^Kj(QY3P8?Y`7G{<;%)+K5a%Cot
zUO;O-<rpuG>peu<JZYQ3KG42!`$_H>hv8~SA6`GP{JnlVG^CIYs4A)5F}ZL`DO~g?
z&uRr673`nr^p3CZ&tOx1&36`-mc9vVt&Lbt-<aH4T4d^QL~ppleP-;Z8pCjz>mIXC
zJL334bw;j}*vsUWZ)*?uUvUjlLX`0i7dF4-qpBx@jZ)X6>c650CG`D%bryfIKXkH)
zu=0X&P4Hw3I$(uQEGO~Bq#83n4;q=SeW**K0G=V}@8P(1)Lesccy=9FeFj#&j^Ii1
zY_n*+thIjfHoCmG6zMDv?fE$2LmG@@=cEjq%AdWYfCoCx85hZD0dm4btGh#4W7C3h
zdl+S2Ed{VL;ny^<GLc%{B-}3YL;)XmB_x`BNt6yy`@=2m&F%d$c6tS#T&}OI08Sxv
z!8HP_UYX92ik*FW15F0u(}wmh4#i?`5!wm}mnTpKgjFCxDiY68PSclDK>XEospXJE
zVn_%QayFRBLHq0vnV`AL8*&FN&h$r$qzBLvd)x#!B)+uLCuCao8H;c|%sjz#xVWyN
zrD05cRSefsm+jw~7_U&O@9gepC%4Fu*;1GHU&tB2!U0HP=`lI~1)+T1t2-`D={h)n
zQaF1L<_$3_oLxO$$5fm&C8mi+-m^H%JmxXhra)=84ZAnGvwpKeII71Vv|8gmhXm>g
z<8kLJ-#(fVvvd_a)H<K61rG^y{)4(0<K-+VLn%{xw8v?t&uZP%j(JS}I%3@S$ERuB
z+&@0Cb)EQSo5jVdVCFv#i#_Hs{U^}g+zAR-N*RbSM&Zspi!3V_^02E0X3sZMNfq%~
z7j=gx?6n8X%$BK;sfLUDdm0Vt3_wO?>BI;OL(=WDsf(HK{+pG7+%2$(m;J)SJ^kE&
zC~L-;r$?g%YaL^M@3iA${l5W;^4^L*QDOwq5bi|@m!gCmgMtZ{rT<Ex04y;`ffAHM
z@-IqI-ymF{Vu=ale^G+^AM_t10{XAf|JGGRh*87?&|^dpE1;3^*Ny%=VMY6lKbW#G
zTBHkf1F~%cO}uw00FC{DJ(jQry<^g_fui)TfQsWp_3hm$#)n7149xPUvJVvT(T8F_
zI^o3eMntU@&`=|peH8ApF%OZZa*w3kP@xO1SjP&ENcq8py7EKV9%grEALTgD*(8xT
zX)e+yWhe41a|M?&(NR2Vu0WYxYTW~S+><Y>K>5K(19zzZyrkH0U|ZQU7@w0gvKwg0
zguv&3qf2q%#4lRnrYvNrqFUm*nKH_7=R%{Yo}?feU?ubSxdIP&o}A78mSa7J!Sgh>
zCDGlY)8Mqlusv1brsHUag3dCk6n#rjr|Z%uT36`s<cE6+d?XjDV(6MC%gBboQ9kP+
zvxd1a-1sd%^c1HrI6&gl@@+NlmZ>BLz&#FP-)3!3XaD6`2(#8>D=PebjqfbysTmrk
znYK?_x~PLYSvNoaJSnk5KT2A^t?&sDg`1TE=^A7bS|e<7&-DbKP0deU>o&3yt+@)z
z;YmWt7n^k6k}ZRXzlD;Bp<A~@_XY<lr7B8inmheRfKH7e7s&S!1?(d;kBihQM$k^~
zr?o7*Vd3E(!VxzvXTdE<M4%--oWDM2!C%ue`FrP)Q>7(r@G8pGrSK!o>2k9L<;51c
zosDO-PfS393BWKC&&3Ehe&i<^&21F3TgtO`cG)L=wY_aYVvEDSSe_S{7^I6Xf_EqG
z%b8B|J;<ca<EzP=GD^=$q(&-HZfkf3b!{pnu77ejZ#l8;HxacJ60x!*Tyd7GJgkxs
zS(sV92v<m~E({bIz3T|!WdM{L<?=h5OPXAx-@JrECiXl$o^^ezhDC+QJy@rFoH!O*
z&N#<Dm}&t{$@peAln|!o*$ni^d{_UpC!|Uw=vnRs^D_1q$EwP`fh}VZrnh2vcwQ}r
zHqG;4M~TT$%h>I?@25wKwl}6M-wU#Y!_A?DOqy;<XDC{_x!A8?N~O7hMk;jUZyHY6
zBP2Xsa6!V>r9upVx1E+xGu`be)CUjWdzc>#J^|S49Dw~k3#=`z&)QtJY}_QzcCtQq
z20IWW@7*mG4Q9Mjamfr^lita-TMbeG-$MU*Io7pQY6AB+8qM^2*Ee2!qntV{sd?a4
z0nk&1E4!~(T~xu07n*Ljnts&Mo(BoQMzVw-ETI=CY7^gfd-aYL&R|{W+NM6g7m?wf
zvUL>+N^2mZ0cJ|WdRd-46mQ;HtXrHoAtzO^&)NEX9#9{cDs_H)HTr`m=4QdpyIY{*
z#h5I7YC)JI=R{qpou_@SobjL-XP1*7%SE}#S+i&Z075EgDDPug%^@H=a)^(lETK_M
zjv5=voFEIpriNDPdT$cS&80HCa(gr_s9rd}n{jxukssW5>9L6%Htp#Z(7k2SNbybR
z<$!yGED@yd?%*E#h7w8zCH`6`vGt#-^;v{$>C5#$t-r+wN%3C=iBQV^`{n7M`uBgT
zbeigz_<LkzaXqigUBp3Msz#yc_b=V9k;_}>`zWxeF2$xoA9Ahl`zX9l66Xh58?Js8
zU!gG$q`$e!c#TSa*x$%}jf2ME=458k;0Q5;d+d)$O_bKPtMY0MG%t;mUa<!Cd&#Rw
zI4dYALlIP@q}kbA5i-Pl>S5(f*?E=A^ty2|t!(U^0g<+0jr00>7#DxCqPyS^`jRj1
zS}=%9gZ9WCNk@N1je&BM|0(H&f}BG_1N_Mb0!vH=Ayn%BRfW44Z;W4f7zYA<6PPJ6
zb4}B9Nhuy(B3v@v{1_GN(dp9ka$3Ktujvf*VkI<*U#gfT?Lv;{X}fmfw&9=%<Q6dm
zOL&MOx3Glgza{)J_)jAw+avqQbr0S~3z~L;<$bx1*zJssSsHXW5RQwZw|#Gu>ieaI
z?n(^JizUzCEy`AHbi4NG?)Pg8Nh2hkDbm<muegB8c{oO@h=Yr#qpd$#rJFVpiQRpW
z;_pBOC_$7pG<y_Nu4FS-i3(;f+_6jvVA3<~FEO_pMG8S9rkc(hcIFR3gm8!?{gfpS
zCmP5|w`4T2aIy2wjP3(kogoW!us`@domjY$P6j|(^P~RLd|*)<lt*xP$QdC}nJX5P
zv_KjfcmqmX%?6Pwg2rQoTvwr;`CIHqGx+T4gvS1^asvVL`09jg<snXV(>$H#t8NZh
zWl$12Bba(bVyI&HtDQ?-^28h%n>y~?Rpvi25r9M3d9<5DO~8Y?-3XnOY3YRAUFjFJ
zSLG2!9MF8DsOp7l+#0Ig9*9Qo^4U0kr-M-*;M@ErAKj>~nj&8O?k4p$kL>FD+~wg-
zN1F=Dx0Bu6@`&YY$V95@Rx=K$$#vj~WhBjtu(nA&IL94oHvCM%{>9UHL*(8QOHLsW
z1o<#Kaq7MsL%510fHw%<=<gT74vjrswCQ*Y&USAyv3pLvzRP~(2cidBo*&sq7#&k;
z>4c3&FcHQ`fga#lw3zuaG=NplT3PY#x)uCwyY9qg$5yQI@dP#MhWR@~euf_2-&#-;
z$FpaFM#o@w+bYYzWsbK@dSI+N<5PyY)W8^{YzwcWa@nrVln<69s5nU-cZ(@fLFDjc
zAnqwg$dUdcI(#h1NOCCkC0?CdLlMkqlP5Pjw{S)IcuS_A0=?;mPy=%VlxJ?&0iB9Z
zk(B804G>VQx%H-y1$qyPa#wpY-F`%MBrn&(1+@4peq_Jzpxiwfgqy#vqy3ht-&`JS
z`tcoApiNQ?4*7sK(|6(aw;!UYa0~;=wv($X<oUOt5|k^zYl<CPJHV!CD-c#9E3iVL
z-`EsyjO5`1PiEOXl}Oa6I_p=jxZP;ohS!3seOn#a-k9<JH1UPCsxF~O3(7eDHL6Sl
zTPbWMON&xB?T6X?{H<eRCi%koo}NbkcGX@A&Keqx;Ro=O;90Ahg8K-K2q4@@rL!b7
z$<*5ohWcTbVMdACCCQw6i1vLR@S~hPt)iXs)22U7wz8WlR-Lz+yEHUO|I5AacNRO2
z-Cz+o;q@<2OpMX-PwbpuO+hEq+n)Q6z-JN&2U`*dvN0lw=j5!VEY})8V*6ZnD{*XB
ziHmNuO;|GXAxS~5VR=j)1M0iiu&si<D^8IxWNJWEE~abgGKb%?@b|d89@Ghs2$#c!
zy@^*pb+zTkv~U$qgeGkk9bD-;Yf?v_Ru7#EWh-9>a0VHXv0d)JS6KMQvTy2ib$A)X
zS4Q99gL<zXs>PVk-KXAGu36tHt0Q{ngwW4sY<MB08wS&nN06Z(zRjO{Ugs-K&fr*?
zm=S+i$3aE{@!2`<=oTCe>lT$3Jmd2TN$8$8b**N%CNg%mbT05`$SusNPRWmbAHmOx
ztBJk>K_(%sd(0i&gM7+1_yB&fyPgh7tFoq5<#uwYkd|LFZg|yj>&C~gap=X^H3n{!
z$$rU19jhmGgnVhkc-8}m?2}kNpH^^J4?j1sok%fwRMRKpX8YuVznwQx0^;tl;%^hk
zq(_OZoaZkReh+0zR2`<S`EG-4`&#t_+BPw-P(K&A^$lo5d@4LGb362S(&)3SN@5z*
zVI{5P$$<ikSdP}nl=)3madF9-4;Q{4m}_L*GA`U=ZT5o`5&ozVrNOz_>8**mM5sEf
zs5{nXg>Cn#m9j|yrOQB8&R(JKnh2CO5XZdn^P}liLd%Hzq_1X>@%RM@P|9|vT(z)P
zWBLOtVvk4u6yt`g`P5cYnFRZ6ca7Bpx%HDrgj72k{+X+6<-d-zmH)2<)LQlOw|F7T
z)6Vg?Mc&OlvbcnjklCnOQoS9R>zT~ZrdM3uuk}YmP5un!m+$Ha9!C68NqRLd%x#Qk
zLVB-x`Ot_~WL?m0fRI#!zh{psnq<OLN1A&>mUE1H%H+-5{AUQ}t@v*To4Vc4a2?cU
z9CV^?MSBNQUz(Cq(dJuQS-mn->`KvVdP`>^G|hL-z8X$!xBX<ComE`A>2wuov%hzy
zy>yh4U0Jo1(R)_mWltlDCjA6t$ob2iTt&@VWHm>0u1>%|v%M{<w?e6M4ETH(M-=r>
yN`1bUe`)bo#Pw<FX%1h6k@GaWujRWvxt5Jb2rZQnX~I8^L2Am{O63aAg8l=TZ3!~~

literal 0
HcmV?d00001

diff --git a/public/images/docs/diagrams/generic_render_tree.dark.png b/public/images/docs/diagrams/generic_render_tree.dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..859fdaa96cb4b6ea07acf73757a2d2407cc36aa6
GIT binary patch
literal 14768
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

literal 0
HcmV?d00001

diff --git a/public/images/docs/diagrams/generic_render_tree.png b/public/images/docs/diagrams/generic_render_tree.png
new file mode 100644
index 0000000000000000000000000000000000000000..952cf5faa0137f53208c351dc5c086c1d9ffa425
GIT binary patch
literal 15294
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
V@PBWL`KBe7jHDvCOx!r|zW_Gicl`hW

literal 0
HcmV?d00001

diff --git a/public/images/docs/diagrams/module_dependency_tree.dark.png b/public/images/docs/diagrams/module_dependency_tree.dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..e8a85f7c0e3c6b2810988303d450faddb9e93e0c
GIT binary patch
literal 16577
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
bf7y793lHE(4v72?K)e)XRb(op-a`H#EsOza

literal 0
HcmV?d00001

diff --git a/public/images/docs/diagrams/module_dependency_tree.png b/public/images/docs/diagrams/module_dependency_tree.png
new file mode 100644
index 0000000000000000000000000000000000000000..0dcaaa7aa8bcd347f11216da35fe17a9e335b50e
GIT binary patch
literal 16977
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

literal 0
HcmV?d00001

diff --git a/public/images/docs/diagrams/render_tree.dark.png b/public/images/docs/diagrams/render_tree.dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..117d7ff3e9792938b172c2961ab2de20dc5e46bc
GIT binary patch
literal 12030
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
M%34aLPfUaU2Vi}{mjD0&

literal 0
HcmV?d00001

diff --git a/public/images/docs/diagrams/render_tree.png b/public/images/docs/diagrams/render_tree.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ea750bb07c32e924981ff36725c337134347a3d
GIT binary patch
literal 12607
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
ABme*a

literal 0
HcmV?d00001

diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index 6df4c0475..e8b6440aa 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -18,6 +18,7 @@ React is a JavaScript library for rendering user interfaces (UI). UI is built fr
 * [How to conditionally render components](/learn/conditional-rendering)
 * [How to render multiple components at a time](/learn/rendering-lists)
 * [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure)
+* [Why understanding your UI as trees is useful](/learn/understanding-your-ui-as-a-tree)
 
 </YouWillLearn>
 
@@ -523,6 +524,29 @@ Read **[Keeping Components Pure](/learn/keeping-components-pure)** to learn how
 
 </LearnMore>
 
+## Your UI as a tree {/*your-ui-as-a-tree*/}
+
+React uses trees to model the relationships between components and modules. 
+
+A React render tree is a representation of the parent and child relationship between components. 
+
+<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">An example React render tree.</Diagram>
+
+Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
+
+Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. 
+
+<Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">An example module dependency tree.</Diagram>
+
+A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. 
+
+<LearnMore path="/learn/understanding-your-ui-as-a-tree">
+
+Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
+
+</LearnMore>
+
+
 ## What's next? {/*whats-next*/}
 
 Head over to [Your First Component](/learn/your-first-component) to start reading this chapter page by page!
diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index 1c9c341fb..709d9e3d3 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -10,33 +10,17 @@ State is isolated between components. React keeps track of which state belongs t
 
 <YouWillLearn>
 
-* How React "sees" component structures
 * When React chooses to preserve or reset the state
 * How to force React to reset component's state
 * How keys and types affect whether the state is preserved
 
 </YouWillLearn>
 
-## The UI tree {/*the-ui-tree*/}
+## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
 
-Browsers use many tree structures to model UI. The [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) represents HTML elements, the [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) does the same for CSS. There's even an [Accessibility tree](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)!
-
-React also uses tree structures to manage and model the UI you make. React makes **UI trees** from your JSX. Then React DOM updates the browser DOM elements to match that UI tree. (React Native translates these trees into elements specific to mobile platforms.)
-
-<DiagramGroup>
-
-<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">
-
-From components, React creates a UI tree which React DOM uses to render the DOM
-
-</Diagram>
-
-</DiagramGroup>
-
-## State is tied to a position in the tree {/*state-is-tied-to-a-position-in-the-tree*/}
-
-When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the UI tree.
+React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
 
+When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree.
 
 Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:
 
@@ -190,7 +174,7 @@ Updating state
 </DiagramGroup>
 
 
-React will keep the state around for as long as you render the same component at the same position. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
+React will keep the state around for as long as you render the same component at the same position in the tree. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
 
 <Sandpack>
 
diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md
new file mode 100644
index 000000000..948f85790
--- /dev/null
+++ b/src/content/learn/understanding-your-ui-as-a-tree.md
@@ -0,0 +1,299 @@
+---
+title: Understanding your UI as a Tree 
+---
+
+<Intro>
+
+Your React app is taking shape with many components being nested within each other. How does React keep track of your app's component structure?
+
+React, and many other UI libraries, model UI as a tree. Thinking of your app as a tree is useful for understanding the relationship between components to debug future concepts like performance and state management.
+
+</Intro>
+
+<YouWillLearn>
+
+* How React "sees" component structures
+* What a render tree is and what it is useful for
+* What a module dependency tree is and what it is useful for
+
+</YouWillLearn>
+
+## Your UI as a tree {/*your-ui-as-a-tree*/}
+
+Trees are a relationship model between items and UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy. 
+
+<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">
+
+React creates a UI tree from your components. In this example, the UI tree is then used to render to the DOM.
+</Diagram>
+
+Like browsers and mobile platforms, React also uses tree structures to manage and model the relationship between components in a React app. These trees are useful tools to understand how data flows through a React app and how to optimize rendering and app size.
+
+## The Render Tree {/*the-render-tree*/}
+
+A major feature of components is the ability to compose components of other components. As we [nest components](/learn/your-first-component#nesting-and-organizing-components), we have the concept of parent and child components, where each parent component may itself be a child of another component. 
+
+When we render a React app, we can model this relationship in a tree, known as the render tree.
+
+Here is a React app that renders inspirational quotes. 
+
+<Sandpack>
+
+```js App.js
+import FancyText from './FancyText';
+import InspirationGenerator from './InspirationGenerator';
+import Copyright from './Copyright';
+
+export default function App() {
+  return (
+    <>
+      <FancyText title text="Get Inspired App" />
+      <InspirationGenerator>
+        <Copyright year={2004} />
+      </InspirationGenerator>
+    </>
+  );
+}
+
+```
+
+```js FancyText.js
+export default function FancyText({title, text}) {
+  return title
+    ? <h1 className='fancy title'>{text}</h1>
+    : <h3 className='fancy cursive'>{text}</h3>
+}
+```
+
+```js InspirationGenerator.js
+import * as React from 'react';
+import quotes from './quotes';
+import FancyText from './FancyText';
+
+export default function InspirationGenerator({children}) {
+  const [index, setIndex] = React.useState(0);
+  const quote = quotes[index];
+  const next = () => setIndex((index + 1) % quotes.length);
+
+  return (
+    <>
+      <p>Your inspirational quote is:</p>
+      <FancyText text={quote} />
+      <button onClick={next}>Inspire me again</button>
+      {children}
+    </>
+  );
+}
+```
+
+```js Copyright.js
+export default function Copyright({year}) {
+  return <p className='small'>©️ {year}</p>;
+}
+```
+
+```js quotes.js
+export default [
+  "Don’t let yesterday take up too much of today.” — Will Rogers",
+  "Ambition is putting a ladder against the sky.",
+  "A joy that's shared is a joy made double.",
+  ];
+```
+
+```css
+.fancy {
+  font-family: 'Georgia';
+}
+.title {
+  color: #007AA3;
+  text-decoration: underline;
+}
+.cursive {
+  font-style: italic;
+}
+.small {
+  font-size: 10px;
+}
+```
+
+</Sandpack>
+
+<Diagram name="render_tree" height={250} width={500} alt="Tree graph with five nodes. Each node represents a component. The root of the tree is App, with two arrows extending from it to 'InspirationGenerator' and 'FancyText'. The arrows are labelled with the word 'renders'. 'InspirationGenerator' node also has two arrows pointing to nodes 'FancyText' and 'Copyright'.">
+
+React creates a UI tree made of components rendered, known as a render tree.
+
+</Diagram>
+
+From the example app, we can construct the above render tree. 
+
+The tree is composed of nodes, each of which represents a component. `App`, `FancyText`, `Copyright`, to name a few, are all nodes in our tree. 
+
+The root node in a React render tree is the [root component](/learn/importing-and-exporting-components#the-root-component-file) of the app. In this case, the root component is `App` and it is the first component React renders. Each arrow in the tree points from a parent component to a child component.
+
+<DeepDive>
+
+#### Where are the HTML tags in the render tree? {/*where-are-the-html-elements-in-the-render-tree*/}
+
+You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](learn/your-first-component#components-ui-building-blocks). 
+
+React, as a UI framework, is platform agnostic. On react.dev, we showcase examples that render to the web, which uses HTML markup as its UI primitives. But a React app could just as likely render to a mobile or desktop platform, which may use different UI primitives like [UIView](https://developer.apple.com/documentation/uikit/uiview) or [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0).
+
+These platform UI primitives are not a part of React. React render trees can provide insight to our React app regardless of what platform your app renders to.
+
+</DeepDive>
+
+A render tree represents a single render pass of a React application. With [conditional rendering](/learn/conditional-rendering), a parent component may render different children depending on the data passed.
+
+We can update the app to conditionally render either an inspirational quote or color.
+
+<Sandpack>
+
+```js App.js
+import FancyText from './FancyText';
+import InspirationGenerator from './InspirationGenerator';
+import Copyright from './Copyright';
+
+export default function App() {
+  return (
+    <>
+      <FancyText title text="Get Inspired App" />
+      <InspirationGenerator>
+        <Copyright year={2004} />
+      </InspirationGenerator>
+    </>
+  );
+}
+
+```
+
+```js FancyText.js
+export default function FancyText({title, text}) {
+  return title
+    ? <h1 className='fancy title'>{text}</h1>
+    : <h3 className='fancy cursive'>{text}</h3>
+}
+```
+
+```js Color.js
+export default function Color({value}) {
+  return <div className="colorbox" style={{backgroundColor: value}} / >
+}
+```
+
+```js InspirationGenerator.js
+import * as React from 'react';
+import inspirations from './inspirations';
+import FancyText from './FancyText';
+import Color from './Color';
+
+export default function InspirationGenerator({children}) {
+  const [index, setIndex] = React.useState(0);
+  const inspiration = inspirations[index];
+  const next = () => setIndex((index + 1) % inspirations.length);
+
+  return (
+    <>
+      <p>Your inspirational {inspiration.type} is:</p>
+      {inspiration.type === 'quote'
+      ? <FancyText text={inspiration.value} />
+      : <Color value={inspiration.value} />}
+      
+      <button onClick={next}>Inspire me again</button>
+      {children}
+    </>
+  );
+}
+```
+
+```js Copyright.js
+export default function Copyright({year}) {
+  return <p className='small'>©️ {year}</p>;
+}
+```
+
+```js inspirations.js
+export default [
+  {type: 'quote', value: "Don’t let yesterday take up too much of today.” — Will Rogers"},
+  {type: 'color', value: "#B73636"},
+  {type: 'quote', value: "Ambition is putting a ladder against the sky."},
+  {type: 'color', value: "#256266"},
+  {type: 'quote', value: "A joy that's shared is a joy made double."},
+  {type: 'color', value: "#F9F2B4"},
+];
+```
+
+```css
+.fancy {
+  font-family: 'Georgia';
+}
+.title {
+  color: #007AA3;
+  text-decoration: underline;
+}
+.cursive {
+  font-style: italic;
+}
+.small {
+  font-size: 10px;
+}
+.colorbox {
+  height: 100px;
+  width: 100px;
+  margin: 8px;
+}
+```
+</Sandpack>
+
+<Diagram name="conditional_render_tree" height={250} width={561} alt="Tree graph with six nodes. The top node of the tree is labelled 'App' with two arrows extending to nodes labelled 'InspirationGenerator' and 'FancyText'. The arrows are solid lines and are labelled with the word 'renders'. 'InspirationGenerator' node also has three arrows. The arrows to nodes 'FancyText' and 'Color' are dashed and labelled with 'renders?'. The last arrow points to the node labelled 'Copyright' and is solid and labelled with 'renders'.">
+
+With conditional rendering, across different renders, the render tree may render different components.
+
+</Diagram>
+
+In this example, depending on what `inspiration.type` is, we may render `<FancyText>` or `<Color>`. The render tree may be different for each render pass.
+
+Although render trees may differ across render pases, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered. 
+
+Identifying these categories of components are useful for understanding data flow and performance of your app.
+
+## The Module Dependency Tree {/*the-module-dependency-tree*/}
+
+Another relationship in a React app that can be modeled with a tree are an app's module dependencies. As we [break up our components](/learn/importing-and-exporting-components#exporting-and-importing-a-component) and logic into separate files, we create [JS modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) where we may export components, functions, or constants. 
+
+Each node in a module dependency tree is a module and each branch represents an `import` statement in that module.
+
+If we take the previous Inspirations app, we can build a module dependency tree, or dependency tree for short. 
+
+<Diagram name="module_dependency_tree" height={250} width={658} alt="A tree graph with seven nodes. Each node is labelled with a module name. The top level node of the tree is labelled 'App.js'. There are three arrows pointing to the modules 'InspirationGenerator.js', 'FancyText.js' and 'Copyright.js' and the arrows are labelled with 'imports'. From the 'InspirationGenerator.js' node, there are three arrows that extend to three modules: 'FancyText.js', 'Color.js', and 'inspirations.js'. The arrows are labelled with 'imports'.">
+
+The module dependency tree for the Inspirations app.
+
+</Diagram>
+
+The root node of the tree is the root module, also known as the entrypoint file. It often is the module that contains the root component.
+
+Comparing to the render tree of the same app, there are similar structures but some notable differences:
+
+* The nodes that make-up the tree represent modules, not components. 
+* Non-component modules, like `inspirations.js`, are also represented in this tree. The render tree only encapsulates components.
+* `Copyright.js` appears under `App.js` but in the render tree, `Copyright`, the component, appears as a child of `InspirationGenerator`. This is because `InspirationGenerator` accepts JSX as [children props](/learn/passing-props-to-a-component#passing-jsx-as-children), so it renders `Copyright` as a child component but does not import the module.
+
+Dependency trees are useful to determine what modules are necessary to run your React app. When building a React app for production, there is typically a build step that will bundle all the necessary JavaScript to ship to the client. The tool responsible for this is called a [bundler](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem), and bundlers will use the dependency tree to determine what modules should be included.
+
+As your app grows, often the bundle size does too. Large bundle sizes are expensive for a client to download and run and delays the time for your UI to get drawn. Getting a sense of your app's dependency tree may help with debugging these issues.
+
+[comment]: <> (perhaps we should also deep dive on conditional imports)
+
+<Recap>
+
+* Trees are a common way to represent the relationship between entities. They are often used to model UI.
+* Render trees represent the nested relationship between React components across a single render.
+* With conditional rendering, the render tree may change across different renders. With different prop values, components may render different children components. 
+* Render trees help identify what the top-level and leaf components are. Top-level components affect the rendering performance of all components beneath them and leaf components are often re-rendered frequently. Identifying them is useful for understanding and debugging rendering performance.
+* Dependency trees represent the module dependencies in a React app.
+* Dependency trees are used by build tools to bundle the necessary code to ship an app.
+* Dependency trees are useful for debugging large bundle sizes that slow time to paint and expose opportunities for optimizing what code is bundled.
+
+</Recap>
+
+[TODO]: <> (Add challenges)
\ No newline at end of file
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index f462c696e..02806dc0c 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -86,6 +86,10 @@
         {
           "title": "Keeping Components Pure",
           "path": "/learn/keeping-components-pure"
+        },
+        {
+          "title": "Your UI as a Tree",
+          "path": "/learn/understanding-your-ui-as-a-tree"
         }
       ]
     },

From 16f90a936a1b1d29811a125c3554586390c30f7c Mon Sep 17 00:00:00 2001
From: Matt Carroll <7158882+mattcarrollcode@users.noreply.github.com>
Date: Fri, 20 Oct 2023 14:00:10 -0700
Subject: [PATCH 08/52] Minor fixes to Understand Your UI as a Tree learn doc
 (#6365)

---
 .../learn/understanding-your-ui-as-a-tree.md  | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md
index 948f85790..2a5a24b85 100644
--- a/src/content/learn/understanding-your-ui-as-a-tree.md
+++ b/src/content/learn/understanding-your-ui-as-a-tree.md
@@ -1,12 +1,12 @@
 ---
-title: Understanding your UI as a Tree 
+title: Understanding Your UI as a Tree
 ---
 
 <Intro>
 
 Your React app is taking shape with many components being nested within each other. How does React keep track of your app's component structure?
 
-React, and many other UI libraries, model UI as a tree. Thinking of your app as a tree is useful for understanding the relationship between components to debug future concepts like performance and state management.
+React, and many other UI libraries, model UI as a tree. Thinking of your app as a tree is useful for understanding the relationship between components. This understanding will help you debug future concepts like performance and state management.
 
 </Intro>
 
@@ -20,7 +20,7 @@ React, and many other UI libraries, model UI as a tree. Thinking of your app as
 
 ## Your UI as a tree {/*your-ui-as-a-tree*/}
 
-Trees are a relationship model between items and UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy. 
+Trees are a relationship model between items and UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy.
 
 <Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">
 
@@ -31,11 +31,11 @@ Like browsers and mobile platforms, React also uses tree structures to manage an
 
 ## The Render Tree {/*the-render-tree*/}
 
-A major feature of components is the ability to compose components of other components. As we [nest components](/learn/your-first-component#nesting-and-organizing-components), we have the concept of parent and child components, where each parent component may itself be a child of another component. 
+A major feature of components is the ability to compose components of other components. As we [nest components](/learn/your-first-component#nesting-and-organizing-components), we have the concept of parent and child components, where each parent component may itself be a child of another component.
 
 When we render a React app, we can model this relationship in a tree, known as the render tree.
 
-Here is a React app that renders inspirational quotes. 
+Here is a React app that renders inspirational quotes.
 
 <Sandpack>
 
@@ -120,13 +120,14 @@ export default [
 
 <Diagram name="render_tree" height={250} width={500} alt="Tree graph with five nodes. Each node represents a component. The root of the tree is App, with two arrows extending from it to 'InspirationGenerator' and 'FancyText'. The arrows are labelled with the word 'renders'. 'InspirationGenerator' node also has two arrows pointing to nodes 'FancyText' and 'Copyright'.">
 
-React creates a UI tree made of components rendered, known as a render tree.
+React creates a *render tree*, a UI tree, composed of the rendered components.
+
 
 </Diagram>
 
-From the example app, we can construct the above render tree. 
+From the example app, we can construct the above render tree.
 
-The tree is composed of nodes, each of which represents a component. `App`, `FancyText`, `Copyright`, to name a few, are all nodes in our tree. 
+The tree is composed of nodes, each of which represents a component. `App`, `FancyText`, `Copyright`, to name a few, are all nodes in our tree.
 
 The root node in a React render tree is the [root component](/learn/importing-and-exporting-components#the-root-component-file) of the app. In this case, the root component is `App` and it is the first component React renders. Each arrow in the tree points from a parent component to a child component.
 
@@ -134,7 +135,7 @@ The root node in a React render tree is the [root component](/learn/importing-an
 
 #### Where are the HTML tags in the render tree? {/*where-are-the-html-elements-in-the-render-tree*/}
 
-You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](learn/your-first-component#components-ui-building-blocks). 
+You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](learn/your-first-component#components-ui-building-blocks).
 
 React, as a UI framework, is platform agnostic. On react.dev, we showcase examples that render to the web, which uses HTML markup as its UI primitives. But a React app could just as likely render to a mobile or desktop platform, which may use different UI primitives like [UIView](https://developer.apple.com/documentation/uikit/uiview) or [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0).
 
@@ -176,7 +177,7 @@ export default function FancyText({title, text}) {
 
 ```js Color.js
 export default function Color({value}) {
-  return <div className="colorbox" style={{backgroundColor: value}} / >
+  return <div className="colorbox" style={{backgroundColor: value}} />
 }
 ```
 
@@ -197,7 +198,7 @@ export default function InspirationGenerator({children}) {
       {inspiration.type === 'quote'
       ? <FancyText text={inspiration.value} />
       : <Color value={inspiration.value} />}
-      
+
       <button onClick={next}>Inspire me again</button>
       {children}
     </>
@@ -252,17 +253,17 @@ With conditional rendering, across different renders, the render tree may render
 
 In this example, depending on what `inspiration.type` is, we may render `<FancyText>` or `<Color>`. The render tree may be different for each render pass.
 
-Although render trees may differ across render pases, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered. 
+Although render trees may differ across render pases, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered.
 
 Identifying these categories of components are useful for understanding data flow and performance of your app.
 
 ## The Module Dependency Tree {/*the-module-dependency-tree*/}
 
-Another relationship in a React app that can be modeled with a tree are an app's module dependencies. As we [break up our components](/learn/importing-and-exporting-components#exporting-and-importing-a-component) and logic into separate files, we create [JS modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) where we may export components, functions, or constants. 
+Another relationship in a React app that can be modeled with a tree are an app's module dependencies. As we [break up our components](/learn/importing-and-exporting-components#exporting-and-importing-a-component) and logic into separate files, we create [JS modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) where we may export components, functions, or constants.
 
 Each node in a module dependency tree is a module and each branch represents an `import` statement in that module.
 
-If we take the previous Inspirations app, we can build a module dependency tree, or dependency tree for short. 
+If we take the previous Inspirations app, we can build a module dependency tree, or dependency tree for short.
 
 <Diagram name="module_dependency_tree" height={250} width={658} alt="A tree graph with seven nodes. Each node is labelled with a module name. The top level node of the tree is labelled 'App.js'. There are three arrows pointing to the modules 'InspirationGenerator.js', 'FancyText.js' and 'Copyright.js' and the arrows are labelled with 'imports'. From the 'InspirationGenerator.js' node, there are three arrows that extend to three modules: 'FancyText.js', 'Color.js', and 'inspirations.js'. The arrows are labelled with 'imports'.">
 
@@ -274,13 +275,13 @@ The root node of the tree is the root module, also known as the entrypoint file.
 
 Comparing to the render tree of the same app, there are similar structures but some notable differences:
 
-* The nodes that make-up the tree represent modules, not components. 
+* The nodes that make-up the tree represent modules, not components.
 * Non-component modules, like `inspirations.js`, are also represented in this tree. The render tree only encapsulates components.
 * `Copyright.js` appears under `App.js` but in the render tree, `Copyright`, the component, appears as a child of `InspirationGenerator`. This is because `InspirationGenerator` accepts JSX as [children props](/learn/passing-props-to-a-component#passing-jsx-as-children), so it renders `Copyright` as a child component but does not import the module.
 
 Dependency trees are useful to determine what modules are necessary to run your React app. When building a React app for production, there is typically a build step that will bundle all the necessary JavaScript to ship to the client. The tool responsible for this is called a [bundler](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem), and bundlers will use the dependency tree to determine what modules should be included.
 
-As your app grows, often the bundle size does too. Large bundle sizes are expensive for a client to download and run and delays the time for your UI to get drawn. Getting a sense of your app's dependency tree may help with debugging these issues.
+As your app grows, often the bundle size does too. Large bundle sizes are expensive for a client to download and run. Large bundle sizes can delay the time for your UI to get drawn. Getting a sense of your app's dependency tree may help with debugging these issues.
 
 [comment]: <> (perhaps we should also deep dive on conditional imports)
 
@@ -288,7 +289,7 @@ As your app grows, often the bundle size does too. Large bundle sizes are expens
 
 * Trees are a common way to represent the relationship between entities. They are often used to model UI.
 * Render trees represent the nested relationship between React components across a single render.
-* With conditional rendering, the render tree may change across different renders. With different prop values, components may render different children components. 
+* With conditional rendering, the render tree may change across different renders. With different prop values, components may render different children components.
 * Render trees help identify what the top-level and leaf components are. Top-level components affect the rendering performance of all components beneath them and leaf components are often re-rendered frequently. Identifying them is useful for understanding and debugging rendering performance.
 * Dependency trees represent the module dependencies in a React app.
 * Dependency trees are used by build tools to bundle the necessary code to ship an app.
@@ -296,4 +297,4 @@ As your app grows, often the bundle size does too. Large bundle sizes are expens
 
 </Recap>
 
-[TODO]: <> (Add challenges)
\ No newline at end of file
+[TODO]: <> (Add challenges)

From a0cacd7d3a89375e5689ccfba0461e293bfe9eeb Mon Sep 17 00:00:00 2001
From: Julian Weiss <me@insanj.com>
Date: Sun, 22 Oct 2023 01:09:44 -0400
Subject: [PATCH 09/52] =?UTF-8?q?Fix=20onScroll=20=E2=86=92=20onWheel=20ty?=
 =?UTF-8?q?po=20in=20common-props=20(#6364)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/content/reference/react-dom/components/common.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index 8cf1fa29b..78d2713bc 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -694,7 +694,7 @@ An event handler type for the `onWheel` event.
 
 ```js
 <div
-  onScroll={e => console.log('onScroll')}
+  onWheel={e => console.log('onWheel')}
 />
 ```
 

From 717f9b5da0e6d148f6aa8896138720bdf5d2f33a Mon Sep 17 00:00:00 2001
From: Kathryn Middleton <kmiddleton14@gmail.com>
Date: Tue, 24 Oct 2023 10:35:15 -0400
Subject: [PATCH 10/52] Remove unsupported ga-lite and update existing calls to
 GA4 (#6366)

* Cleanup old ga-lite tag and refactor GA4

* cleanup

* cleanup2
---
 .env.production                    |  2 +-
 package.json                       |  1 -
 src/components/Layout/Feedback.tsx | 15 ++++++---------
 src/pages/_app.tsx                 | 17 +++++++++--------
 src/pages/_document.tsx            |  4 ++--
 src/siteConfig.js                  |  1 -
 yarn.lock                          |  5 -----
 7 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/.env.production b/.env.production
index d25eb7dd4..e403f96b6 100644
--- a/.env.production
+++ b/.env.production
@@ -1 +1 @@
-NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
\ No newline at end of file
+NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'
\ No newline at end of file
diff --git a/package.json b/package.json
index 472ef79c9..b5e07d70a 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "debounce": "^1.2.1",
-    "ga-lite": "^2.1.4",
     "github-slugger": "^1.3.0",
     "next": "^13.4.1",
     "next-remote-watch": "^1.0.0",
diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 2bf9afe57..86fc91350 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -4,7 +4,6 @@
 
 import {useState} from 'react';
 import {useRouter} from 'next/router';
-import {ga} from '../../utils/analytics';
 
 export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
   const {asPath} = useRouter();
@@ -48,14 +47,12 @@ const thumbsDownIcon = (
 function sendGAEvent(isPositive: boolean) {
   // Fragile. Don't change unless you've tested the network payload
   // and verified that the right events actually show up in GA.
-  ga(
-    'send',
-    'event',
-    'button',
-    'feedback',
-    window.location.pathname,
-    isPositive ? '1' : '0'
-  );
+  // @ts-ignore
+  gtag('event', 'feedback', {
+    event_category: 'button',
+    event_label: window.location.pathname,
+    value: isPositive ? 1 : 0,
+  });
 }
 
 function SendFeedback({onSubmit}: {onSubmit: () => void}) {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 717375968..5431f87cc 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,7 +5,6 @@
 import {useEffect} from 'react';
 import {AppProps} from 'next/app';
 import {useRouter} from 'next/router';
-import {ga} from '../utils/analytics';
 
 import '@docsearch/css';
 import '../styles/algolia.css';
@@ -13,13 +12,13 @@ import '../styles/index.css';
 import '../styles/sandpack.css';
 
 if (typeof window !== 'undefined') {
-  if (process.env.NODE_ENV === 'production') {
-    ga('create', process.env.NEXT_PUBLIC_GA_TRACKING_ID, 'auto');
-    ga('send', 'pageview');
-  }
   const terminationEvent = 'onpagehide' in window ? 'pagehide' : 'unload';
   window.addEventListener(terminationEvent, function () {
-    ga('send', 'timing', 'JS Dependencies', 'unload');
+    // @ts-ignore
+    gtag('event', 'timing', {
+      event_label: 'JS Dependencies',
+      event: 'unload',
+    });
   });
 }
 
@@ -44,8 +43,10 @@ export default function MyApp({Component, pageProps}: AppProps) {
   useEffect(() => {
     const handleRouteChange = (url: string) => {
       const cleanedUrl = url.split(/[\?\#]/)[0];
-      ga('set', 'page', cleanedUrl);
-      ga('send', 'pageview');
+      // @ts-ignore
+      gtag('event', 'pageview', {
+        event_label: cleanedUrl,
+      });
     };
     router.events.on('routeChangeComplete', handleRouteChange);
     return () => {
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index d8fb0c621..823ca0b71 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -11,11 +11,11 @@ const MyDocument = () => {
       <Head />
       <script
         async
-        src={`https://www.googletagmanager.com/gtag/js?id=${siteConfig.googleAnalyticsTagId}`}
+        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
       />
       <script
         dangerouslySetInnerHTML={{
-          __html: `window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '${siteConfig.googleAnalyticsTagId}');`,
+          __html: `window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '${process.env.NEXT_PUBLIC_GA_TRACKING_ID}');`,
         }}
       />
       <body className="font-text font-medium antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
diff --git a/src/siteConfig.js b/src/siteConfig.js
index c676ca6e2..0ada6b934 100644
--- a/src/siteConfig.js
+++ b/src/siteConfig.js
@@ -17,5 +17,4 @@ exports.siteConfig = {
     apiKey: 'e8451218980a351815563de007648b00',
     indexName: 'beta-react',
   },
-  googleAnalyticsTagId: 'G-B1E83PJ3RT',
 };
diff --git a/yarn.lock b/yarn.lock
index 8a3183cd5..c7b0f980e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2765,11 +2765,6 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-ga-lite@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/ga-lite/-/ga-lite-2.1.4.tgz#f0c1fd3234bc44d8b15db640a93b34dbce84d43a"
-  integrity sha512-OJqPbutD8SfgF8SebyLh0uHdpQH32d5TuviXao5yPjyO2sGW3Gm+ooDmOhvXITgPepwwKxzv7ZMVKk2/hg/+lg==
-
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"

From bbdbaca1ef8b2e84bb660250703cb56400d3b83a Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Wed, 25 Oct 2023 04:06:25 +0900
Subject: [PATCH 11/52] Fixes related to "Your UI as a Tree" (#6374)

---
 src/content/learn/describing-the-ui.md               | 12 ++++++++++--
 src/content/learn/understanding-your-ui-as-a-tree.md |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index e8b6440aa..167fe5b70 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -530,13 +530,21 @@ React uses trees to model the relationships between components and modules.
 
 A React render tree is a representation of the parent and child relationship between components. 
 
-<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">An example React render tree.</Diagram>
+<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">
+
+An example React render tree.
+
+</Diagram>
 
 Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
 
 Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. 
 
-<Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">An example module dependency tree.</Diagram>
+<Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">
+
+An example module dependency tree.
+
+</Diagram>
 
 A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. 
 
diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md
index 2a5a24b85..98f60cea8 100644
--- a/src/content/learn/understanding-your-ui-as-a-tree.md
+++ b/src/content/learn/understanding-your-ui-as-a-tree.md
@@ -253,7 +253,7 @@ With conditional rendering, across different renders, the render tree may render
 
 In this example, depending on what `inspiration.type` is, we may render `<FancyText>` or `<Color>`. The render tree may be different for each render pass.
 
-Although render trees may differ across render pases, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered.
+Although render trees may differ across render passes, these trees are generally helpful for identifying what the *top-level* and *leaf components* are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered.
 
 Identifying these categories of components are useful for understanding data flow and performance of your app.
 

From 63f947024966a71370b3b9ba131fb78f8ced7c59 Mon Sep 17 00:00:00 2001
From: Kathryn Middleton <kmiddleton14@gmail.com>
Date: Tue, 24 Oct 2023 14:26:01 -0700
Subject: [PATCH 12/52] Add Error Boundary to useTransition API docs (#6354)

* Add Error Boundary to useTransition docs

* add Error Boundary to useTransition

* Use Canary

* Add Error Boundary to useTransition API docs

* Update src/components/MDX/Sandpack/Preview.tsx

Co-authored-by: Jan Kassens <jan@kassens.net>

* Update src/content/reference/react/useTransition.md

Co-authored-by: Luna <lunaleaps@gmail.com>

* Update src/content/reference/react/useTransition.md

Co-authored-by: Luna <lunaleaps@gmail.com>

* Add Error Boundary to useTransition docs

* add Error Boundary to useTransition

* Use Canary

* Add Error Boundary to useTransition API docs

* Update src/components/MDX/Sandpack/Preview.tsx

Co-authored-by: Jan Kassens <jan@kassens.net>

* Update src/content/reference/react/useTransition.md

Co-authored-by: Luna <lunaleaps@gmail.com>

* Update src/content/reference/react/useTransition.md

Co-authored-by: Luna <lunaleaps@gmail.com>

* Address comments and update usage example

* Address comments and update usage example

* Update src/content/reference/react/useTransition.md

Co-authored-by: Luna <lunaleaps@gmail.com>

---------

Co-authored-by: Jan Kassens <jan@kassens.net>
Co-authored-by: Luna <lunaleaps@gmail.com>
---
 src/components/MDX/Sandpack/Preview.tsx      |   6 +
 src/content/reference/react/useTransition.md | 111 +++++++++++++++++--
 src/sidebarReference.json                    |   3 +-
 3 files changed, 111 insertions(+), 9 deletions(-)

diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx
index 8d83d9867..059645550 100644
--- a/src/components/MDX/Sandpack/Preview.tsx
+++ b/src/components/MDX/Sandpack/Preview.tsx
@@ -52,6 +52,12 @@ export function Preview({
     rawError = null;
   }
 
+  // When throwing a new Error in Sandpack - we want to disable the dev error dialog
+  // to show the Error Boundary fallback
+  if (rawError && rawError.message.includes(`throw Error('Example error')`)) {
+    rawError = null;
+  }
+
   // Memoized because it's fed to debouncing.
   const firstLintError = useMemo(() => {
     if (lintErrors.length === 0) {
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index a6fcde710..1d808aac2 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -1,5 +1,6 @@
 ---
 title: useTransition
+canary: true
 ---
 
 <Intro>
@@ -151,7 +152,7 @@ export default function TabContainer() {
 
   function selectTab(nextTab) {
     startTransition(() => {
-      setTab(nextTab);      
+      setTab(nextTab);
     });
   }
 
@@ -823,7 +824,7 @@ function use(promise) {
       reason => {
         promise.status = 'rejected';
         promise.reason = reason;
-      },      
+      },
     );
     throw promise;
   }
@@ -1017,7 +1018,7 @@ function use(promise) {
       reason => {
         promise.status = 'rejected';
         promise.reason = reason;
-      },      
+      },
     );
     throw promise;
   }
@@ -1288,7 +1289,7 @@ function use(promise) {
       reason => {
         promise.status = 'rejected';
         promise.reason = reason;
-      },      
+      },
     );
     throw promise;
   }
@@ -1332,7 +1333,7 @@ function use(promise) {
       reason => {
         promise.status = 'rejected';
         promise.reason = reason;
-      },      
+      },
     );
     throw promise;
   }
@@ -1379,9 +1380,9 @@ async function getBio() {
     setTimeout(resolve, 500);
   });
 
-  return `The Beatles were an English rock band, 
-    formed in Liverpool in 1960, that comprised 
-    John Lennon, Paul McCartney, George Harrison 
+  return `The Beatles were an English rock band,
+    formed in Liverpool in 1960, that comprised
+    John Lennon, Paul McCartney, George Harrison
     and Ringo Starr.`;
 }
 
@@ -1501,6 +1502,100 @@ main {
 
 ---
 
+### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
+
+<Canary>
+
+Error Boundary for useTransition is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+</Canary>
+
+If a function passed to `startTransition` throws an error, you can display an error to your user with an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an error boundary, wrap the component where you are calling the `useTransition` in an error boundary. Once the function passed to `startTransition` errors, the fallback for the error boundary will be displayed.
+
+<Sandpack>
+
+```js AddCommentContainer.js active
+import { useTransition } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+export function AddCommentContainer() {
+  return (
+    <ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
+        <AddCommentButton />
+    </ErrorBoundary>
+  );
+}
+
+function addComment(comment) {
+  // For demonstration purposes to show Error Boundary
+  if(comment == null){
+    throw Error('Example error')
+  }
+}
+
+function AddCommentButton() {
+  const [pending, startTransition] = useTransition();
+
+  return (
+    <button
+      disabled={pending}
+      onClick={() => {
+        startTransition(() => {
+          // Intentionally not passing a comment
+          // so error gets thrown
+          addComment();
+        });
+      }}>
+        Add comment
+      </button>
+  );
+}
+```
+
+```js App.js hidden
+import { AddCommentContainer } from "./AddCommentContainer.js";
+
+export default function App() {
+  return <AddCommentContainer />;
+}
+```
+
+```js index.js hidden
+// TODO: update to import from stable
+// react instead of canary once the `use`
+// Hook is in a stable release of React
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+// TODO: update this example to use
+// the Codesandbox Server Component
+// demo environment once it is created
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "^5.0.0",
+    "react-error-boundary": "4.0.3"
+  },
+  "main": "/index.js"
+}
+```
+</Sandpack>
+
+---
+
 ## Troubleshooting {/*troubleshooting*/}
 
 ### Updating an input in a transition doesn't work {/*updating-an-input-in-a-transition-doesnt-work*/}
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 3c8daf71a..acc93328a 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -73,7 +73,8 @@
         },
         {
           "title": "useTransition",
-          "path": "/reference/react/useTransition"
+          "path": "/reference/react/useTransition",
+          "canary": true
         }
       ]
     },

From 2779615e647f3a99d95b6daf072426e222d5fdd3 Mon Sep 17 00:00:00 2001
From: Sophie Alpert <git@sophiebits.com>
Date: Tue, 24 Oct 2023 15:00:26 -0700
Subject: [PATCH 13/52] Warn about low entropy in taintUniqueValue.md (#6379)

* Warn about low entropy in taintUniqueValue.md

* Update src/content/reference/react/experimental_taintUniqueValue.md

Co-authored-by: Jan Kassens <jan@kassens.net>

---------

Co-authored-by: Jan Kassens <jan@kassens.net>
---
 src/content/reference/react/experimental_taintUniqueValue.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md
index a67eebf77..e26c29bfe 100644
--- a/src/content/reference/react/experimental_taintUniqueValue.md
+++ b/src/content/reference/react/experimental_taintUniqueValue.md
@@ -67,7 +67,8 @@ experimental_taintUniqueValue(
 
 #### Caveats {/*caveats*/}
 
-- Deriving new values from tainted values can compromise tainting protection. New values created by uppercasing tainted values, concatenating tainted string values into a larger string, converting tainted values to base64, substringing tainted values, and other similar transformations are not tainted unless you explicity call `taintUniqueValue` on these newly created values.
+* Deriving new values from tainted values can compromise tainting protection. New values created by uppercasing tainted values, concatenating tainted string values into a larger string, converting tainted values to base64, substringing tainted values, and other similar transformations are not tainted unless you explicity call `taintUniqueValue` on these newly created values.
+* Do not use `taintUniqueValue` to protect low-entropy values such as PIN codes or phone numbers. If any value in a request is controlled by an attacker, they could infer which value is tainted by enumerating all possible values of the secret.
 
 ---
 

From 5e40d13bcde36ab730b48e0a8cca29b18ec95242 Mon Sep 17 00:00:00 2001
From: David McCabe <davemccabe@gmail.com>
Date: Wed, 25 Oct 2023 10:40:39 -0700
Subject: [PATCH 14/52] Add useFormState reference (#6338)

Add useFormState reference
---
 .../reference/react-dom/hooks/useFormState.md | 291 ++++++++++++++++++
 src/sidebarReference.json                     |   5 +
 2 files changed, 296 insertions(+)
 create mode 100644 src/content/reference/react-dom/hooks/useFormState.md

diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
new file mode 100644
index 000000000..ca7af2536
--- /dev/null
+++ b/src/content/reference/react-dom/hooks/useFormState.md
@@ -0,0 +1,291 @@
+---
+title: useFormState
+canary: true
+---
+
+<Canary>
+
+The `useFormState` Hook is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). In addition, you need to use a framework that supports React Server Components to get the full benefit of `useFormState`.
+
+</Canary>
+
+<Intro>
+
+`useFormState` is a Hook that allows you to read the return value of the form action after a form is submitted.
+
+```js
+const [state, formAction] = useFormState(action, initalState);
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useFormState()` {/*useformstate*/}
+
+In the context of React Server Components, an *action* is a function that may be [executed when a form is submitted](/reference/react-dom/components/form). You can execute actions on the server or on the client.
+
+{/* TODO T164397693: link to actions documentation once it exists */}
+
+Call `useFormState` at the top level of your component to see the return value of an action after submitting a form. You pass `useFormState` an existing action as well as an initial state, and it returns a new action that you use when submitting your form, along with the latest form state.
+
+```js
+function AddToCart({itemID}) {
+  const [message, formAction] = useFormState(addToCartAction, null);
+  return (
+    <form action={formAction}>
+      <input type="hidden" name="itemID" value={itemID} />
+      <button type="submit" label="Add to cart" />
+      <p>
+        {message}
+      </p>
+    </form>
+  )
+}
+```
+
+The form state is the value returned by the action when the form was last submitted. If the form has not yet been submitted, it is the initial state that you pass.
+
+If used with a server action, `useFormState` allows the server's response from submitting the form to be shown even before hydration has completed.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `action`: The action to be performed when the form is submitted. When the action is called, it will receive the previous state of the form (initially the `initialState` that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that an action normally receives.
+* `initialState`: The value you want the state to be initially. It can be any serializable value. This argument is ignored after the form is first submitted.
+
+{/* TODO T164397693: link to serializable values docs once it exists */}
+
+
+#### Returns {/*returns*/}
+
+`useFormState` returns an array with exactly two values:
+
+1. The current state. During the first render, it will match the `initialState` you have passed. After the form is submitted, it will match the value returned by the action.
+2. A new action that you can pass as the `action` prop to your `form` component.
+
+#### Caveats {/*caveats*/}
+
+* When used with a framework that supports React Server Components, `useFormState` lets you make forms interactive before JavaScript has executed on the client. When used without Server Components, there is no advantage to using it over component local state.
+* The action passed to `useFormState` receives an extra argument, the previous or initial state state, as its first argument. This makes its signature different than if it were used directly without `useFormState`.
+
+---
+
+## Usage {/*usage*/}
+
+### Using information returned by a form action {/*using-information-returned-by-a-form-action*/}
+
+Call `useFormState` at the top level of your component to access the return value of an action from the last time a form was submitted.
+
+```js [[1, 5, "state"], [2, 5, "formAction"], [3, 5, "action"], [4, 5, "null"], [2, 8, "formAction"]]
+import { useFormState } from 'react-dom';
+import { action } from './actions.js';
+
+function MyComponent() {
+  const [state, formAction] = useFormState(action, null);
+  // ...
+  return (
+    <form action={formAction}>
+      {/* ... */}
+    </form>
+  );
+}
+```
+
+`useFormState` returns an array with exactly two items:
+
+1. The <CodeStep step={1}>current state</CodeStep> of the form, which is initially set to the <CodeStep step={4}>initial state</CodeStep> you provided, and after the form is submitted is set to the return value of the <CodeStep step={3}>action</CodeStep> you provided.
+2. A <CodeStep step={2}>new action</CodeStep> that you pass to `<form>` as its `action` prop.
+
+When the form is submitted, the <CodeStep step={3}>action</CodeStep> that you provided will be called. Its return value will become the new <CodeStep step={1}>current state</CodeStep> of the form.
+
+The <CodeStep step={3}>action</CodeStep> that you provide will also receive a new first argument, namely the <CodeStep step={1}>current state</CodeStep> of the form. The first time the form is submitted, this will be the <CodeStep step={4}>initial state</CodeStep> you provided, while with subsequent submissions, it will be the return value from the last time the action was called. The rest of the arguments are the same as if `useFormState` had not been used
+
+```js [[3, 1, "action"], [1, 1, "currentState"]]
+function action(currentState, formData) {
+  // ...
+  return 'next state';
+}
+```
+
+<Recipes titleText="Display information after submitting a form" titleId="display-information-after-submitting-a-form">
+
+#### Display form errors {/*display-form-errors*/}
+
+To display messages such as an error message or toast that's returned by a server action, wrap the action in a call to `useFormState`.
+
+<Sandpack>
+
+```js App.js
+import { useState } from "react";
+import { useFormState } from "react-dom";
+import { addToCart } from "./actions.js";
+
+function AddToCartForm({itemID, itemTitle}) {
+  const [message, formAction] = useFormState(addToCart, null);
+  return (
+    <form action={formAction}>
+      <h2>{itemTitle}</h2>
+      <input type="hidden" name="itemID" value={itemID} />
+      <button type="submit">Add to Cart</button>
+      {message}
+    </form>
+  );
+}
+
+export default function App() {
+  return (
+    <>
+      <AddToCartForm itemID="1" itemTitle="Javascript: The Definitive Guide" />
+      <AddToCartForm itemID="2" itemTitle="Javascript: The Good Parts" />
+    </>
+  )
+}
+```
+
+```js actions.js
+"use server";
+
+export async function addToCart(prevState, queryData) {
+  const itemID = queryData.get('itemID');
+  if (itemID === "1") {
+    return "Added to cart";
+  } else {
+    return "Couldn't add to cart: the item is sold out.";
+  }
+}
+```
+
+```css styles.css hidden
+form {
+  border: solid 1px black;
+  margin-bottom: 24px;
+  padding: 12px
+}
+
+form button {
+  margin-right: 12px;
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "^5.0.0"
+  },
+  "main": "/index.js",
+  "devDependencies": {}
+}
+```
+</Sandpack>
+
+<Solution />
+
+#### Display structured information after submitting a form {/*display-structured-information-after-submitting-a-form*/}
+
+The return value from a server action can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information.
+
+<Sandpack>
+
+```js App.js
+import { useState } from "react";
+import { useFormState } from "react-dom";
+import { addToCart } from "./actions.js";
+
+function AddToCartForm({itemID, itemTitle}) {
+  const [formState, formAction] = useFormState(addToCart, {});
+  return (
+    <form action={formAction}>
+      <h2>{itemTitle}</h2>
+      <input type="hidden" name="itemID" value={itemID} />
+      <button type="submit">Add to Cart</button>
+      {formState?.success &&
+        <div className="toast">
+          Added to cart! Your cart now has {formState.cartSize} items.
+        </div>
+      }
+      {formState?.success === false &&
+        <div className="error">
+          Failed to add to cart: {formState.message}
+        </div>
+      }
+    </form>
+  );
+}
+
+export default function App() {
+  return (
+    <>
+      <AddToCartForm itemID="1" itemTitle="Javascript: The Definitive Guide" />
+      <AddToCartForm itemID="2" itemTitle="Javascript: The Good Parts" />
+    </>
+  )
+}
+```
+
+```js actions.js
+"use server";
+
+export async function addToCart(prevState, queryData) {
+  const itemID = queryData.get('itemID');
+  if (itemID === "1") {
+    return {
+      success: true,
+      cartSize: 12,
+    };
+  } else {
+    return {
+      success: false,
+      message: "The item is sold out.",
+    };
+  }
+}
+```
+
+```css styles.css hidden
+form {
+  border: solid 1px black;
+  margin-bottom: 24px;
+  padding: 12px
+}
+
+form button {
+  margin-right: 12px;
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "^5.0.0"
+  },
+  "main": "/index.js",
+  "devDependencies": {}
+}
+```
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My action can no longer read the submitted form data {/*my-action-can-no-longer-read-the-submitted-form-data*/}
+
+When you wrap an action with `useFormState`, it gets an extra argument *as its first argument*. The submitted form data is therefore its *second* argument instead of its first as it would usually be. The new first argument that gets added is the current state of the form.
+
+```js
+function action(currentState, formData) {
+  // ...
+}
+```
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index acc93328a..33afbf89e 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -166,6 +166,11 @@
       "title": "Hooks",
       "path": "/reference/react-dom/hooks",
       "routes": [
+        {
+          "title": "useFormState",
+          "path": "/reference/react-dom/hooks/useFormState",
+          "canary": true
+        },
         {
           "title": "useFormStatus",
           "path": "/reference/react-dom/hooks/useFormStatus",

From 6ef844b906a42cb9d70a5de15941dfce123e8f7d Mon Sep 17 00:00:00 2001
From: David McCabe <davemccabe@gmail.com>
Date: Wed, 25 Oct 2023 13:18:47 -0700
Subject: [PATCH 15/52] useFormState reference fixes (#6383)

* Add useFormState reference

* Matt's suggestions for useFormState reference

* Incorporated PR feedback for useFormState
---
 .../reference/react-dom/hooks/index.md        |  5 +-
 .../reference/react-dom/hooks/useFormState.md | 62 +++++++++----------
 2 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/src/content/reference/react-dom/hooks/index.md b/src/content/reference/react-dom/hooks/index.md
index 6490dc111..937de808c 100644
--- a/src/content/reference/react-dom/hooks/index.md
+++ b/src/content/reference/react-dom/hooks/index.md
@@ -1,5 +1,5 @@
 ---
-title: "React DOM Hooks"
+title: "Built-in React DOM Hooks"
 ---
 
 <Intro>
@@ -21,7 +21,7 @@ Form Hooks are currently only available in React's canary and experimental chann
 *Forms* let you create interactive controls for submitting information.  To manage forms in your components, use one of these Hooks:
 
 * [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) allows you to make updates to the UI based on the status of the a form.
-* `useFormState` allows you to manage state inside a form.
+* [`useFormState`](/reference/react-dom/hooks/useFormState) allows you to manage state inside a form.
 
 ```js
 function Form({ action }) {
@@ -46,3 +46,4 @@ function Button() {
   );
 }
 ```
+
diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
index ca7af2536..53c73ae38 100644
--- a/src/content/reference/react-dom/hooks/useFormState.md
+++ b/src/content/reference/react-dom/hooks/useFormState.md
@@ -5,16 +5,16 @@ canary: true
 
 <Canary>
 
-The `useFormState` Hook is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). In addition, you need to use a framework that supports React Server Components to get the full benefit of `useFormState`.
+The `useFormState` Hook is currently only available in React's canary and experimental channels. Learn more about [release channels here](/community/versioning-policy#all-release-channels). In addition, you need to use a framework that supports [React Server Components](/reference/react/use-client) to get the full benefit of `useFormState`.
 
 </Canary>
 
 <Intro>
 
-`useFormState` is a Hook that allows you to read the return value of the form action after a form is submitted.
+`useFormState` is a Hook that allows you to update state based on the result of a form action.
 
 ```js
-const [state, formAction] = useFormState(action, initalState);
+const [state, formAction] = useFormState(fn, initialState);
 ```
 
 </Intro>
@@ -25,24 +25,25 @@ const [state, formAction] = useFormState(action, initalState);
 
 ## Reference {/*reference*/}
 
-### `useFormState()` {/*useformstate*/}
-
-In the context of React Server Components, an *action* is a function that may be [executed when a form is submitted](/reference/react-dom/components/form). You can execute actions on the server or on the client.
+### `useFormState(action, initialState)` {/*useformstate*/}
 
 {/* TODO T164397693: link to actions documentation once it exists */}
 
-Call `useFormState` at the top level of your component to see the return value of an action after submitting a form. You pass `useFormState` an existing action as well as an initial state, and it returns a new action that you use when submitting your form, along with the latest form state.
+Call `useFormState` at the top level of your component to create component state that is updated [when a form action is invoked](/reference/react-dom/components/form). You pass `useFormState` an existing form action function as well as an initial state, and it returns a new action that you use in your form, along with the latest form state. The latest form state is also passed to the function that you provided.
 
 ```js
-function AddToCart({itemID}) {
-  const [message, formAction] = useFormState(addToCartAction, null);
+import { useFormState } from "react-dom";
+
+async function increment(previousState, formData) {
+  return previousState + 1;
+}
+
+function StatefulForm({}) {
+  const [state, formAction] = useFormState(increment, 0);
   return (
-    <form action={formAction}>
-      <input type="hidden" name="itemID" value={itemID} />
-      <button type="submit" label="Add to cart" />
-      <p>
-        {message}
-      </p>
+    <form>
+      {state}
+      <button formAction={formAction}>Increment</button>
     </form>
   )
 }
@@ -56,23 +57,22 @@ If used with a server action, `useFormState` allows the server's response from s
 
 #### Parameters {/*parameters*/}
 
-* `action`: The action to be performed when the form is submitted. When the action is called, it will receive the previous state of the form (initially the `initialState` that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that an action normally receives.
-* `initialState`: The value you want the state to be initially. It can be any serializable value. This argument is ignored after the form is first submitted.
+* `fn`: The function to be called when the form is submitted or button pressed. When the function is called, it will receive the previous state of the form (initially the `initialState` that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that a form action normally receives.
+* `initialState`: The value you want the state to be initially. It can be any serializable value. This argument is ignored after the action is first invoked.
 
 {/* TODO T164397693: link to serializable values docs once it exists */}
 
-
 #### Returns {/*returns*/}
 
 `useFormState` returns an array with exactly two values:
 
-1. The current state. During the first render, it will match the `initialState` you have passed. After the form is submitted, it will match the value returned by the action.
-2. A new action that you can pass as the `action` prop to your `form` component.
+1. The current state. During the first render, it will match the `initialState` you have passed. After the action is invoked, it will match the value returned by the action.
+2. A new action that you can pass as the `action` prop to your `form` component or `formAction` prop to any `button` component within the form.
 
 #### Caveats {/*caveats*/}
 
-* When used with a framework that supports React Server Components, `useFormState` lets you make forms interactive before JavaScript has executed on the client. When used without Server Components, there is no advantage to using it over component local state.
-* The action passed to `useFormState` receives an extra argument, the previous or initial state state, as its first argument. This makes its signature different than if it were used directly without `useFormState`.
+* When used with a framework that supports React Server Components, `useFormState` lets you make forms interactive before JavaScript has executed on the client. When used without Server Components, it is equivalent to component local state.
+* The function passed to `useFormState` receives an extra argument, the previous or initial state, as its first argument. This makes its signature different than if it were used directly as a form action without using `useFormState`.
 
 ---
 
@@ -102,7 +102,7 @@ function MyComponent() {
 1. The <CodeStep step={1}>current state</CodeStep> of the form, which is initially set to the <CodeStep step={4}>initial state</CodeStep> you provided, and after the form is submitted is set to the return value of the <CodeStep step={3}>action</CodeStep> you provided.
 2. A <CodeStep step={2}>new action</CodeStep> that you pass to `<form>` as its `action` prop.
 
-When the form is submitted, the <CodeStep step={3}>action</CodeStep> that you provided will be called. Its return value will become the new <CodeStep step={1}>current state</CodeStep> of the form.
+When the form is submitted, the <CodeStep step={3}>action</CodeStep> function that you provided will be called. Its return value will become the new <CodeStep step={1}>current state</CodeStep> of the form.
 
 The <CodeStep step={3}>action</CodeStep> that you provide will also receive a new first argument, namely the <CodeStep step={1}>current state</CodeStep> of the form. The first time the form is submitted, this will be the <CodeStep step={4}>initial state</CodeStep> you provided, while with subsequent submissions, it will be the return value from the last time the action was called. The rest of the arguments are the same as if `useFormState` had not been used
 
@@ -141,8 +141,8 @@ function AddToCartForm({itemID, itemTitle}) {
 export default function App() {
   return (
     <>
-      <AddToCartForm itemID="1" itemTitle="Javascript: The Definitive Guide" />
-      <AddToCartForm itemID="2" itemTitle="Javascript: The Good Parts" />
+      <AddToCartForm itemID="1" itemTitle="JavaScript: The Definitive Guide" />
+      <AddToCartForm itemID="2" itemTitle="JavaScript: The Good Parts" />
     </>
   )
 }
@@ -176,8 +176,8 @@ form button {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental",
+    "react": "canary",
+    "react-dom": "canary",
     "react-scripts": "^5.0.0"
   },
   "main": "/index.js",
@@ -223,8 +223,8 @@ function AddToCartForm({itemID, itemTitle}) {
 export default function App() {
   return (
     <>
-      <AddToCartForm itemID="1" itemTitle="Javascript: The Definitive Guide" />
-      <AddToCartForm itemID="2" itemTitle="Javascript: The Good Parts" />
+      <AddToCartForm itemID="1" itemTitle="JavaScript: The Definitive Guide" />
+      <AddToCartForm itemID="2" itemTitle="JavaScript: The Good Parts" />
     </>
   )
 }
@@ -264,8 +264,8 @@ form button {
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "experimental",
-    "react-dom": "experimental",
+    "react": "canary",
+    "react-dom": "canary",
     "react-scripts": "^5.0.0"
   },
   "main": "/index.js",

From df3ec65db185ecf8787aa2626bde07f3bec47384 Mon Sep 17 00:00:00 2001
From: Eli White <github@eli-white.com>
Date: Thu, 26 Oct 2023 01:40:15 +0100
Subject: [PATCH 16/52] Fix typo in experimental_taintObjectReference (#6385)

---
 .../reference/react/experimental_taintObjectReference.md        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/experimental_taintObjectReference.md b/src/content/reference/react/experimental_taintObjectReference.md
index e3fd35a48..8b2dc2c34 100644
--- a/src/content/reference/react/experimental_taintObjectReference.md
+++ b/src/content/reference/react/experimental_taintObjectReference.md
@@ -64,7 +64,7 @@ experimental_taintObjectReference(
 
 #### Caveats {/*caveats*/}
 
-- Recreating or cloning a tainted object creates a new untained object which main contain sensetive data. For example, if you have a tainted `user` object, `const userInfo = {name: user.name, ssn: user.ssn}` or `{...user}` will create new objects which are not tainted. `taintObjectReference` only protects against simple mistakes when the object is passed through to a Client Component unchanged.
+- Recreating or cloning a tainted object creates a new untained object which main contain sensitive data. For example, if you have a tainted `user` object, `const userInfo = {name: user.name, ssn: user.ssn}` or `{...user}` will create new objects which are not tainted. `taintObjectReference` only protects against simple mistakes when the object is passed through to a Client Component unchanged.
 
 <Pitfall>
 

From 97e61d72b0319880989c90bacac1bd5b0ee7bced Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Thu, 26 Oct 2023 13:24:24 +0900
Subject: [PATCH 17/52] Fix broken links caused by #6164 (#6375)

---
 .../reference/react-dom/server/renderToPipeableStream.md        | 2 +-
 .../reference/react-dom/server/renderToReadableStream.md        | 2 +-
 src/content/reference/react/useLayoutEffect.md                  | 2 +-
 src/content/reference/react/useSyncExternalStore.md             | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md
index 26422f185..20a5960eb 100644
--- a/src/content/reference/react-dom/server/renderToPipeableStream.md
+++ b/src/content/reference/react-dom/server/renderToPipeableStream.md
@@ -431,7 +431,7 @@ function ProfilePage() {
 }
 ```
 
-If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)
+If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)
 
 1. It will emit the loading fallback for the closest `<Suspense>` boundary (`PostsGlimmer`) into the HTML.
 2. It will "give up" on trying to render the `Posts` content on the server anymore.
diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md
index f4ed54ce2..f407f2245 100644
--- a/src/content/reference/react-dom/server/renderToReadableStream.md
+++ b/src/content/reference/react-dom/server/renderToReadableStream.md
@@ -435,7 +435,7 @@ function ProfilePage() {
 }
 ```
 
-If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)
+If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)
 
 1. It will emit the loading fallback for the closest `<Suspense>` boundary (`PostsGlimmer`) into the HTML.
 2. It will "give up" on trying to render the `Posts` content on the server anymore.
diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index 5af3ec5a6..1b65ce3b5 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -732,7 +732,7 @@ However, if you're running into this problem, you have a few different options:
 
 - Replace `useLayoutEffect` with [`useEffect`.](/reference/react/useEffect) This tells React that it's okay to display the initial render result without blocking the paint (because the original HTML will become visible before your Effect runs).
 
-- Alternatively, [mark your component as client-only.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) This tells React to replace its content up to the closest [`<Suspense>`](/reference/react/Suspense) boundary with a loading fallback (for example, a spinner or a glimmer) during server rendering.
+- Alternatively, [mark your component as client-only.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) This tells React to replace its content up to the closest [`<Suspense>`](/reference/react/Suspense) boundary with a loading fallback (for example, a spinner or a glimmer) during server rendering.
 
 - Alternatively, you can render a component with `useLayoutEffect` only after hydration. Keep a boolean `isMounted` state that's initialized to `false`, and set it to `true` inside a `useEffect` call. Your rendering logic can then be like `return isMounted ? <RealContent /> : <FallbackContent />`. On the server and during the hydration, the user will see `FallbackContent` which should not call `useLayoutEffect`. Then React will replace it with `RealContent` which runs on the client only and can include `useLayoutEffect` calls.
 
diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md
index 955b751f8..cda2ec3fa 100644
--- a/src/content/reference/react/useSyncExternalStore.md
+++ b/src/content/reference/react/useSyncExternalStore.md
@@ -361,7 +361,7 @@ The `getServerSnapshot` function is similar to `getSnapshot`, but it runs only i
 - It runs on the server when generating the HTML.
 - It runs on the client during [hydration](/reference/react-dom/client/hydrateRoot), i.e. when React takes the server HTML and makes it interactive.
 
-This lets you provide the initial snapshot value which will be used before the app becomes interactive. If there is no meaningful initial value for the server rendering, omit this argument to [force rendering on the client.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)
+This lets you provide the initial snapshot value which will be used before the app becomes interactive. If there is no meaningful initial value for the server rendering, omit this argument to [force rendering on the client.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)
 
 <Note>
 

From a272f0cf23de1c8a663131a828ee9c7051705900 Mon Sep 17 00:00:00 2001
From: Strek <ssharishkumar@gmail.com>
Date: Thu, 26 Oct 2023 09:56:55 +0530
Subject: [PATCH 18/52] chore: fix typos (#6387)

---
 .../reference/react/experimental_taintObjectReference.md      | 4 ++--
 src/content/reference/react/experimental_taintUniqueValue.md  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/reference/react/experimental_taintObjectReference.md b/src/content/reference/react/experimental_taintObjectReference.md
index 8b2dc2c34..335f659c6 100644
--- a/src/content/reference/react/experimental_taintObjectReference.md
+++ b/src/content/reference/react/experimental_taintObjectReference.md
@@ -64,7 +64,7 @@ experimental_taintObjectReference(
 
 #### Caveats {/*caveats*/}
 
-- Recreating or cloning a tainted object creates a new untained object which main contain sensitive data. For example, if you have a tainted `user` object, `const userInfo = {name: user.name, ssn: user.ssn}` or `{...user}` will create new objects which are not tainted. `taintObjectReference` only protects against simple mistakes when the object is passed through to a Client Component unchanged.
+- Recreating or cloning a tainted object creates a new untained object which may contain sensitive data. For example, if you have a tainted `user` object, `const userInfo = {name: user.name, ssn: user.ssn}` or `{...user}` will create new objects which are not tainted. `taintObjectReference` only protects against simple mistakes when the object is passed through to a Client Component unchanged.
 
 <Pitfall>
 
@@ -78,7 +78,7 @@ experimental_taintObjectReference(
 
 ### Prevent user data from unintentionally reaching the client {/*prevent-user-data-from-unintentionally-reaching-the-client*/}
 
-A Client Component should never accept objects that carry sensitive data. Ideally, the data fetching functions should not expose data that the current user should not have access to. Sometimes mistakes happen during refactoring. To protect against this mistakes happening down the line we can "taint" the user object in our data API.
+A Client Component should never accept objects that carry sensitive data. Ideally, the data fetching functions should not expose data that the current user should not have access to. Sometimes mistakes happen during refactoring. To protect against these mistakes happening down the line we can "taint" the user object in our data API.
 
 ```js
 import {experimental_taintObjectReference} from 'react';
diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md
index e26c29bfe..aeee7456c 100644
--- a/src/content/reference/react/experimental_taintUniqueValue.md
+++ b/src/content/reference/react/experimental_taintUniqueValue.md
@@ -67,7 +67,7 @@ experimental_taintUniqueValue(
 
 #### Caveats {/*caveats*/}
 
-* Deriving new values from tainted values can compromise tainting protection. New values created by uppercasing tainted values, concatenating tainted string values into a larger string, converting tainted values to base64, substringing tainted values, and other similar transformations are not tainted unless you explicity call `taintUniqueValue` on these newly created values.
+* Deriving new values from tainted values can compromise tainting protection. New values created by uppercasing tainted values, concatenating tainted string values into a larger string, converting tainted values to base64, substringing tainted values, and other similar transformations are not tainted unless you explicitly call `taintUniqueValue` on these newly created values.
 * Do not use `taintUniqueValue` to protect low-entropy values such as PIN codes or phone numbers. If any value in a request is controlled by an attacker, they could infer which value is tainted by enumerating all possible values of the secret.
 
 ---

From 76c1bde5c7b4b407ba00cc9be90c3000f20f96f2 Mon Sep 17 00:00:00 2001
From: Nikhil Gupta <jerrycodes29@gmail.com>
Date: Thu, 26 Oct 2023 11:18:43 +0530
Subject: [PATCH 19/52] Using strict equality in the JS example for City Quiz
 (#6373)

Co-authored-by: Nikhil Gupta <nikhil.gupta5667@gmai.com>
---
 src/content/learn/reacting-to-input-with-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/reacting-to-input-with-state.md b/src/content/learn/reacting-to-input-with-state.md
index 522aa63a1..29f60ca6d 100644
--- a/src/content/learn/reacting-to-input-with-state.md
+++ b/src/content/learn/reacting-to-input-with-state.md
@@ -84,7 +84,7 @@ function submitForm(answer) {
   // Pretend it's hitting the network.
   return new Promise((resolve, reject) => {
     setTimeout(() => {
-      if (answer.toLowerCase() == 'istanbul') {
+      if (answer.toLowerCase() === 'istanbul') {
         resolve();
       } else {
         reject(new Error('Good guess but a wrong answer. Try again!'));

From 6a94b72b2f8f35ccb5f988c3d2ab4a7be0ee866e Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Thu, 26 Oct 2023 07:49:20 +0200
Subject: [PATCH 20/52] docs: update link to React Query (#6369)

---
 src/content/reference/react/useEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index 46f651a8e..e6e4da103 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -1047,7 +1047,7 @@ Writing `fetch` calls inside Effects is a [popular way to fetch data](https://ww
 This list of downsides is not specific to React. It applies to fetching data on mount with any library. Like with routing, data fetching is not trivial to do well, so we recommend the following approaches:
 
 - **If you use a [framework](/learn/start-a-new-react-project#production-grade-react-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
-- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://react-query.tanstack.com/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
+- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
 
 You can continue fetching data directly in Effects if neither of these approaches suit you.
 

From f6b7f9e9be3378131fbfa3aa151597bd55fa7d1b Mon Sep 17 00:00:00 2001
From: Kevin Farrugia <kevinfarrugia@users.noreply.github.com>
Date: Thu, 26 Oct 2023 17:18:29 +0200
Subject: [PATCH 21/52] Removed canary: true from useTransition.md (#6389)

---
 src/content/reference/react/useTransition.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 1d808aac2..672b448b6 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -1,6 +1,5 @@
 ---
 title: useTransition
-canary: true
 ---
 
 <Intro>

From 4b333ca000cdd14e6704fe1443f7286d654f859e Mon Sep 17 00:00:00 2001
From: Matt Carroll <7158882+mattcarrollcode@users.noreply.github.com>
Date: Thu, 26 Oct 2023 15:22:37 -0700
Subject: [PATCH 22/52] Add <form> Component reference documentation (#6312)

Co-authored-by: Luna <lunaleaps@gmail.com>
---
 .../reference/react-dom/components/form.md    | 435 ++++++++++++++++++
 .../reference/react-dom/components/input.md   |   7 +
 src/sidebarReference.json                     |   5 +
 3 files changed, 447 insertions(+)
 create mode 100644 src/content/reference/react-dom/components/form.md

diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
new file mode 100644
index 000000000..b04793032
--- /dev/null
+++ b/src/content/reference/react-dom/components/form.md
@@ -0,0 +1,435 @@
+---
+title: "<form>"
+canary: true
+---
+
+<Canary>
+
+React's extensions to `<form>` are currently only available in React's canary and experimental channels. In stable releases of React `<form>` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+</Canary>
+
+
+<Intro>
+
+The [built-in browser `<form>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) lets you create interactive controls for submitting information.
+
+```js
+<form action={search}>
+    <input name="query" />
+    <button type="submit">Search</button>
+</form>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<form>` {/*form*/}
+
+To create interactive controls for submitting information, render the [built-in browser `<form>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form).
+
+```js
+<form action={search}>
+    <input name="query" />
+    <button type="submit">Search</button>
+</form>
+```
+
+[See more examples below.](#usage)
+
+#### Props {/*props*/}
+
+`<form>` supports all [common element props.](/reference/react-dom/components/common#props)
+
+[`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action): a URL or function. When a URL is passed to `action` the form will behave like the HTML form component. When a function is passed to `action` the function will handle the form submission. The function passed to `action` may be async and will be called with a single argument containing the [form data](https://developer.mozilla.org/en-US/docs/Web/API/FormData) of the submitted form. The `action` prop can be overridden by a `formAction` attribute on a `<button>`, `<input type="submit">`, or `<input type="image">` component.
+
+#### Caveats {/*caveats*/}
+
+* When a function is passed to `action` or `formAction` the HTTP method will be POST regardless of value of the `method` prop.
+
+---
+
+## Usage {/*usage*/}
+
+### Handle form submission on the client {/*handle-form-submission-on-the-client*/}
+
+Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs.
+
+<Sandpack>
+
+```js App.js
+export default function Search() {
+  function search(formData) {
+    const query = formData.get("query");
+    alert(`You searched for '${query}'`);
+  }
+  return (
+    <form action={search}>
+      <input name="query" />
+      <button type="submit">Search</button>
+    </form>
+  );
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "18.3.0-canary-6db7f4209-20231021",
+    "react-dom": "18.3.0-canary-6db7f4209-20231021",
+    "react-scripts": "^5.0.0"
+  },
+  "main": "/index.js",
+  "devDependencies": {}
+}
+```
+
+</Sandpack>
+
+### Handle form submission with a Server Action {/*handle-form-submission-with-a-server-action*/}
+
+Render a `<form>` with an input and submit button. Pass a server action (a function marked with [`'use server'`](/reference/react/use-server)) to the `action` prop of form to run the function when the form is submitted.
+
+Passing a server action to `<form action>` allow users to submit forms without JavaScript enabled or before the code has loaded. This is beneficial to users who have a slow connection, device, or have JavaScript disabled and is similar to the way forms work when a URL is passed to the `action` prop.
+
+You can use hidden form fields to provide data to the `<form>`'s action. The server action will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+
+```jsx
+import { updateCart } from './lib.js';
+
+function AddToCart({productId}) {
+  async function addToCart(formData) {
+    'use server'
+    const productId = formData.get('productId')
+    await updateCart(productId)
+  }
+  return (
+    <form action={addToCart}>
+        <input type="hidden" name="productId" value={productId} />
+        <button type="submit">Add to Cart</button>
+    </form>
+
+  );
+}
+```
+
+In lieu of using hidden form fields to provide data to the `<form>`'s action, you can call the <CodeStep step={1}>`bind`</CodeStep> method to supply it with extra arguments. This will bind a new argument (<CodeStep step={2}>`productId`</CodeStep>) to the function in addition to the <CodeStep step={3}>`formData`</CodeStep> that is passed as a argument to the function.
+
+```jsx [[1, 8, "bind"], [2,8, "productId"], [2,4, "productId"], [3,4, "formData"]]
+import { updateCart } from './lib.js';
+
+function AddToCart({productId}) {
+  async function addToCart(productId, formData) {
+    "use server";
+    await updateCart(productId)
+  }
+  const addProductToCart = addToCart.bind(null, productId);
+  return (
+    <form action={addProductToCart}>
+      <button type="submit">Add to Cart</button>
+    </form>
+  );
+}
+```
+
+When `<form>` is rendered by a [Server Component](/reference/react/use-client), and a [Server Action](/reference/react/use-server) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
+
+### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
+To display a pending state when a form is being submitted, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned.
+
+Here, we use the `pending` property to indicate the form is submitting.
+
+<Sandpack>
+
+```js App.js
+import { useFormStatus } from "react-dom";
+import { submitForm } from "./actions.js";
+
+function Submit() {
+  const { pending } = useFormStatus();
+  return (
+    <button type="submit" disabled={pending}>
+      {pending ? "Submitting..." : "Submit"}
+    </button>
+  );
+}
+
+function Form({ action }) {
+  return (
+    <form action={action}>
+      <Submit />
+    </form>
+  );
+}
+
+export default function App() {
+  return <Form action={submitForm} />;
+}
+```
+
+```js actions.js hidden
+export async function submitForm(query) {
+    await new Promise((res) => setTimeout(res, 1000));
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "^5.0.0"
+  },
+  "main": "/index.js",
+  "devDependencies": {}
+}
+```
+</Sandpack>
+
+To learn more about the `useFormStatus` Hook see the [reference documentation](/reference/react-dom/hooks/useFormStatus).
+
+### Optimistically updating form data {/*optimistically-updating-form-data*/}
+The `useOptimistic` Hook provides a way to optimistically update the user interface before a background operation, like a network request, completes. In the context of forms, this technique helps to make apps feel more responsive. When a user submits a form, instead of waiting for the server's response to reflect the changes, the interface is immediately updated with the expected outcome.
+
+For example, when a user types a message into the form and hits the "Send" button, the `useOptimistic` Hook allows the message to immediately appear in the list with a "Sending..." label, even before the message is actually sent to a server. This "optimistic" approach gives the impression of speed and responsiveness. The form then attempts to truly send the message in the background. Once the server confirms the message has been received, the "Sending..." label is removed.
+
+<Sandpack>
+
+
+```js App.js
+import { useOptimistic, useState, useRef } from "react";
+import { deliverMessage } from "./actions.js";
+
+function Thread({ messages, sendMessage }) {
+  const formRef = useRef();
+  async function formAction(formData) {
+    addOptimisticMessage(formData.get("message"));
+    formRef.current.reset();
+    await sendMessage(formData);
+  }
+  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
+    messages,
+    (state, newMessage) => [
+      ...state,
+      {
+        text: newMessage,
+        sending: true
+      }
+    ]
+  );
+
+  return (
+    <>
+      {optimisticMessages.map((message, index) => (
+        <div key={index}>
+          {message.text}
+          {!!message.sending && <small> (Sending...)</small>}
+        </div>
+      ))}
+      <form action={formAction} ref={formRef}>
+        <input type="text" name="message" placeholder="Hello!" />
+        <button type="submit">Send</button>
+      </form>
+    </>
+  );
+}
+
+export default function App() {
+  const [messages, setMessages] = useState([
+    { text: "Hello there!", sending: false, key: 1 }
+  ]);
+  async function sendMessage(formData) {
+    const sentMessage = await deliverMessage(formData.get("message"));
+    setMessages([...messages, { text: sentMessage }]);
+  }
+  return <Thread messages={messages} sendMessage={sendMessage} />;
+}
+```
+
+```js actions.js
+export async function deliverMessage(message) {
+  await new Promise((res) => setTimeout(res, 1000));
+  return message;
+}
+```
+
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "18.3.0-canary-6db7f4209-20231021",
+    "react-dom": "18.3.0-canary-6db7f4209-20231021",
+    "react-scripts": "^5.0.0"
+  },
+  "main": "/index.js",
+  "devDependencies": {}
+}
+```
+
+</Sandpack>
+
+[//]: # 'Uncomment the next line, and delete this line after the `useOptimisitc` reference documentatino page is published'
+[//]: # 'To learn more about the `useOptimistic` Hook see the [reference documentation](/reference/react/hooks/useOptimistic).'
+
+### Handling form submission errors {/*handling-form-submission-errors*/}
+
+In some cases the function called by a `<form>`'s `action` prop throw an error. You can handle these errors by wrapping `<form>` in an Error Boundary. If the function called by a `<form>`'s `action` prop throws an error, the fallback for the error boundary will be displayed.
+
+<Sandpack>
+
+```js App.js
+import { ErrorBoundary } from "react-error-boundary";
+
+export default function Search() {
+  function search() {
+    throw new Error("search error");
+  }
+  return (
+    <ErrorBoundary
+      fallback={<p>There was an error while submitting the form</p>}
+    >
+      <form action={search}>
+        <input name="query" />
+        <button type="submit">Search</button>
+      </form>
+    </ErrorBoundary>
+  );
+}
+
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "18.3.0-canary-6db7f4209-20231021",
+    "react-dom": "18.3.0-canary-6db7f4209-20231021",
+    "react-scripts": "^5.0.0",
+    "react-error-boundary": "4.0.3"
+  },
+  "main": "/index.js",
+  "devDependencies": {}
+}
+```
+
+</Sandpack>
+
+### Display a form submission error without JavaScript {/*display-a-form-submission-error-without-javascript*/}
+
+Displaying a form submission error message before the JavaScript bundle loads for progressive enhancement requires that:
+
+1. `<form>` be rendered by a [Server Component](/reference/react/use-client)
+1. the function passed to the `<form>`'s `action` prop be a [Server Action](/reference/react/use-server)
+1. the `useFormState` Hook be used to display the error message
+
+`useFormState` takes two parameters: a [Server Action](/reference/react/use-server) and an inital state. `useFormState` returns two values, a state variable and an action. The action returned by `useFormState` should be passed to the `action` prop of the form. The state varible returned by `useFormState` can be used to displayed an error message. The value returned by the [Server Action](/reference/react/use-server) passed to `useFormState` will be used to update the state variable.
+
+<Sandpack>
+
+```js App.js
+import { useFormState } from "react-dom";
+import { signUpNewUser } from "./api";
+
+export default function Page() {
+  async function signup(prevState, formData) {
+    "use server";
+    const email = formData.get("email");
+    try {
+      await signUpNewUser(email);
+      alert(`Added "${email}"`);
+    } catch (err) {
+      return err.toString();
+    }
+  }
+  const [message, formAction] = useFormState(signup, null);
+  return (
+    <>
+      <h1>Signup for my newsletter</h1>
+      <p>Signup with the same email twice to see an error</p>
+      <form action={formAction} id="signup-form">
+        <label htmlFor="email">Email: </label>
+        <input name="email" id="email" placeholder="react@example.com" />
+        <button>Sign up</button>
+        {!!message && <p>{message}</p>}
+      </form>
+    </>
+  );
+}
+```
+
+```js api.js hidden
+let emails = [];
+
+export async function signUpNewUser(newEmail) {
+  if (emails.includes(newEmail)) {
+    throw new Error("This email address has already been added");
+  }
+  emails.push(newEmail);
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "18.3.0-canary-6db7f4209-20231021",
+    "react-dom": "18.3.0-canary-6db7f4209-20231021",
+    "react-scripts": "^5.0.0"
+  },
+  "main": "/index.js",
+  "devDependencies": {}
+}
+```
+
+</Sandpack>
+
+Learn more about updating state from a form action with the [`useFormState`](/reference/react-dom/hooks/useFormState) docs
+
+### Handling multiple submission types {/*handling-multiple-submission-types*/}
+
+Forms can be designed to handle multiple submission actions based on the button pressed by the user. Each button inside a form can be associated with a distinct action or behavior by setting the `formAction` prop.
+
+When a user taps a specific button, the form is submitted, and a corresponding action, defined by that button's attributes and action, is executed. For instance, a form might submit an article for review by default but have a seperate button with `formAction` set to save the article as a draft.
+
+<Sandpack>
+
+```js App.js
+export default function Search() {
+  function publish(formData) {
+    const content = formData.get("content");
+    const button = formData.get("button");
+    alert(`'${content}' was published with the '${button}' button`);
+  }
+
+  function save(formData) {
+    const content = formData.get("content");
+    alert(`Your draft of '${content}' has been saved!`);
+  }
+
+  return (
+    <form action={publish}>
+      <textarea name="content" rows={4} cols={40} />
+      <br />
+      <button type="submit" name="button" value="submit">Publish</button>
+      <button formAction={save}>Save draft</button>
+    </form>
+  );
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "18.3.0-canary-6db7f4209-20231021",
+    "react-dom": "18.3.0-canary-6db7f4209-20231021",
+    "react-scripts": "^5.0.0"
+  },
+  "main": "/index.js",
+  "devDependencies": {}
+}
+```
+
+</Sandpack>
diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md
index 06010d301..7328fddc9 100644
--- a/src/content/reference/react-dom/components/input.md
+++ b/src/content/reference/react-dom/components/input.md
@@ -32,6 +32,13 @@ To display an input, render the [built-in browser `<input>`](https://developer.m
 
 `<input>` supports all [common element props.](/reference/react-dom/components/common#props)
 
+<Canary>
+
+React's extensions to the `formAction` prop are currently only available in React's canary and experimental channels. In stable releases of React `formAction` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+</Canary>
+
+[`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string or function. Overrides the parent `<form action>` for `type="submit"` and `type="image"`. When a URL is passed to `action` the form will behave like a standard HTML form. When a function is passed to `formAction` the function will handle the form submission. See [`<form action>`](/reference/react-dom/components/form#props).
+
 You can [make an input controlled](#controlling-an-input-with-a-state-variable) by passing one of these props:
 
 * [`checked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#checked): A boolean. For a checkbox input or a radio button, controls whether it is selected.
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 33afbf89e..5eb32eb2c 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -186,6 +186,11 @@
           "title": "Common (e.g. <div>)",
           "path": "/reference/react-dom/components/common"
         },
+        {
+          "title": "<form>",
+          "path": "/reference/react-dom/components/form",
+          "canary": true
+        },
         {
           "title": "<input>",
           "path": "/reference/react-dom/components/input"

From 5d2113b3b56c2a651cd7ef130344f17e144f109a Mon Sep 17 00:00:00 2001
From: Strek <ssharishkumar@gmail.com>
Date: Fri, 27 Oct 2023 10:47:28 +0530
Subject: [PATCH 23/52] typos (#6390)

---
 src/content/reference/react-dom/components/form.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index b04793032..7c6023220 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -326,7 +326,7 @@ Displaying a form submission error message before the JavaScript bundle loads fo
 1. the function passed to the `<form>`'s `action` prop be a [Server Action](/reference/react/use-server)
 1. the `useFormState` Hook be used to display the error message
 
-`useFormState` takes two parameters: a [Server Action](/reference/react/use-server) and an inital state. `useFormState` returns two values, a state variable and an action. The action returned by `useFormState` should be passed to the `action` prop of the form. The state varible returned by `useFormState` can be used to displayed an error message. The value returned by the [Server Action](/reference/react/use-server) passed to `useFormState` will be used to update the state variable.
+`useFormState` takes two parameters: a [Server Action](/reference/react/use-server) and an initial state. `useFormState` returns two values, a state variable and an action. The action returned by `useFormState` should be passed to the `action` prop of the form. The state variable returned by `useFormState` can be used to displayed an error message. The value returned by the [Server Action](/reference/react/use-server) passed to `useFormState` will be used to update the state variable.
 
 <Sandpack>
 
@@ -392,7 +392,7 @@ Learn more about updating state from a form action with the [`useFormState`](/re
 
 Forms can be designed to handle multiple submission actions based on the button pressed by the user. Each button inside a form can be associated with a distinct action or behavior by setting the `formAction` prop.
 
-When a user taps a specific button, the form is submitted, and a corresponding action, defined by that button's attributes and action, is executed. For instance, a form might submit an article for review by default but have a seperate button with `formAction` set to save the article as a draft.
+When a user taps a specific button, the form is submitted, and a corresponding action, defined by that button's attributes and action, is executed. For instance, a form might submit an article for review by default but have a separate button with `formAction` set to save the article as a draft.
 
 <Sandpack>
 

From 46b45fb873a9f410be8e56107756eb08be6081c9 Mon Sep 17 00:00:00 2001
From: Kathryn Middleton <kmiddleton14@gmail.com>
Date: Fri, 27 Oct 2023 11:15:07 -0700
Subject: [PATCH 24/52] Add `useOptimistic Hook` API reference documentation
 (#6377)

* Add useOptimistic API reference documentation

* Fix title

* Add working exmaple from form and updadd parameters

* Add updates to useOptimistic

* Add updates to useOptimistic

* Add updates to useOptimistic

---------

Co-authored-by: Matt Carroll <mattca@meta.com>
---
 src/content/reference/react/useOptimistic.md | 145 +++++++++++++++++++
 src/sidebarReference.json                    |   5 +
 2 files changed, 150 insertions(+)
 create mode 100644 src/content/reference/react/useOptimistic.md

diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md
new file mode 100644
index 000000000..d0511b1a9
--- /dev/null
+++ b/src/content/reference/react/useOptimistic.md
@@ -0,0 +1,145 @@
+---
+title: useOptimistic
+canary: true
+---
+
+<Canary>
+
+The `useOptimistic` Hook is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+</Canary>
+
+<Intro>
+
+`useOptimistic` is a React Hook that lets you optimistically update the UI.
+
+```js
+  const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `useOptimistic(state, updateFn)` {/*use*/}
+
+`useOptimistic` is a React hook that lets you show a different state while an async action is underway. It accepts some state as an argument and returns a copy of that state that can be different during the duration of an async action such as a network request. You provide a function that takes the current state and the input to the action, and returns the optimistic state to be used while the action is pending.
+
+This state is called the "optimistic" state because it is usually used to immediately present the user with the result of performing an action, even though the action actually takes time to complete.
+
+```js
+import { useOptimistic } from 'react';
+
+function AppContainer() {
+  const [optimisticState, addOptimistic] = useOptimistic(
+    state,
+    // updateFn
+    (currentState, optimisticValue) => {
+      // merge and return new state
+      // with optimistic value
+    }
+  );
+}
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `state`: the value to be returned initially and whenever no action is pending.
+* `updateFn(currentState, optimisticValue)`: a function that takes the current state and the optimistic value passed to `addOptimistic` and returns the resulting optimistic state. It must be a pure function. `updateFn` takes in two parameters. The `currentState` and the `optimisticValue`. The return value will be the merged value of the `currentState` and `optimisticValue`.
+
+
+#### Returns {/*returns*/}
+
+* `optimisticState`: The resulting optimistic state. It is equal to `state` unless an action is pending, in which case it is equal to the value returned by `updateFn`.
+* `addOptimistic`: `addOptimistic` is the dispatching function to call when you have an optimistic update. It takes one argument, `optimisticValue`, of any type and will call the `updateFn` with `state` and `optimisticValue`.
+
+---
+
+## Usage {/*usage*/}
+
+### Optimistically updating forms {/*optimistically-updating-with-forms*/}
+
+The `useOptimistic` Hook provides a way to optimistically update the user interface before a background operation, like a network request, completes. In the context of forms, this technique helps to make apps feel more responsive. When a user submits a form, instead of waiting for the server's response to reflect the changes, the interface is immediately updated with the expected outcome.
+
+For example, when a user types a message into the form and hits the "Send" button, the `useOptimistic` Hook allows the message to immediately appear in the list with a "Sending..." label, even before the message is actually sent to a server. This "optimistic" approach gives the impression of speed and responsiveness. The form then attempts to truly send the message in the background. Once the server confirms the message has been received, the "Sending..." label is removed.
+
+<Sandpack>
+
+
+```js App.js
+import { useOptimistic, useState, useRef } from "react";
+import { deliverMessage } from "./actions.js";
+
+function Thread({ messages, sendMessage }) {
+  const formRef = useRef();
+  async function formAction(formData) {
+    addOptimisticMessage(formData.get("message"));
+    formRef.current.reset();
+    await sendMessage(formData);
+  }
+  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
+    messages,
+    (state, newMessage) => [
+      ...state,
+      {
+        text: newMessage,
+        sending: true
+      }
+    ]
+  );
+
+  return (
+    <>
+      {optimisticMessages.map((message, index) => (
+        <div key={index}>
+          {message.text}
+          {!!message.sending && <small> (Sending...)</small>}
+        </div>
+      ))}
+      <form action={formAction} ref={formRef}>
+        <input type="text" name="message" placeholder="Hello!" />
+        <button type="submit">Send</button>
+      </form>
+    </>
+  );
+}
+
+export default function App() {
+  const [messages, setMessages] = useState([
+    { text: "Hello there!", sending: false, key: 1 }
+  ]);
+  async function sendMessage(formData) {
+    const sentMessage = await deliverMessage(formData.get("message"));
+    setMessages([...messages, { text: sentMessage }]);
+  }
+  return <Thread messages={messages} sendMessage={sendMessage} />;
+}
+```
+
+```js actions.js
+export async function deliverMessage(message) {
+  await new Promise((res) => setTimeout(res, 1000));
+  return message;
+}
+```
+
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "18.3.0-canary-6db7f4209-20231021",
+    "react-dom": "18.3.0-canary-6db7f4209-20231021",
+    "react-scripts": "^5.0.0"
+  },
+  "main": "/index.js",
+  "devDependencies": {}
+}
+```
+
+</Sandpack>
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 5eb32eb2c..79b1fb9f7 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -55,6 +55,11 @@
           "title": "useMemo",
           "path": "/reference/react/useMemo"
         },
+        {
+          "title": "useOptimistic",
+          "path": "/reference/react/useOptimistic",
+          "canary": true
+        },
         {
           "title": "useReducer",
           "path": "/reference/react/useReducer"

From b8acf016dcaf41bdec83775ca3d2f39346d00fd9 Mon Sep 17 00:00:00 2001
From: Sophie Alpert <git@sophiebits.com>
Date: Fri, 27 Oct 2023 16:30:20 -0700
Subject: [PATCH 25/52] Remove meta description from most pages (#6392)

Google uses this on many of our API doc pages and it's not a good snippet. Only put this on the homepage but leave the og:description and twitter:description.
---
 src/components/Seo.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
index 79f19f87c..34339a66d 100644
--- a/src/components/Seo.tsx
+++ b/src/components/Seo.tsx
@@ -36,7 +36,6 @@ function getDomain(languageCode: string): string {
 export const Seo = withRouter(
   ({
     title,
-    description = 'The library for web and native user interfaces',
     image = '/images/og-default.png',
     router,
     children,
@@ -50,11 +49,15 @@ export const Seo = withRouter(
     const pageTitle = isHomePage ? title : title + ' – React';
     // Twitter's meta parser is not very good.
     const twitterTitle = pageTitle.replace(/[<>]/g, '');
+    let description = isHomePage
+      ? 'React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.'
+      : 'The library for web and native user interfaces';
     return (
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         {title != null && <title key="title">{pageTitle}</title>}
-        {description != null && (
+        {isHomePage && (
+          // Let Google figure out a good description for each page.
           <meta name="description" key="description" content={description} />
         )}
         <link rel="canonical" href={canonicalUrl} />

From 4bdb87b172a7723d56d03a5630c8a9870f6f03ec Mon Sep 17 00:00:00 2001
From: Sophie Alpert <git@sophiebits.com>
Date: Fri, 27 Oct 2023 19:48:24 -0700
Subject: [PATCH 26/52] Try to fix Google titles for directive pages (#6393)

https://twitter.com/sophiebits/status/1718042539650150609
---
 src/components/Layout/Page.tsx            | 8 +++++++-
 src/components/Seo.tsx                    | 6 +++++-
 src/content/reference/react/use-client.md | 1 +
 src/content/reference/react/use-server.md | 1 +
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index fb771f901..04876bab3 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -28,7 +28,12 @@ interface PageProps {
   children: React.ReactNode;
   toc: Array<TocItem>;
   routeTree: RouteItem;
-  meta: {title?: string; canary?: boolean; description?: string};
+  meta: {
+    title?: string;
+    titleForTitleTag?: string;
+    canary?: boolean;
+    description?: string;
+  };
   section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
 }
 
@@ -107,6 +112,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
     <>
       <Seo
         title={title}
+        titleForTitleTag={meta.titleForTitleTag}
         isHomePage={isHomePage}
         image={`/images/og-` + section + '.png'}
         searchOrder={searchOrder}
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
index 34339a66d..5af169e13 100644
--- a/src/components/Seo.tsx
+++ b/src/components/Seo.tsx
@@ -9,6 +9,7 @@ import {siteConfig} from '../siteConfig';
 
 export interface SeoProps {
   title: string;
+  titleForTitleTag: undefined | string;
   description?: string;
   image?: string;
   // jsonld?: JsonLDType | Array<JsonLDType>;
@@ -36,6 +37,7 @@ function getDomain(languageCode: string): string {
 export const Seo = withRouter(
   ({
     title,
+    titleForTitleTag,
     image = '/images/og-default.png',
     router,
     children,
@@ -46,7 +48,9 @@ export const Seo = withRouter(
     const canonicalUrl = `https://${siteDomain}${
       router.asPath.split(/[\?\#]/)[0]
     }`;
-    const pageTitle = isHomePage ? title : title + ' – React';
+    // Allow setting a different title for Google results
+    const pageTitle =
+      (titleForTitleTag ?? title) + (isHomePage ? '' : ' – React');
     // Twitter's meta parser is not very good.
     const twitterTitle = pageTitle.replace(/[<>]/g, '');
     let description = isHomePage
diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md
index f0510415b..b1ba1d7ae 100644
--- a/src/content/reference/react/use-client.md
+++ b/src/content/reference/react/use-client.md
@@ -1,5 +1,6 @@
 ---
 title: "'use client'"
+titleForTitleTag: "'use client' directive"
 canary: true
 ---
 
diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md
index 4acea191c..cc271669a 100644
--- a/src/content/reference/react/use-server.md
+++ b/src/content/reference/react/use-server.md
@@ -1,5 +1,6 @@
 ---
 title: "'use server'"
+titleForTitleTag: "'use server' directive"
 canary: true
 ---
 

From 81f15204af726ea0711cd76f2c09aa7a24872a64 Mon Sep 17 00:00:00 2001
From: Brian Johnson <brianjo@fb.com>
Date: Mon, 30 Oct 2023 17:43:07 -0400
Subject: [PATCH 27/52] Adds Reference Overview Page (#6378)

* Adds landing page for reference section.)

* Updated hyperlinks.

* Fixes Legacy APIs link.

* Removes canary image from heading.
---
 src/content/reference/react/hooks.md | 139 +++++++++++++++++++++++++
 src/content/reference/react/index.md | 149 ++++-----------------------
 src/sidebarReference.json            |   6 +-
 3 files changed, 164 insertions(+), 130 deletions(-)
 create mode 100644 src/content/reference/react/hooks.md

diff --git a/src/content/reference/react/hooks.md b/src/content/reference/react/hooks.md
new file mode 100644
index 000000000..cec71ce8f
--- /dev/null
+++ b/src/content/reference/react/hooks.md
@@ -0,0 +1,139 @@
+---
+title: "Built-in React Hooks"
+---
+
+<Intro>
+
+*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.
+
+</Intro>
+
+---
+
+## State Hooks {/*state-hooks*/}
+
+*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.
+
+To add state to a component, use one of these Hooks:
+
+* [`useState`](/reference/react/useState) declares a state variable that you can update directly.
+* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
+
+```js
+function ImageGallery() {
+  const [index, setIndex] = useState(0);
+  // ...
+```
+
+---
+
+## Context Hooks {/*context-hooks*/}
+
+*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep.
+
+* [`useContext`](/reference/react/useContext) reads and subscribes to a context.
+
+```js
+function Button() {
+  const theme = useContext(ThemeContext);
+  // ...
+```
+
+---
+
+## Ref Hooks {/*ref-hooks*/}
+
+*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.
+
+* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node.
+* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used.
+
+```js
+function Form() {
+  const inputRef = useRef(null);
+  // ...
+```
+
+---
+
+## Effect Hooks {/*effect-hooks*/}
+
+*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.
+
+* [`useEffect`](/reference/react/useEffect) connects a component to an external system.
+
+```js
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+  // ...
+```
+
+Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+
+There are two rarely used variations of `useEffect` with differences in timing:
+
+* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here.
+* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
+
+---
+
+## Performance Hooks {/*performance-hooks*/}
+
+A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.
+
+To skip calculations and unnecessary re-rendering, use one of these Hooks:
+
+- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation.
+- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component.
+
+```js
+function TodoList({ todos, tab, theme }) {
+  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
+  // ...
+}
+```
+
+Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart).
+
+To prioritize rendering, use one of these Hooks:
+
+- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
+- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
+
+---
+
+## Resource Hooks {/*resource-hooks*/}
+
+*Resources* can be accessed by a component without having them as part of their state. For example, a component can read a message from a Promise or read styling information from a context.
+
+To read a value from a resource, use this Hook:
+
+- [`use`](/reference/react/use) lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
+
+```js
+function MessageComponent({ messagePromise }) {
+  const message = use(messagePromise);
+  const theme = use(ThemeContext);
+  // ...
+}
+```
+
+---
+
+## Other Hooks {/*other-hooks*/}
+
+These Hooks are mostly useful to library authors and aren't commonly used in the application code.
+
+- [`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.
+
+---
+
+## Your own Hooks {/*your-own-hooks*/}
+
+You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions.
diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md
index cec71ce8f..452f326d2 100644
--- a/src/content/reference/react/index.md
+++ b/src/content/reference/react/index.md
@@ -1,139 +1,30 @@
 ---
-title: "Built-in React Hooks"
+title: React Reference Overview
 ---
 
 <Intro>
-
-*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.
-
+This section provides detailed reference documentation for working with React. 
+For an introduction to React, please visit the [Learn](/learn) section. 
 </Intro>
 
----
-
-## State Hooks {/*state-hooks*/}
-
-*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.
-
-To add state to a component, use one of these Hooks:
-
-* [`useState`](/reference/react/useState) declares a state variable that you can update directly.
-* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
-
-```js
-function ImageGallery() {
-  const [index, setIndex] = useState(0);
-  // ...
-```
-
----
-
-## Context Hooks {/*context-hooks*/}
-
-*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep.
-
-* [`useContext`](/reference/react/useContext) reads and subscribes to a context.
-
-```js
-function Button() {
-  const theme = useContext(ThemeContext);
-  // ...
-```
-
----
-
-## Ref Hooks {/*ref-hooks*/}
-
-*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.
-
-* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node.
-* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used.
-
-```js
-function Form() {
-  const inputRef = useRef(null);
-  // ...
-```
-
----
-
-## Effect Hooks {/*effect-hooks*/}
-
-*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.
-
-* [`useEffect`](/reference/react/useEffect) connects a component to an external system.
-
-```js
-function ChatRoom({ roomId }) {
-  useEffect(() => {
-    const connection = createConnection(roomId);
-    connection.connect();
-    return () => connection.disconnect();
-  }, [roomId]);
-  // ...
-```
+Our The React reference documentation is broken down into functional subsections: 
 
-Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+## React {/*react*/}
+Programmatic React features:  
+* [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/react/directives) - Provide instructions to bundlers compatible with React Server Components.
 
-There are two rarely used variations of `useEffect` with differences in timing:
-
-* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here.
-* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
-
----
-
-## Performance Hooks {/*performance-hooks*/}
-
-A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.
-
-To skip calculations and unnecessary re-rendering, use one of these Hooks:
-
-- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation.
-- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component.
-
-```js
-function TodoList({ todos, tab, theme }) {
-  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
-  // ...
-}
-```
-
-Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart).
-
-To prioritize rendering, use one of these Hooks:
-
-- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
-- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
-
----
-
-## Resource Hooks {/*resource-hooks*/}
-
-*Resources* can be accessed by a component without having them as part of their state. For example, a component can read a message from a Promise or read styling information from a context.
-
-To read a value from a resource, use this Hook:
-
-- [`use`](/reference/react/use) lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
-
-```js
-function MessageComponent({ messagePromise }) {
-  const message = use(messagePromise);
-  const theme = use(ThemeContext);
-  // ...
-}
-```
-
----
-
-## Other Hooks {/*other-hooks*/}
-
-These Hooks are mostly useful to library authors and aren't commonly used in the application code.
-
-- [`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.
-
----
+## React DOM {/*react-dom*/}
+React-dom contains features that are only supported for web applications 
+(which run in the browser DOM environment). This section is broken into the following:
 
-## Your own Hooks {/*your-own-hooks*/}
+* [Hooks](/reference/react-dom/hooks) - Hooks for web applications which run in the browser DOM environment.
+* [Components](/reference/react-dom/components) - React supports all of the browser built-in HTML and SVG components.
+* [APIs](/reference/react-dom) - The `react-dom` package contains methods supported only in web applications.
+* [Client APIs](/reference/react-dom/client) - The `react-dom/client` APIs let you render React components on the client (in the browser). 
+* [Server APIs](/reference/react-dom/server) - The `react-dom/server` APIs let you render React components to HTML on the server.
 
-You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions.
+## Legacy APIs {/*legacy-apis*/}
+* [Legacy APIs](/reference/react/legacy) - Exported from the react package, but not recommended for use in newly written code. 
\ No newline at end of file
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 79b1fb9f7..5a6556557 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -6,9 +6,13 @@
       "hasSectionHeader": true,
       "sectionHeader": "react@18.2.0"
     },
+    {
+      "title": "Overview",
+      "path": "/reference/react"
+    },
     {
       "title": "Hooks",
-      "path": "/reference/react",
+      "path": "/reference/react/hooks",
       "routes": [
         {
           "title": "use",

From 49c2d7865ba75e9e83526c2e5ec5decc97c014aa Mon Sep 17 00:00:00 2001
From: Luna <lunaleaps@gmail.com>
Date: Mon, 30 Oct 2023 17:49:11 -0400
Subject: [PATCH 28/52] 'use server' fleshing out (#6384)

Co-authored-by: Sophie Alpert <git@sophiebits.com>
Co-authored-by: Luna Wei <luwe@fb.com>
---
 src/content/reference/react/use-server.md | 190 ++++++++++++++++++++--
 1 file changed, 174 insertions(+), 16 deletions(-)

diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md
index cc271669a..beaeb5f34 100644
--- a/src/content/reference/react/use-server.md
+++ b/src/content/reference/react/use-server.md
@@ -25,34 +25,192 @@ canary: true
 
 ### `'use server'` {/*use-server*/}
 
-Add `'use server';` at the very top of an async function to mark that the function can be executed by the client.
+Add `'use server'` at the top of an async function body to mark the function as callable by the client. We call these functions _server actions_.
 
-```js
+```js {2}
 async function addToCart(data) {
   'use server';
   // ...
 }
-
-// <ProductDetailPage addToCart={addToCart} />
 ```
 
-This function can be passed to the client. When called on the client, it will make a network request to the server that includes a serialized copy of any arguments passed. If the server function returns a value, that value will be serialized and returned to the client.
+When calling a server action on the client, it will make a network request to the server that includes a serialized copy of any arguments passed. If the server action returns a value, that value will be serialized and returned to the client.
 
-Alternatively, add `'use server';` at the very top of a file to mark all exports within that file as async server functions that can be used anywhere, including imported in client component files.
+Instead of individually marking functions with `'use server'`, you can add the directive to the top of a file to mark all exports within that file as server actions that can be used anywhere, including imported in client code.
 
 #### Caveats {/*caveats*/}
+* `'use server'` must be at the very beginning of their function or module; above any other code including imports (comments above directives are OK). They must be written with single or double quotes, not backticks.
+* `'use server'` can only be used in server-side files. The resulting server actions can be passed to Client Components through props. See supported [types for serialization](#serializable-parameters-and-return-values).
+* To import a server action from [client code](/reference/react/use-client), the directive must be used on a module level.
+* Because the underlying network calls are always asynchronous, `'use server'` can only be used on async functions.
+* Always treat arguments to server actions as untrusted input and authorize any mutations. See [security considerations](#security).
+* Server actions should be called in a [transition](/reference/react/useTransition). Server actions passed to [`<form action>`](/reference/react-dom/components/form#props) or [`formAction`](/reference/react-dom/components/input#props) will automatically be called in a transition.
+* Server actions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing server actions typically process one action at a time and do not have a way to cache the return value.
 
-* Remember that parameters to functions marked with `'use server'` are fully client-controlled. For security, always treat them as untrusted input, making sure to validate and escape the arguments as appropriate.
-* To avoid the confusion that might result from mixing client- and server-side code in the same file, `'use server'` can only be used in server-side files; the resulting functions can be passed to client components through props.
-* Because the underlying network calls are always asynchronous, `'use server'` can be used only on async functions.
-* Directives like `'use server'` must be at the very beginning of their function or file, above any other code including imports (comments above directives are OK). They must be written with single or double quotes, not backticks. (The `'use xyz'` directive format somewhat resembles the `useXyz()` Hook naming convention, but the similarity is coincidental.)
+### Security considerations {/*security*/}
 
-## Usage {/*usage*/}
+Arguments to server actions are fully client-controlled. For security, always treat them as untrusted input, and make sure to validate and escape arguments as appropriate.
+
+In any server action, make sure to validate that the logged-in user is allowed to perform that action.
 
 <Wip>
-This section is a work in progress. 
 
-This API can be used in any framework that supports React Server Components. You may find additional documentation from them.
-* [Next.js documentation](https://nextjs.org/docs/getting-started/react-essentials)
-* More coming soon
-</Wip>
\ No newline at end of file
+To prevent sending sensitive data from a server action, there are experimental taint APIs to prevent unique values and objects from being passed to client code.
+
+See [experimental_taintUniqueValue](/reference/react/experimental_taintUniqueValue) and [experimental_taintObjectReference](/reference/react/experimental_taintObjectReference).
+
+</Wip>
+
+### Serializable arguments and return values {/*serializable-parameters-and-return-values*/}
+
+As client code calls the server action over the network, any arguments passed will need to be serializable.
+
+Here are supported types for server action arguments:
+
+* Primitives
+	* [string](https://developer.mozilla.org/en-US/docs/Glossary/String)
+	* [number](https://developer.mozilla.org/en-US/docs/Glossary/Number)
+	* [bigint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)
+	* [boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean)
+	* [undefined](https://developer.mozilla.org/en-US/docs/Glossary/Undefined)
+	* [null](https://developer.mozilla.org/en-US/docs/Glossary/Null)
+	* [symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), only symbols registered in the global Symbol registry via [`Symbol.for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/for)
+* Iterables containing serializable values
+	* [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
+	* [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
+	* [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
+	* [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
+	* [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)
+* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+* [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
+* [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) instances
+* Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object): those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties
+* Functions that are server actions
+* [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+
+Notably, these are not supported:
+* React elements, or [JSX](https://react.dev/learn/writing-markup-with-jsx)
+* Functions, including component functions or any other function that is not a server action
+* [Classes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)
+* Objects that are instances of any class (other than built-ins mentioned) or objects with [null-prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)
+* Symbols not registered globally, ex. `Symbol('my new symbol')`
+
+
+Supported serializable return values are the same as [serializable props](/reference/react/use-client#passing-props-from-server-to-client-components) for a boundary Client Component.
+
+
+## Usage {/*usage*/}
+
+### Server actions in forms {/*server-actions-in-forms*/}
+
+The most common use case of server actions will be calling server functions that mutate data. On the browser, the [HTML form element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) is the traditional approach for a user to submit a mutation. With React Server Components, React introduces first-class support for server actions in [forms](/reference/react-dom/components/form).
+
+Here is a form that allows a user to request a username.
+
+```js [[1, 3, "formData"]]
+// App.js
+
+async function requestUsername(formData) {
+  'use server';
+  const username = formData.get('username');
+  // ...
+}
+
+export default App() {
+  <form action={requestUsername}>
+    <input type="text" name="username" />
+    <button type="submit">Request</button>
+  </form>
+}
+```
+
+In this example `requestUsername` is a server action passed to a `<form>`. When a user submits this form, there is a network request to the server function `requestUsername`. When calling a server action in a form, React will supply the form's <CodeStep step={1}>[FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)</CodeStep> as the first argument to the server action.
+
+By passing a server action to the form `action`, React can [progressively enhance](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement) the form. This means that forms can be submitted before the JavaScript bundle is loaded.
+
+#### Handling return values in forms {/*handling-return-values*/}
+
+In the username request form, there might be the chance that a username is not available. `requestUsername` should tell us if it fails or not.
+
+To update the UI based on the result of a server action while supporting progressive enhancement, use [`useFormState`](/reference/react-dom/hooks/useFormState).
+
+```js
+// requestUsername.js
+'use server';
+
+export default async function requestUsername(formData) {
+  const username = formData.get('username');
+  if (canRequest(username)) {
+    // ...
+    return 'successful';
+  }
+  return 'failed';
+}
+```
+
+```js {4,8}, [[2, 2, "'use client'"]]
+// UsernameForm.js
+'use client';
+
+import {useFormState} from 'react-dom';
+import requestUsername from './requestUsername';
+
+function UsernameForm() {
+  const [returnValue, action] = useFormState(requestUsername, 'n/a');
+
+  return (
+    <>
+      <form action={action}>
+        <input type="text" name="username" />
+        <button type="submit">Request</button>
+      </form>
+      <p>Last submission request returned: {returnValue}</p>
+    </>
+  );
+}
+```
+
+Note that like most Hooks, `useFormState` can only be called in <CodeStep step={1}>[client code](/reference/react/use-client)</CodeStep>.
+
+### Calling a server action outside of `<form>` {/*calling-a-server-action-outside-of-form*/}
+
+Server actions are exposed server endpoints and can be called anywhere in client code.
+
+When using a server action outside of a [form](/reference/react-dom/components/form), call the server action in a [transition](/reference/react/useTransition), which allows you to display a loading indicator, show [optimistic state updates](/reference/react/useOptimistic), and handle unexpected errors. Forms will automatically wrap server actions in transitions.
+
+```js {9-12}
+import incrementLike from './actions';
+import { useState, useTransition } from 'react';
+
+function LikeButton() {
+  const [isPending, startTransition] = useTransition();
+  const [likeCount, setLikeCount] = useState(0);
+
+  const onClick = () => {
+    startTransition(async () => {
+      const currentCount = await incrementLike();
+      setLikeCount(currentCount);
+    });
+  };
+
+  return (
+    <>
+      <p>Total Likes: {likeCount}</p>
+      <button onClick={onClick} disabled={isPending}>Like</button>;
+    </>
+  );
+}
+```
+
+```js
+// actions.js
+'use server';
+
+let likeCount = 0;
+export default async incrementLike() {
+  likeCount++;
+  return likeCount;
+}
+```
+
+To read a server action return value, you'll need to `await` the promise returned.
\ No newline at end of file

From 9c60167bf966286bafb99492e31b0609ccb56b5c Mon Sep 17 00:00:00 2001
From: Luna <lunaleaps@gmail.com>
Date: Mon, 30 Oct 2023 18:03:51 -0400
Subject: [PATCH 29/52] 'use client' - flesh out usages and reference (#6362)

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
Co-authored-by: David McCabe <davemccabe@gmail.com>
Co-authored-by: Luna Wei <luwe@fb.com>
---
 .../use_client_module_dependency.dark.png     | Bin 0 -> 18311 bytes
 .../diagrams/use_client_module_dependency.png | Bin 0 -> 18236 bytes
 .../diagrams/use_client_render_tree.dark.png  | Bin 0 -> 13583 bytes
 .../docs/diagrams/use_client_render_tree.png  | Bin 0 -> 13713 bytes
 src/content/reference/react/directives.md     |   2 +-
 src/content/reference/react/use-client.md     | 353 +++++++++++++++++-
 6 files changed, 335 insertions(+), 20 deletions(-)
 create mode 100644 public/images/docs/diagrams/use_client_module_dependency.dark.png
 create mode 100644 public/images/docs/diagrams/use_client_module_dependency.png
 create mode 100644 public/images/docs/diagrams/use_client_render_tree.dark.png
 create mode 100644 public/images/docs/diagrams/use_client_render_tree.png

diff --git a/public/images/docs/diagrams/use_client_module_dependency.dark.png b/public/images/docs/diagrams/use_client_module_dependency.dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..c50e7308b08fac14aea09cb7b1e8817ef5ba7a02
GIT binary patch
literal 18311
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%0A&JsD
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

literal 0
HcmV?d00001

diff --git a/public/images/docs/diagrams/use_client_module_dependency.png b/public/images/docs/diagrams/use_client_module_dependency.png
new file mode 100644
index 0000000000000000000000000000000000000000..d535246f7f976316cb04096c7ac1fa4afd884e92
GIT binary patch
literal 18236
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
b|1<uK+1TdSy6_$FJQD^_S3j3^P6<r_>CFHb

literal 0
HcmV?d00001

diff --git a/public/images/docs/diagrams/use_client_render_tree.dark.png b/public/images/docs/diagrams/use_client_render_tree.dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..8d3e6a4849ef7298eaea29b3690672d6b75de8c0
GIT binary patch
literal 13583
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
OM_xurx=6~v_kRIPAXE1M

literal 0
HcmV?d00001

diff --git a/public/images/docs/diagrams/use_client_render_tree.png b/public/images/docs/diagrams/use_client_render_tree.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad3840681cc807f733680710ea47b9563b769c26
GIT binary patch
literal 13713
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
O0J2g_l0|QgKL0Nyz#cOI

literal 0
HcmV?d00001

diff --git a/src/content/reference/react/directives.md b/src/content/reference/react/directives.md
index b323dab1d..4854310b3 100644
--- a/src/content/reference/react/directives.md
+++ b/src/content/reference/react/directives.md
@@ -19,5 +19,5 @@ Directives provide instructions to [bundlers compatible with React Server Compon
 
 ## Source code directives {/*source-code-directives*/}
 
-* [`'use client'`](/reference/react/use-client) marks source files whose components execute on the client.
+* [`'use client'`](/reference/react/use-client) lets you mark what code runs on the client.
 * [`'use server'`](/reference/react/use-server) marks server-side functions that can be called from client-side code.
\ No newline at end of file
diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md
index b1ba1d7ae..e0190d3fe 100644
--- a/src/content/reference/react/use-client.md
+++ b/src/content/reference/react/use-client.md
@@ -12,7 +12,7 @@ canary: true
 
 <Intro>
 
-`'use client'` marks source files whose components execute on the client.
+`'use client'` lets you mark what code runs on the client.
 
 </Intro>
 
@@ -24,37 +24,352 @@ canary: true
 
 ### `'use client'` {/*use-client*/}
 
-Add `'use client';` at the very top of a file to mark that the file (including any child components it uses) executes on the client, regardless of where it's imported.
+Add `'use client'` at the top of a file to mark the module and its transitive dependencies as client code.
 
-```js
+```js {1}
 'use client';
 
 import { useState } from 'react';
+import { formatDate } from './formatters';
+import Link from './link';
 
 export default function RichTextEditor(props) {
+  formatDate();
   // ...
+  return
+    <Link />
+    // ...
+}
 ```
 
-When a file marked `'use client'` is imported from a server component, [compatible bundlers](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) will treat the import as the "cut-off point" between server-only code and client code. Components at or below this point in the module graph can use client-only React features like [`useState`](/reference/react/useState).
+When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) will treat the module import as a boundary between server-run and client-run code.
+
+As a dependency of `RichTextEditor`, `formatDate` and `Link` will also be evaluated on the client regardless of whether their modules contain a `'use client'` directive. Note that the same module may be evaluated on the server when imported from server code and on the client when imported from client code.
 
 #### Caveats {/*caveats*/}
 
-* It's not necessary to add `'use client'` to every file that uses client-only React features, only the files that are imported from server component files. `'use client'` denotes the _boundary_ between server-only and client code; any components further down the tree will automatically be executed on the client. In order to be rendered from server components, components exported from `'use client'` files must have serializable props.
-* When a `'use client'` file is imported from a server file, the imported values can be rendered as a React component or passed via props to a client component. Any other use will throw an exception.
-* When a `'use client'` file is imported from another client file, the directive has no effect. This allows you to write client-only components that are simultaneously usable from server and client components.
-* All the code in `'use client'` file as well as any modules it imports (directly or indirectly) will become a part of the client module graph and must be sent to and executed by the client in order to be rendered by the browser. To reduce client bundle size and take full advantage of the server, move state (and the `'use client'` directives) lower in the tree when possible, and pass rendered server components [as children](/learn/passing-props-to-a-component#passing-jsx-as-children) to client components.
-* Because props are serialized across the server–client boundary, note that the placement of these directives can affect the amount of data sent to the client; avoid data structures that are larger than necessary.
-* Components like a `<MarkdownRenderer>` that use neither server-only nor client-only features should generally not be marked with `'use client'`. That way, they can render exclusively on the server when used from a server component, but they'll be added to the client bundle when used from a client component.
-* Libraries published to npm should include `'use client'` on exported React components that can be rendered with serializable props that use client-only React features, to allow those components to be imported and rendered by server components. Otherwise, users will need to wrap library components in their own `'use client'` files which can be cumbersome and prevents the library from moving logic to the server later. When publishing prebundled files to npm, ensure that `'use client'` source files end up in a bundle marked with `'use client'`, separate from any bundle containing exports that can be used directly on the server.
-* Client components will still run as part of server-side rendering (SSR) or build-time static site generation (SSG), which act as clients to transform React components' initial render output to HTML that can be rendered before JavaScript bundles are downloaded. But they can't use server-only features like reading directly from a database.
-* Directives like `'use client'` must be at the very beginning of a file, above any imports or other code (comments above directives are OK). They must be written with single or double quotes, not backticks. (The `'use xyz'` directive format somewhat resembles the `useXyz()` Hook naming convention, but the similarity is coincidental.)
+* `'use client'` must be at the very beginning of a file, above any imports or other code (comments are OK). They must be written with single or double quotes, but not backticks.
+* When a `'use client'` module is imported from another client-rendered module, the directive has no effect.
+* When a component module contains a `'use client'` directive, any usage of that component is guaranteed to be a Client Component. However, a component can still be evaluated on the client even if it does not have a `'use client'` directive.
+	* A component usage is considered a Client Component if it is defined in module with `'use client'` directive or when it is a transitive dependency of a module that contains a `'use client'` directive. Otherwise, it is a Server Component.
+* Code that is marked for client evaluation is not limited to components. All code that is a part of the client module sub-tree is sent to and run by the client.
+* When a server evaluated module imports values from a `'use client'` module, the values must either be a React component or [supported serializable prop values](#passing-props-from-server-to-client-components) to be passed to a Client Component. Any other use case will throw an exception.
+
+### How `'use client'` marks client code {/*how-use-client-marks-client-code*/}
+
+In a React app, components are often split into separate files, or [modules](/learn/importing-and-exporting-components#exporting-and-importing-a-component).
+
+For apps that use React Server Components, the app is server-rendered by default. `'use client'` introduces a server-client boundary in the [module dependency tree](/learn/understanding-your-ui-as-a-tree#the-module-dependency-tree), effectively creating a client-module subtree.
+
+To better illustrate this, consider the following React Server Component app and its module dependency and render tree.
+
+<Sandpack>
+
+```js App.js
+import FancyText from './FancyText';
+import InspirationGenerator from './InspirationGenerator';
+import Copyright from './Copyright';
+
+export default function App() {
+  return (
+    <>
+      <FancyText title text="Get Inspired App" />
+      <InspirationGenerator>
+        <Copyright year={2004} />
+      </InspirationGenerator>
+    </>
+  );
+}
+
+```
+
+```js FancyText.js
+export default function FancyText({title, text}) {
+  return title
+    ? <h1 className='fancy title'>{text}</h1>
+    : <h3 className='fancy cursive'>{text}</h3>
+}
+```
+
+```js InspirationGenerator.js
+'use client';
+
+import { useState } from 'react';
+import inspirations from './inspirations';
+import FancyText from './FancyText';
+
+export default function InspirationGenerator({children}) {
+  const [index, setIndex] = useState(0);
+  const quote = inspirations[index];
+  const next = () => setIndex((index + 1) % inspirations.length);
+
+  return (
+    <>
+      <p>Your inspirational quote is:</p>
+      <FancyText text={quote} />
+      <button onClick={next}>Inspire me again</button>
+      {children}
+    </>
+  );
+}
+```
+
+```js Copyright.js
+export default function Copyright({year}) {
+  return <p className='small'>©️ {year}</p>;
+}
+```
+
+```js inspirations.js
+export default [
+  "Don’t let yesterday take up too much of today.” — Will Rogers",
+  "Ambition is putting a ladder against the sky.",
+  "A joy that's shared is a joy made double.",
+];
+```
+
+```css
+.fancy {
+  font-family: 'Georgia';
+}
+.title {
+  color: #007AA3;
+  text-decoration: underline;
+}
+.cursive {
+  font-style: italic;
+}
+.small {
+  font-size: 10px;
+}
+```
+
+</Sandpack>
+
+<Diagram name="use_client_module_dependency" height={250} width={545} alt="A tree graph with the top node representing the module 'App.js'. 'App.js' has three children: 'Copyright.js', 'FancyText.js', and 'InspirationGenerator.js'. 'InspirationGenerator.js' has two children: 'FancyText.js' and 'inspirations.js'. The nodes under and including 'InspirationGenerator.js' have a yellow background color to signify that this sub-graph is client-rendered due to the 'use client' directive in 'InspirationGenerator.js'.">
+`'use client'` segments the module dependency tree of the React Server Components app to mark `InspirationGenerator.js` and any of its dependencies as client-rendered.
+</Diagram>
+
+In the module dependency tree of the example app, the `'use client'` directive in `InspirationGenerator.js` marks that module and all of its transitive dependencies as client modules. It creates a subtree of client modules with `InspirationGenerator.js` as the root.
+
+During render, the framework will server-render the root component and continue through the [render tree](/learn/understanding-your-ui-as-a-tree#the-render-tree), opting-out of evaluating any code imported from client-marked code.
+
+The server-rendered portion of the render tree is then sent to the client. The client, with its client code downloaded, then completes rendering the rest of the tree.
+
+<Diagram name="use_client_render_tree" height={250} width={500} alt="A tree graph where each node represents a component and its children as child components. The top-level node is labelled 'App' and it has two child components 'InspirationGenerator' and 'FancyText'. 'InspirationGenerator' has two child components, 'FancyText' and 'Copyright'. Both 'InspirationGenerator' and its child component 'FancyText' are marked to be client-rendered.">
+The render tree for the React Server Components app. `InspirationGenerator` and its child component `FancyText` are components exported from client-marked code and considered Client Components.
+</Diagram>
+
+We introduce the following definitions:
+
+* **Client Components** are components in a render tree that are rendered on the client.
+* **Server Components** are components in a render tree that are rendered on the server.
+
+Working through the example app, `App`, `FancyText` and `Copyright` are all server-rendered and considered Server Components. As `InspirationGenerator.js` and its transitive dependencies are marked as client code, the component `InspirationGenerator` and its child component `FancyText` are Client Components.
+
+<DeepDive>
+#### How is `FancyText` both a Server and a Client Component? {/*how-is-fancytext-both-a-server-and-a-client-component*/}
+
+By the above definitions, the component `FancyText` is both a Server and Client Component, how can that be?
+
+First, let's clarify that the term "component" is not very precise. Here are just two ways "component" can be understood:
+
+1. A "component" can refer to a **component definition**. In most cases this will be a function.
+
+```js
+// This is a definition of a component
+function MyComponent() {
+	return <p>My Component</p>
+}
+```
+
+2. A "component" can also refer to a **component usage** of its definition.
+```js
+import MyComponent from './MyComponent';
+
+function App() {
+	// This is a usage of a component
+	return <MyComponent />;
+}
+```
+
+Often, the imprecision is not important when explaining concepts, but in this case it is.
+
+When we talk about Server or Client Components, we are referring to component usages.
+
+* If the component is defined in a module with a `'use client'` directive, or the component is imported and called in a Client Component, then the component usage is a Client Component.
+* Otherwise, the component usage is a Server Component.
+
+
+<Diagram name="use_client_render_tree" height={150} width={450} alt="A tree graph where each node represents a component and its children as child components. The top-level node is labelled 'App' and it has two child components 'InspirationGenerator' and 'FancyText'. 'InspirationGenerator' has two child components, 'FancyText' and 'Copyright'. Both 'InspirationGenerator' and its child component 'FancyText' are marked to be client-rendered.">A render tree illustrates component usages.</Diagram>
+
+Back to the question of `FancyText`, we see that the component definition does _not_ have a `'use client'` directive and it has two usages.
+
+The usage of `FancyText` as a child of `App`, marks that usage as a Server Component. When `FancyText` is imported and called under `InspirationGenerator`, that usage of `FancyText` is a Client Component as `InspirationGenerator` contains a `'use client'` directive.
+
+This means that the component definition for `FancyText` will both be evaluated on the server and also downloaded by the client to render its Client Component usage.
+
+</DeepDive>
+
+<DeepDive>
+
+#### Why is `Copyright` a Server Component? {/*why-is-copyright-a-server-component*/}
+
+As a child of `InspirationGenerator`, a Client Component, why is `Copyright` a Server Component?
+
+To clarify, `'use client'` defines the boundary between server and client code on the _module dependency tree_, not the render tree.
+
+<Diagram name="use_client_module_dependency" height={200} width={500} alt="A tree graph with the top node representing the module 'App.js'. 'App.js' has three children: 'Copyright.js', 'FancyText.js', and 'InspirationGenerator.js'. 'InspirationGenerator.js' has two children: 'FancyText.js' and 'inspirations.js'. The nodes under and including 'InspirationGenerator.js' have a yellow background color to signify that this sub-graph is client-rendered due to the 'use client' directive in 'InspirationGenerator.js'.">
+`'use client'` defines the boundary between server and client code on the module dependency tree.
+</Diagram>
+
+In the module dependency tree, we see that `App.js` imports and calls `Copyright` from the `Copyright.js` module. As `Copyright.js` does not contain a `'use client'` directive, the component usage is rendered on the server. `App` is rendered on the server as it is the root component.
+
+Client Components can render Server Components because you can pass JSX as props. In this case, `InspirationGenerator` receives `Copyright` as [children](/learn/passing-props-to-a-component#passing-jsx-as-children). However, the `InspirationGenerator` module never directly imports the `Copyright` module nor calls the component, all of that is done by `App`.
+
+The takeaway is that a parent-child render relationship between components does not guarantee the same render environment.
+
+</DeepDive>
+
+### When to use `'use client'` {/*when-to-use-use-client*/}
+
+With `'use client'`, you can determine what component usages will be Client Components. As Server Components are default, here is a brief overview of the advantages and limitations to Server Components to determine when you need to mark something as client rendered.
+
+For simplicity, we talk about Server Components, but the same principles apply to all code in your app that is server run.
+
+#### Advantages {/*advantages*/}
+* Server Components can reduce the amount of code sent and run by the client. Only client modules are bundled and evaluated by the client.
+* Server Components benefit from running on the server. They can access the local filesystem and may experience low latency for data fetches and network requests.
+
+#### Limitations {/*limitations*/}
+* Server Components cannot support interaction as event handlers must be registered and triggered by a client.
+	* The browser, as an example client, is responsible for delegating UI clicks to the appropriate `onClick` handler.
+* Server Components cannot use most Hooks.
+	* When Server Components are rendered, they are conceptually resolved into instructions for the client to interpret and turn into UI primitives. This means that Server Components do not persist in memory after render and do not support re-rendering or state.
+
+### Passing props from Server to Client Components {/*passing-props-from-server-to-client-components*/}
+
+As in any React app, parent components pass data to child components. As they are rendered in different environments, passing data from a Server Component to a Client Component requires extra consideration.
+
+Prop values passed from a Server Component to Client Component must be serializable.
+
+Serializable props include:
+* Primitives
+	* [string](https://developer.mozilla.org/en-US/docs/Glossary/String)
+	* [number](https://developer.mozilla.org/en-US/docs/Glossary/Number)
+	* [bigint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)
+	* [boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean)
+	* [undefined](https://developer.mozilla.org/en-US/docs/Glossary/Undefined)
+	* [null](https://developer.mozilla.org/en-US/docs/Glossary/Null)
+	* [symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), only symbols registered in the global Symbol registry via [`Symbol.for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/for)
+* Iterables containing serializable values
+	* [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
+	* [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
+	* [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
+	* [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
+	* [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)
+* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+* [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
+* Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object), those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties
+* Client or Server Components
+* [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+
+Notably, these are not supported:
+* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function) that are not exported from client-marked modules or marked with [`'use server'`](/reference/react/use-server)
+* [Classes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)
+* Objects that are instances of any class (other than built-ins mentioned) or objects with [null-prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)
+* Symbols not registered globally, ex. `Symbol('my new symbol')`
+
 
 ## Usage {/*usage*/}
 
-<Wip>
-This section is a work in progress. 
+### Building with interactivity and state {/*building-with-interactivity-and-state*/}
+
+<Sandpack>
+
+```js App.js
+'use client';
+
+import { useState } from 'react';
+
+export default function Counter({initialValue = 0}) {
+	const [countValue, setCountValue] = useState(initialValue);
+	const increment = () => setCountValue(countValue + 1);
+	const decrement = () => setCountValue(countValue - 1);
+	return (<>
+		<h2>Count Value: {countValue}</h2>
+		<button onClick={increment}>+1</button>
+		<button onClick={decrement}>-1</button>
+	</>);
+}
+```
+
+</Sandpack>
+
+As `Counter` requires both the `useState` hook and event handlers to increment or decrement the value, this component must be a Client Component and will require a `'use client'` directive at the top.
+
+In contrast, a component that renders UI without interaction will not need to be a Client Component.
+
+```js
+import {getCounterValueFromFile} from 'fs-utils';
+import Counter from './Counter';
+
+export default async function CounterContainer() {
+  const initialValue = await getCounterValueFromFile();
+  return <Counter initialValue={initialValue} />
+}
+```
+
+For example, the parent component of the Client Component `CounterContainer` does not require `'use client'` as it is not interactive and does not use state. In addition, `CounterContainer` must be a Server Component as it reads from the local file system on the server. This is possible because Server Components, unlike Client Components, can be async functions.
+
+There are also components that don't use any server or client-only features and can be agnostic to where they render. `FancyText` is an example of such a component.
+
+```js
+export default function FancyText({title, text}) {
+  return title
+    ? <h1 className='fancy title'>{text}</h1>
+    : <h3 className='fancy cursive'>{text}</h3>
+}
+```
+
+In this case, it is discouraged to use the `'use client'` directive as it prematurely forces all component usages of `FancyText` to be rendered on the client, which comes at a performance cost. As demonstrated in the earlier Inspirations app example, `FancyText` is used as both a Server or Client Component, depending on where it is imported and used.
+
+### Using client APIs {/*using-client-apis*/}
+
+Your React app may use client-specific APIs which are dependent on your targeted client. For the browser, some example client APIs include web storage, audio and video manipulation, and device hardware, among [others](https://developer.mozilla.org/en-US/docs/Web/API).
+
+In this example, the component uses  [DOM APIs](https://developer.mozilla.org/en-US/docs/Glossary/DOM) to manipulate a [`canvas`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element. Since those APIs  are only available in the browser, it must be marked as a Client Component.
+
+```js
+'use client';
+
+import {useRef, useEffect} from 'react';
+
+export default function Circle() {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const canvas = ref.current;
+    const context = canvas.getContext('2d');
+    context.beginPath();
+    context.arc(100, 75, 50, 0, 2 * Math.PI);
+    context.stroke();
+  });
+  return <canvas ref={ref} />
+}
+```
+
+### Using React libraries {/*using-react-libraries*/}
+
+Often in a React app, you'll leverage third-party libraries to handle common UI patterns or logic.
+
+These libraries may rely on component Hooks or client APIs. In these cases, you'll need to ensure you're using these libraries in Client Components. Depending on the nature of these libraries, this may mean adding a `'use client'` near the top of your module dependency tree – marking the majority of your React app as client-rendered.
+
+Libraries that use any of the following React APIs must be marked as client-run:
+* [createContext](/reference/react/createContext)
+* [`react`](/reference/react/hooks) and [`react-dom`](/reference/react-dom/hooks) Hooks, excluding [`use`](/reference/react/use) and [`useId`](/reference/react/useId)
+* [forwardRef](/reference/react/forwardRef)
+* [memo](/reference/react/memo)
+* [startTransition](/reference/react/startTransition)
+* If they use client APIs, ex. DOM insertion or native platform views
 
-This API can be used in any framework that supports React Server Components. You may find additional documentation from them.
-* [Next.js documentation](https://nextjs.org/docs/getting-started/react-essentials)
-* More coming soon
-</Wip>
\ No newline at end of file
+[TODO]: <> (Troubleshooting - need use-cases)
\ No newline at end of file

From f94942863207ab816d9c339c8a8ec36c44608f45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Medrano?= <mixlaab.labs@gmail.com>
Date: Tue, 31 Oct 2023 10:16:13 -0600
Subject: [PATCH 30/52] Add closing </p> tag (#6394)

---
 src/content/reference/react/Component.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md
index 6174cd753..f8884608b 100644
--- a/src/content/reference/react/Component.md
+++ b/src/content/reference/react/Component.md
@@ -632,7 +632,7 @@ class Form extends Component {
     return (
       <>
         <input value={this.state.name} onChange={this.handleNameChange} />
-        <p>Hello, {this.state.name}.
+        <p>Hello, {this.state.name}.</p>
       </>
     );
   }

From 40a88fa9a09f8809bd1c78972de99ea7698991bb Mon Sep 17 00:00:00 2001
From: DhanushShettyH <106665135+DhanushShettyH@users.noreply.github.com>
Date: Fri, 3 Nov 2023 12:31:36 +0530
Subject: [PATCH 31/52] Fix typoError Mentioned in issue (#6400)

---
 src/components/Layout/getRouteMeta.tsx                      | 6 +++---
 .../react-labs-what-we-have-been-working-on-march-2023.md   | 2 +-
 src/content/learn/passing-data-deeply-with-context.md       | 4 ++--
 src/content/reference/react-dom/components/form.md          | 2 +-
 src/content/reference/react/cache.md                        | 2 +-
 .../reference/react/experimental_taintUniqueValue.md        | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Layout/getRouteMeta.tsx b/src/components/Layout/getRouteMeta.tsx
index d22947847..3564dd738 100644
--- a/src/components/Layout/getRouteMeta.tsx
+++ b/src/components/Layout/getRouteMeta.tsx
@@ -58,13 +58,13 @@ export interface RouteMeta {
   order?: number;
 }
 
-type TravesalContext = RouteMeta & {
+type TraversalContext = RouteMeta & {
   currentIndex: number;
 };
 
 export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
   const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree);
-  const ctx: TravesalContext = {
+  const ctx: TraversalContext = {
     currentIndex: 0,
   };
   buildRouteMeta(cleanedPath, routeTree, ctx);
@@ -79,7 +79,7 @@ export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
 function buildRouteMeta(
   searchPath: string,
   currentRoute: RouteItem,
-  ctx: TravesalContext
+  ctx: TraversalContext
 ) {
   ctx.currentIndex++;
 
diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
index a6592fd3b..5071af6ec 100644
--- a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
+++ b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
@@ -74,7 +74,7 @@ Making plain JavaScript in React components reactive requires a compiler with a
 
 ## Offscreen Rendering {/*offscreen-rendering*/}
 
-Offscreen rendering is an upcoming capability in React for rendering screens in the background without additional performance overhead. You can think of it as a version of the [`content-visiblity` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) that works not only for DOM elements but React components, too. During our research, we've discovered a variety of use cases:
+Offscreen rendering is an upcoming capability in React for rendering screens in the background without additional performance overhead. You can think of it as a version of the [`content-visibility` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) that works not only for DOM elements but React components, too. During our research, we've discovered a variety of use cases:
 
 - A router can prerender screens in the background so that when a user navigates to them, they're instantly available.
 - A tab switching component can preserve the state of hidden tabs, so the user can switch between them without losing their progress.
diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md
index 45c5e77da..31405c0af 100644
--- a/src/content/learn/passing-data-deeply-with-context.md
+++ b/src/content/learn/passing-data-deeply-with-context.md
@@ -985,7 +985,7 @@ export const places = [{
 }, {
   id: 5, 
   name: 'Chefchaouen, Marocco',
-  description: 'There are a few theories on why the houses are painted blue, including that the color repells mosquitos or that it symbolizes sky and heaven.',
+  description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.',
   imageId: 'rTqKo46'
 }, {
   id: 6,
@@ -1124,7 +1124,7 @@ export const places = [{
 }, {
   id: 5, 
   name: 'Chefchaouen, Marocco',
-  description: 'There are a few theories on why the houses are painted blue, including that the color repells mosquitos or that it symbolizes sky and heaven.',
+  description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.',
   imageId: 'rTqKo46'
 }, {
   id: 6,
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index 7c6023220..dfffc74f5 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -273,7 +273,7 @@ export async function deliverMessage(message) {
 
 </Sandpack>
 
-[//]: # 'Uncomment the next line, and delete this line after the `useOptimisitc` reference documentatino page is published'
+[//]: # 'Uncomment the next line, and delete this line after the `useOptimistic` reference documentatino page is published'
 [//]: # 'To learn more about the `useOptimistic` Hook see the [reference documentation](/reference/react/hooks/useOptimistic).'
 
 ### Handling form submission errors {/*handling-form-submission-errors*/}
diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md
index 65d95ab76..735560636 100644
--- a/src/content/reference/react/cache.md
+++ b/src/content/reference/react/cache.md
@@ -309,7 +309,7 @@ async function DemoProfile() {
 
 React only provides cache access to the memoized function in a component. When calling <CodeStep step={1}>`getUser`</CodeStep> outside of a component, it will still evaluate the function but not read or update the cache.
 
-This is because cache access is provided through a [context](/learn/passing-data-deeply-with-context) which is only accessibile from a component. 
+This is because cache access is provided through a [context](/learn/passing-data-deeply-with-context) which is only accessible from a component. 
 
 </Pitfall>
 
diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md
index aeee7456c..e8226d92f 100644
--- a/src/content/reference/react/experimental_taintUniqueValue.md
+++ b/src/content/reference/react/experimental_taintUniqueValue.md
@@ -131,7 +131,7 @@ In this example, the constant `password` is tainted. Then `password` is used to
 
 Other similar ways of deriving new values from tainted values like concatenating it into a larger string, converting it to base64, or returning a substring create untained values.
 
-Tainting only protects against simple mistakes like explictly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns.
+Tainting only protects against simple mistakes like explicitly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns.
 
 </Pitfall>
 

From a8790ca810c1cebd114db35a433b90eb223dbb04 Mon Sep 17 00:00:00 2001
From: Sophie Alpert <git@sophiebits.com>
Date: Fri, 3 Nov 2023 11:00:40 -0700
Subject: [PATCH 32/52] Edits for new "use client" content (#6401)

* Edits for new "use client" content

* Apply suggestions from code review

Co-authored-by: Luna <lunaleaps@gmail.com>

---------

Co-authored-by: Luna <lunaleaps@gmail.com>
---
 src/content/reference/react/use-client.md | 102 +++++++++++-----------
 src/content/reference/react/use-server.md |   5 +-
 2 files changed, 55 insertions(+), 52 deletions(-)

diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md
index e0190d3fe..f4b90d288 100644
--- a/src/content/reference/react/use-client.md
+++ b/src/content/reference/react/use-client.md
@@ -31,20 +31,19 @@ Add `'use client'` at the top of a file to mark the module and its transitive de
 
 import { useState } from 'react';
 import { formatDate } from './formatters';
-import Link from './link';
+import Button from './button';
 
-export default function RichTextEditor(props) {
-  formatDate();
+export default function RichTextEditor({ timestamp, text }) {
+  const date = formatDate(timestamp);
+  // ...
+  const editButton = <Button />;
   // ...
-  return
-    <Link />
-    // ...
 }
 ```
 
 When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) will treat the module import as a boundary between server-run and client-run code.
 
-As a dependency of `RichTextEditor`, `formatDate` and `Link` will also be evaluated on the client regardless of whether their modules contain a `'use client'` directive. Note that the same module may be evaluated on the server when imported from server code and on the client when imported from client code.
+As dependencies of `RichTextEditor`, `formatDate` and `Button` will also be evaluated on the client regardless of whether their modules contain a `'use client'` directive. Note that a single module may be evaluated on the server when imported from server code and on the client when imported from client code.
 
 #### Caveats {/*caveats*/}
 
@@ -59,9 +58,9 @@ As a dependency of `RichTextEditor`, `formatDate` and `Link` will also be evalua
 
 In a React app, components are often split into separate files, or [modules](/learn/importing-and-exporting-components#exporting-and-importing-a-component).
 
-For apps that use React Server Components, the app is server-rendered by default. `'use client'` introduces a server-client boundary in the [module dependency tree](/learn/understanding-your-ui-as-a-tree#the-module-dependency-tree), effectively creating a client-module subtree.
+For apps that use React Server Components, the app is server-rendered by default. `'use client'` introduces a server-client boundary in the [module dependency tree](/learn/understanding-your-ui-as-a-tree#the-module-dependency-tree), effectively creating a subtree of client modules.
 
-To better illustrate this, consider the following React Server Component app and its module dependency and render tree.
+To better illustrate this, consider the following React Server Components app.
 
 <Sandpack>
 
@@ -146,12 +145,12 @@ export default [
 
 </Sandpack>
 
+In the module dependency tree of this example app, the `'use client'` directive in `InspirationGenerator.js` marks that module and all of its transitive dependencies as client modules. The subtree starting at `InspirationGenerator.js` is now marked as client modules.
+
 <Diagram name="use_client_module_dependency" height={250} width={545} alt="A tree graph with the top node representing the module 'App.js'. 'App.js' has three children: 'Copyright.js', 'FancyText.js', and 'InspirationGenerator.js'. 'InspirationGenerator.js' has two children: 'FancyText.js' and 'inspirations.js'. The nodes under and including 'InspirationGenerator.js' have a yellow background color to signify that this sub-graph is client-rendered due to the 'use client' directive in 'InspirationGenerator.js'.">
-`'use client'` segments the module dependency tree of the React Server Components app to mark `InspirationGenerator.js` and any of its dependencies as client-rendered.
+`'use client'` segments the module dependency tree of the React Server Components app, marking `InspirationGenerator.js` and all of its dependencies as client-rendered.
 </Diagram>
 
-In the module dependency tree of the example app, the `'use client'` directive in `InspirationGenerator.js` marks that module and all of its transitive dependencies as client modules. It creates a subtree of client modules with `InspirationGenerator.js` as the root.
-
 During render, the framework will server-render the root component and continue through the [render tree](/learn/understanding-your-ui-as-a-tree#the-render-tree), opting-out of evaluating any code imported from client-marked code.
 
 The server-rendered portion of the render tree is then sent to the client. The client, with its client code downloaded, then completes rendering the rest of the tree.
@@ -179,7 +178,7 @@ First, let's clarify that the term "component" is not very precise. Here are jus
 ```js
 // This is a definition of a component
 function MyComponent() {
-	return <p>My Component</p>
+  return <p>My Component</p>
 }
 ```
 
@@ -188,8 +187,8 @@ function MyComponent() {
 import MyComponent from './MyComponent';
 
 function App() {
-	// This is a usage of a component
-	return <MyComponent />;
+  // This is a usage of a component
+  return <MyComponent />;
 }
 ```
 
@@ -215,9 +214,9 @@ This means that the component definition for `FancyText` will both be evaluated
 
 #### Why is `Copyright` a Server Component? {/*why-is-copyright-a-server-component*/}
 
-As a child of `InspirationGenerator`, a Client Component, why is `Copyright` a Server Component?
+Because `Copyright` is rendered as a child of the Client Component `InspirationGenerator`, you might be surprised that it is a Server Component.
 
-To clarify, `'use client'` defines the boundary between server and client code on the _module dependency tree_, not the render tree.
+Recall that `'use client'` defines the boundary between server and client code on the _module dependency tree_, not the render tree.
 
 <Diagram name="use_client_module_dependency" height={200} width={500} alt="A tree graph with the top node representing the module 'App.js'. 'App.js' has three children: 'Copyright.js', 'FancyText.js', and 'InspirationGenerator.js'. 'InspirationGenerator.js' has two children: 'FancyText.js' and 'inspirations.js'. The nodes under and including 'InspirationGenerator.js' have a yellow background color to signify that this sub-graph is client-rendered due to the 'use client' directive in 'InspirationGenerator.js'.">
 `'use client'` defines the boundary between server and client code on the module dependency tree.
@@ -225,7 +224,7 @@ To clarify, `'use client'` defines the boundary between server and client code o
 
 In the module dependency tree, we see that `App.js` imports and calls `Copyright` from the `Copyright.js` module. As `Copyright.js` does not contain a `'use client'` directive, the component usage is rendered on the server. `App` is rendered on the server as it is the root component.
 
-Client Components can render Server Components because you can pass JSX as props. In this case, `InspirationGenerator` receives `Copyright` as [children](/learn/passing-props-to-a-component#passing-jsx-as-children). However, the `InspirationGenerator` module never directly imports the `Copyright` module nor calls the component, all of that is done by `App`.
+Client Components can render Server Components because you can pass JSX as props. In this case, `InspirationGenerator` receives `Copyright` as [children](/learn/passing-props-to-a-component#passing-jsx-as-children). However, the `InspirationGenerator` module never directly imports the `Copyright` module nor calls the component, all of that is done by `App`. In fact, the `Copyright` component is fully executed before `InspirationGenerator` starts rendering.
 
 The takeaway is that a parent-child render relationship between components does not guarantee the same render environment.
 
@@ -233,21 +232,21 @@ The takeaway is that a parent-child render relationship between components does
 
 ### When to use `'use client'` {/*when-to-use-use-client*/}
 
-With `'use client'`, you can determine what component usages will be Client Components. As Server Components are default, here is a brief overview of the advantages and limitations to Server Components to determine when you need to mark something as client rendered.
+With `'use client'`, you can determine when components are Client Components. As Server Components are default, here is a brief overview of the advantages and limitations to Server Components to determine when you need to mark something as client rendered.
 
 For simplicity, we talk about Server Components, but the same principles apply to all code in your app that is server run.
 
-#### Advantages {/*advantages*/}
+#### Advantages of Server Components {/*advantages*/}
 * Server Components can reduce the amount of code sent and run by the client. Only client modules are bundled and evaluated by the client.
 * Server Components benefit from running on the server. They can access the local filesystem and may experience low latency for data fetches and network requests.
 
-#### Limitations {/*limitations*/}
+#### Limitations of Server Components {/*limitations*/}
 * Server Components cannot support interaction as event handlers must be registered and triggered by a client.
-	* The browser, as an example client, is responsible for delegating UI clicks to the appropriate `onClick` handler.
+	* For example, event handlers like `onClick` can only be defined in Client Components.
 * Server Components cannot use most Hooks.
-	* When Server Components are rendered, they are conceptually resolved into instructions for the client to interpret and turn into UI primitives. This means that Server Components do not persist in memory after render and do not support re-rendering or state.
+	* When Server Components are rendered, their output is essentially a list of components for the client to render. Server Components do not persist in memory after render and cannot have their own state.
 
-### Passing props from Server to Client Components {/*passing-props-from-server-to-client-components*/}
+### Serializable types returned by Server Components {/*serializable-types*/}
 
 As in any React app, parent components pass data to child components. As they are rendered in different environments, passing data from a Server Component to a Client Component requires extra consideration.
 
@@ -267,17 +266,17 @@ Serializable props include:
 	* [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
 	* [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
 	* [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
-	* [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)
-* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+	* [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) and [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
 * [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
-* Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object), those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties
-* Client or Server Components
+* Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object): those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties
+* Functions that are [server actions](/reference/react/use-server)
+* Client or Server Component elements (JSX)
 * [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
 
 Notably, these are not supported:
 * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function) that are not exported from client-marked modules or marked with [`'use server'`](/reference/react/use-server)
 * [Classes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)
-* Objects that are instances of any class (other than built-ins mentioned) or objects with [null-prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)
+* Objects that are instances of any class (other than the built-ins mentioned) or objects with [a null prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)
 * Symbols not registered globally, ex. `Symbol('my new symbol')`
 
 
@@ -293,14 +292,16 @@ Notably, these are not supported:
 import { useState } from 'react';
 
 export default function Counter({initialValue = 0}) {
-	const [countValue, setCountValue] = useState(initialValue);
-	const increment = () => setCountValue(countValue + 1);
-	const decrement = () => setCountValue(countValue - 1);
-	return (<>
-		<h2>Count Value: {countValue}</h2>
-		<button onClick={increment}>+1</button>
-		<button onClick={decrement}>-1</button>
-	</>);
+  const [countValue, setCountValue] = useState(initialValue);
+  const increment = () => setCountValue(countValue + 1);
+  const decrement = () => setCountValue(countValue - 1);
+  return (
+    <>
+      <h2>Count Value: {countValue}</h2>
+      <button onClick={increment}>+1</button>
+      <button onClick={decrement}>-1</button>
+    </>
+  );
 }
 ```
 
@@ -311,18 +312,18 @@ As `Counter` requires both the `useState` hook and event handlers to increment o
 In contrast, a component that renders UI without interaction will not need to be a Client Component.
 
 ```js
-import {getCounterValueFromFile} from 'fs-utils';
+import { readFile } from 'node:fs/promises';
 import Counter from './Counter';
 
 export default async function CounterContainer() {
-  const initialValue = await getCounterValueFromFile();
+  const initialValue = await readFile('/path/to/counter_value');
   return <Counter initialValue={initialValue} />
 }
 ```
 
-For example, the parent component of the Client Component `CounterContainer` does not require `'use client'` as it is not interactive and does not use state. In addition, `CounterContainer` must be a Server Component as it reads from the local file system on the server. This is possible because Server Components, unlike Client Components, can be async functions.
+For example, `Counter`'s parent component, `CounterContainer`, does not require `'use client'` as it is not interactive and does not use state. In addition, `CounterContainer` must be a Server Component as it reads from the local file system on the server, which is possible only in a Server Component.
 
-There are also components that don't use any server or client-only features and can be agnostic to where they render. `FancyText` is an example of such a component.
+There are also components that don't use any server or client-only features and can be agnostic to where they render. In our earlier example, `FancyText` is one such component.
 
 ```js
 export default function FancyText({title, text}) {
@@ -332,13 +333,15 @@ export default function FancyText({title, text}) {
 }
 ```
 
-In this case, it is discouraged to use the `'use client'` directive as it prematurely forces all component usages of `FancyText` to be rendered on the client, which comes at a performance cost. As demonstrated in the earlier Inspirations app example, `FancyText` is used as both a Server or Client Component, depending on where it is imported and used.
+In this case, we don't add the `'use client'` directive, resulting in `FancyText`'s _output_ (rather than its source code) to be sent to the browser when referenced from a Server Component. As demonstrated in the earlier Inspirations app example, `FancyText` is used as both a Server or Client Component, depending on where it is imported and used.
+
+But if `FancyText`'s HTML output was large relative to its source code (including dependencies), it might be more efficient to force it to always be a Client Component. Components that return a long SVG path string are one case where it may be more efficient to force a component to be a Client Component.
 
 ### Using client APIs {/*using-client-apis*/}
 
-Your React app may use client-specific APIs which are dependent on your targeted client. For the browser, some example client APIs include web storage, audio and video manipulation, and device hardware, among [others](https://developer.mozilla.org/en-US/docs/Web/API).
+Your React app may use client-specific APIs, such as the browser's APIs for web storage, audio and video manipulation, and device hardware, among [others](https://developer.mozilla.org/en-US/docs/Web/API).
 
-In this example, the component uses  [DOM APIs](https://developer.mozilla.org/en-US/docs/Glossary/DOM) to manipulate a [`canvas`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element. Since those APIs  are only available in the browser, it must be marked as a Client Component.
+In this example, the component uses [DOM APIs](https://developer.mozilla.org/en-US/docs/Glossary/DOM) to manipulate a [`canvas`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element. Since those APIs are only available in the browser, it must be marked as a Client Component.
 
 ```js
 'use client';
@@ -350,21 +353,20 @@ export default function Circle() {
   useLayoutEffect(() => {
     const canvas = ref.current;
     const context = canvas.getContext('2d');
+    context.reset();
     context.beginPath();
     context.arc(100, 75, 50, 0, 2 * Math.PI);
     context.stroke();
   });
-  return <canvas ref={ref} />
+  return <canvas ref={ref} />;
 }
 ```
 
-### Using React libraries {/*using-react-libraries*/}
+### Using third-party libraries {/*using-third-party-libraries*/}
 
 Often in a React app, you'll leverage third-party libraries to handle common UI patterns or logic.
 
-These libraries may rely on component Hooks or client APIs. In these cases, you'll need to ensure you're using these libraries in Client Components. Depending on the nature of these libraries, this may mean adding a `'use client'` near the top of your module dependency tree – marking the majority of your React app as client-rendered.
-
-Libraries that use any of the following React APIs must be marked as client-run:
+These libraries may rely on component Hooks or client APIs. Third-party components that use any of the following React APIs must run on the client:
 * [createContext](/reference/react/createContext)
 * [`react`](/reference/react/hooks) and [`react-dom`](/reference/react-dom/hooks) Hooks, excluding [`use`](/reference/react/use) and [`useId`](/reference/react/useId)
 * [forwardRef](/reference/react/forwardRef)
@@ -372,4 +374,6 @@ Libraries that use any of the following React APIs must be marked as client-run:
 * [startTransition](/reference/react/startTransition)
 * If they use client APIs, ex. DOM insertion or native platform views
 
+If these libraries have been updated to be compatible with React Server Components, then they will already include `'use client'` markers of their own, allowing you to use them directly from your Server Components. If a library hasn't been updated, or if a component needs props like event handlers that can only be specified on the client, you may need to add your own Client Component file in between the third-party Client Component and your Server Component where you'd like to use it.
+
 [TODO]: <> (Troubleshooting - need use-cases)
\ No newline at end of file
diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md
index beaeb5f34..69f5e1044 100644
--- a/src/content/reference/react/use-server.md
+++ b/src/content/reference/react/use-server.md
@@ -80,8 +80,7 @@ Here are supported types for server action arguments:
 	* [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
 	* [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
 	* [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
-	* [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)
-* [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+	* [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) and [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
 * [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
 * [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) instances
 * Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object): those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties
@@ -92,7 +91,7 @@ Notably, these are not supported:
 * React elements, or [JSX](https://react.dev/learn/writing-markup-with-jsx)
 * Functions, including component functions or any other function that is not a server action
 * [Classes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)
-* Objects that are instances of any class (other than built-ins mentioned) or objects with [null-prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)
+* Objects that are instances of any class (other than the built-ins mentioned) or objects with [a null prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)
 * Symbols not registered globally, ex. `Symbol('my new symbol')`
 
 

From 55b9e04da0c685661e84fd269ff6c4e31b83b679 Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Tue, 7 Nov 2023 07:09:49 +0900
Subject: [PATCH 33/52] Remove "canary: true" from `useTransition` in Sidebar
 (#6411)

---
 src/sidebarReference.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 5a6556557..315ea3e0b 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -82,8 +82,7 @@
         },
         {
           "title": "useTransition",
-          "path": "/reference/react/useTransition",
-          "canary": true
+          "path": "/reference/react/useTransition"
         }
       ]
     },

From 617065b8be84ee44114a6dd01af0a040c0f33fd9 Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Tue, 7 Nov 2023 07:11:40 +0900
Subject: [PATCH 34/52] Fix style in React Reference Overview (#6410)

---
 src/content/reference/react/index.md | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md
index 452f326d2..43394acf6 100644
--- a/src/content/reference/react/index.md
+++ b/src/content/reference/react/index.md
@@ -3,28 +3,32 @@ title: React Reference Overview
 ---
 
 <Intro>
-This section provides detailed reference documentation for working with React. 
-For an introduction to React, please visit the [Learn](/learn) section. 
+
+This section provides detailed reference documentation for working with React. For an introduction to React, please visit the [Learn](/learn) section.
+
 </Intro>
 
-Our The React reference documentation is broken down into functional subsections: 
+Our The React reference documentation is broken down into functional subsections:
 
 ## React {/*react*/}
-Programmatic React features:  
+
+Programmatic React features:
+
 * [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. 
+* [APIs](/reference/react/apis) - APIs that are useful for defining components.
 * [Directives](/reference/react/directives) - Provide instructions to bundlers compatible with React Server Components.
 
 ## React DOM {/*react-dom*/}
-React-dom contains features that are only supported for web applications 
-(which run in the browser DOM environment). This section is broken into the following:
+
+React-dom contains features that are only supported for web applications (which run in the browser DOM environment). This section is broken into the following:
 
 * [Hooks](/reference/react-dom/hooks) - Hooks for web applications which run in the browser DOM environment.
 * [Components](/reference/react-dom/components) - React supports all of the browser built-in HTML and SVG components.
 * [APIs](/reference/react-dom) - The `react-dom` package contains methods supported only in web applications.
-* [Client APIs](/reference/react-dom/client) - The `react-dom/client` APIs let you render React components on the client (in the browser). 
+* [Client APIs](/reference/react-dom/client) - The `react-dom/client` APIs let you render React components on the client (in the browser).
 * [Server APIs](/reference/react-dom/server) - The `react-dom/server` APIs let you render React components to HTML on the server.
 
 ## Legacy APIs {/*legacy-apis*/}
-* [Legacy APIs](/reference/react/legacy) - Exported from the react package, but not recommended for use in newly written code. 
\ No newline at end of file
+
+* [Legacy APIs](/reference/react/legacy) - Exported from the `react` package, but not recommended for use in newly written code.

From 8727204b04f050d1b7c065a9157fc3531552f018 Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen.ajam4@gmail.com>
Date: Tue, 7 Nov 2023 00:22:48 +0100
Subject: [PATCH 35/52] fix Illustration and IllustrationBlock alt color on
 dark mode (#5981)

---
 src/components/MDX/MDXComponents.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index 8344f9770..74ab788ba 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -243,7 +243,7 @@ function Illustration({
           src={src}
           alt={alt}
           style={{maxHeight: 300}}
-          className="bg-white rounded-lg"
+          className="rounded-lg"
         />
         {caption ? (
           <figcaption className="text-center leading-tight mt-4">
@@ -275,7 +275,12 @@ function IllustrationBlock({
   const images = imageInfos.map((info, index) => (
     <figure key={index}>
       <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
-        <img src={info.src} alt={info.alt} height={info.height} />
+        <img
+          className="text-primary"
+          src={info.src}
+          alt={info.alt}
+          height={info.height}
+        />
       </div>
       {info.caption ? (
         <figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">

From 42ca996138ba45775d0ba93128b3f2998d0828bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xuan=20Huang=20=28=E9=BB=84=E7=8E=84=29?= <huxpro@gmail.com>
Date: Tue, 7 Nov 2023 19:56:44 +0800
Subject: [PATCH 36/52] Captailize Server Action (#6417)

Summary of changes:
"Server Action", like "Effect", is a React-specific notion
that would be benefited from captailization to be distinguished
from its genertic meaning.

It seems like [Next doc](https://nextjs.org/docs/app/api-reference/functions/server-actions)
has also adopted such connventions and we should probably do the same.

Co-authored-by: xuan.huang <xuan.huang@bytedance.com>
---
 .../reference/react-dom/components/form.md    |  6 +--
 .../reference/react-dom/hooks/useFormState.md |  6 +--
 src/content/reference/react/use-client.md     |  4 +-
 src/content/reference/react/use-server.md     | 48 +++++++++----------
 4 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index dfffc74f5..25d1ba4e9 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -93,11 +93,11 @@ export default function Search() {
 
 ### Handle form submission with a Server Action {/*handle-form-submission-with-a-server-action*/}
 
-Render a `<form>` with an input and submit button. Pass a server action (a function marked with [`'use server'`](/reference/react/use-server)) to the `action` prop of form to run the function when the form is submitted.
+Render a `<form>` with an input and submit button. Pass a Server Action (a function marked with [`'use server'`](/reference/react/use-server)) to the `action` prop of form to run the function when the form is submitted.
 
-Passing a server action to `<form action>` allow users to submit forms without JavaScript enabled or before the code has loaded. This is beneficial to users who have a slow connection, device, or have JavaScript disabled and is similar to the way forms work when a URL is passed to the `action` prop.
+Passing a Server Action to `<form action>` allow users to submit forms without JavaScript enabled or before the code has loaded. This is beneficial to users who have a slow connection, device, or have JavaScript disabled and is similar to the way forms work when a URL is passed to the `action` prop.
 
-You can use hidden form fields to provide data to the `<form>`'s action. The server action will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+You can use hidden form fields to provide data to the `<form>`'s action. The Server Action will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
 
 ```jsx
 import { updateCart } from './lib.js';
diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md
index 53c73ae38..b2808079c 100644
--- a/src/content/reference/react-dom/hooks/useFormState.md
+++ b/src/content/reference/react-dom/hooks/useFormState.md
@@ -51,7 +51,7 @@ function StatefulForm({}) {
 
 The form state is the value returned by the action when the form was last submitted. If the form has not yet been submitted, it is the initial state that you pass.
 
-If used with a server action, `useFormState` allows the server's response from submitting the form to be shown even before hydration has completed.
+If used with a Server Action, `useFormState` allows the server's response from submitting the form to be shown even before hydration has completed.
 
 [See more examples below.](#usage)
 
@@ -117,7 +117,7 @@ function action(currentState, formData) {
 
 #### Display form errors {/*display-form-errors*/}
 
-To display messages such as an error message or toast that's returned by a server action, wrap the action in a call to `useFormState`.
+To display messages such as an error message or toast that's returned by a Server Action, wrap the action in a call to `useFormState`.
 
 <Sandpack>
 
@@ -190,7 +190,7 @@ form button {
 
 #### Display structured information after submitting a form {/*display-structured-information-after-submitting-a-form*/}
 
-The return value from a server action can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information.
+The return value from a Server Action can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information.
 
 <Sandpack>
 
diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md
index f4b90d288..be8bd0089 100644
--- a/src/content/reference/react/use-client.md
+++ b/src/content/reference/react/use-client.md
@@ -269,7 +269,7 @@ Serializable props include:
 	* [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) and [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
 * [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
 * Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object): those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties
-* Functions that are [server actions](/reference/react/use-server)
+* Functions that are [Server Actions](/reference/react/use-server)
 * Client or Server Component elements (JSX)
 * [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
 
@@ -376,4 +376,4 @@ These libraries may rely on component Hooks or client APIs. Third-party componen
 
 If these libraries have been updated to be compatible with React Server Components, then they will already include `'use client'` markers of their own, allowing you to use them directly from your Server Components. If a library hasn't been updated, or if a component needs props like event handlers that can only be specified on the client, you may need to add your own Client Component file in between the third-party Client Component and your Server Component where you'd like to use it.
 
-[TODO]: <> (Troubleshooting - need use-cases)
\ No newline at end of file
+[TODO]: <> (Troubleshooting - need use-cases)
diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md
index 69f5e1044..938efa903 100644
--- a/src/content/reference/react/use-server.md
+++ b/src/content/reference/react/use-server.md
@@ -25,7 +25,7 @@ canary: true
 
 ### `'use server'` {/*use-server*/}
 
-Add `'use server'` at the top of an async function body to mark the function as callable by the client. We call these functions _server actions_.
+Add `'use server'` at the top of an async function body to mark the function as callable by the client. We call these functions _Server Actions_.
 
 ```js {2}
 async function addToCart(data) {
@@ -34,28 +34,28 @@ async function addToCart(data) {
 }
 ```
 
-When calling a server action on the client, it will make a network request to the server that includes a serialized copy of any arguments passed. If the server action returns a value, that value will be serialized and returned to the client.
+When calling a Server Action on the client, it will make a network request to the server that includes a serialized copy of any arguments passed. If the Server Action returns a value, that value will be serialized and returned to the client.
 
-Instead of individually marking functions with `'use server'`, you can add the directive to the top of a file to mark all exports within that file as server actions that can be used anywhere, including imported in client code.
+Instead of individually marking functions with `'use server'`, you can add the directive to the top of a file to mark all exports within that file as Server Actions that can be used anywhere, including imported in client code.
 
 #### Caveats {/*caveats*/}
 * `'use server'` must be at the very beginning of their function or module; above any other code including imports (comments above directives are OK). They must be written with single or double quotes, not backticks.
-* `'use server'` can only be used in server-side files. The resulting server actions can be passed to Client Components through props. See supported [types for serialization](#serializable-parameters-and-return-values).
-* To import a server action from [client code](/reference/react/use-client), the directive must be used on a module level.
+* `'use server'` can only be used in server-side files. The resulting Server Actions can be passed to Client Components through props. See supported [types for serialization](#serializable-parameters-and-return-values).
+* To import a Server Action from [client code](/reference/react/use-client), the directive must be used on a module level.
 * Because the underlying network calls are always asynchronous, `'use server'` can only be used on async functions.
-* Always treat arguments to server actions as untrusted input and authorize any mutations. See [security considerations](#security).
-* Server actions should be called in a [transition](/reference/react/useTransition). Server actions passed to [`<form action>`](/reference/react-dom/components/form#props) or [`formAction`](/reference/react-dom/components/input#props) will automatically be called in a transition.
-* Server actions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing server actions typically process one action at a time and do not have a way to cache the return value.
+* Always treat arguments to Server Actions as untrusted input and authorize any mutations. See [security considerations](#security).
+* Server Actions should be called in a [transition](/reference/react/useTransition). Server Actions passed to [`<form action>`](/reference/react-dom/components/form#props) or [`formAction`](/reference/react-dom/components/input#props) will automatically be called in a transition.
+* Server Actions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing Server Actions typically process one action at a time and do not have a way to cache the return value.
 
 ### Security considerations {/*security*/}
 
-Arguments to server actions are fully client-controlled. For security, always treat them as untrusted input, and make sure to validate and escape arguments as appropriate.
+Arguments to Server Actions are fully client-controlled. For security, always treat them as untrusted input, and make sure to validate and escape arguments as appropriate.
 
-In any server action, make sure to validate that the logged-in user is allowed to perform that action.
+In any Server Action, make sure to validate that the logged-in user is allowed to perform that action.
 
 <Wip>
 
-To prevent sending sensitive data from a server action, there are experimental taint APIs to prevent unique values and objects from being passed to client code.
+To prevent sending sensitive data from a Server Action, there are experimental taint APIs to prevent unique values and objects from being passed to client code.
 
 See [experimental_taintUniqueValue](/reference/react/experimental_taintUniqueValue) and [experimental_taintObjectReference](/reference/react/experimental_taintObjectReference).
 
@@ -63,9 +63,9 @@ See [experimental_taintUniqueValue](/reference/react/experimental_taintUniqueVal
 
 ### Serializable arguments and return values {/*serializable-parameters-and-return-values*/}
 
-As client code calls the server action over the network, any arguments passed will need to be serializable.
+As client code calls the Server Action over the network, any arguments passed will need to be serializable.
 
-Here are supported types for server action arguments:
+Here are supported types for Server Action arguments:
 
 * Primitives
 	* [string](https://developer.mozilla.org/en-US/docs/Glossary/String)
@@ -84,12 +84,12 @@ Here are supported types for server action arguments:
 * [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
 * [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) instances
 * Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object): those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties
-* Functions that are server actions
+* Functions that are Server Actions
 * [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
 
 Notably, these are not supported:
 * React elements, or [JSX](https://react.dev/learn/writing-markup-with-jsx)
-* Functions, including component functions or any other function that is not a server action
+* Functions, including component functions or any other function that is not a Server Action
 * [Classes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)
 * Objects that are instances of any class (other than the built-ins mentioned) or objects with [a null prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)
 * Symbols not registered globally, ex. `Symbol('my new symbol')`
@@ -100,9 +100,9 @@ Supported serializable return values are the same as [serializable props](/refer
 
 ## Usage {/*usage*/}
 
-### Server actions in forms {/*server-actions-in-forms*/}
+### Server Actions in forms {/*server-actions-in-forms*/}
 
-The most common use case of server actions will be calling server functions that mutate data. On the browser, the [HTML form element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) is the traditional approach for a user to submit a mutation. With React Server Components, React introduces first-class support for server actions in [forms](/reference/react-dom/components/form).
+The most common use case of Server Actions will be calling server functions that mutate data. On the browser, the [HTML form element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) is the traditional approach for a user to submit a mutation. With React Server Components, React introduces first-class support for Server Actions in [forms](/reference/react-dom/components/form).
 
 Here is a form that allows a user to request a username.
 
@@ -123,15 +123,15 @@ export default App() {
 }
 ```
 
-In this example `requestUsername` is a server action passed to a `<form>`. When a user submits this form, there is a network request to the server function `requestUsername`. When calling a server action in a form, React will supply the form's <CodeStep step={1}>[FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)</CodeStep> as the first argument to the server action.
+In this example `requestUsername` is a Server Action passed to a `<form>`. When a user submits this form, there is a network request to the server function `requestUsername`. When calling a Server Action in a form, React will supply the form's <CodeStep step={1}>[FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)</CodeStep> as the first argument to the Server Action.
 
-By passing a server action to the form `action`, React can [progressively enhance](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement) the form. This means that forms can be submitted before the JavaScript bundle is loaded.
+By passing a Server Action to the form `action`, React can [progressively enhance](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement) the form. This means that forms can be submitted before the JavaScript bundle is loaded.
 
 #### Handling return values in forms {/*handling-return-values*/}
 
 In the username request form, there might be the chance that a username is not available. `requestUsername` should tell us if it fails or not.
 
-To update the UI based on the result of a server action while supporting progressive enhancement, use [`useFormState`](/reference/react-dom/hooks/useFormState).
+To update the UI based on the result of a Server Action while supporting progressive enhancement, use [`useFormState`](/reference/react-dom/hooks/useFormState).
 
 ```js
 // requestUsername.js
@@ -171,11 +171,11 @@ function UsernameForm() {
 
 Note that like most Hooks, `useFormState` can only be called in <CodeStep step={1}>[client code](/reference/react/use-client)</CodeStep>.
 
-### Calling a server action outside of `<form>` {/*calling-a-server-action-outside-of-form*/}
+### Calling a Server Action outside of `<form>` {/*calling-a-server-action-outside-of-form*/}
 
-Server actions are exposed server endpoints and can be called anywhere in client code.
+Server Actions are exposed server endpoints and can be called anywhere in client code.
 
-When using a server action outside of a [form](/reference/react-dom/components/form), call the server action in a [transition](/reference/react/useTransition), which allows you to display a loading indicator, show [optimistic state updates](/reference/react/useOptimistic), and handle unexpected errors. Forms will automatically wrap server actions in transitions.
+When using a Server Action outside of a [form](/reference/react-dom/components/form), call the Server Action in a [transition](/reference/react/useTransition), which allows you to display a loading indicator, show [optimistic state updates](/reference/react/useOptimistic), and handle unexpected errors. Forms will automatically wrap Server Actions in transitions.
 
 ```js {9-12}
 import incrementLike from './actions';
@@ -212,4 +212,4 @@ export default async incrementLike() {
 }
 ```
 
-To read a server action return value, you'll need to `await` the promise returned.
\ No newline at end of file
+To read a Server Action return value, you'll need to `await` the promise returned.

From 292e55de89ed813209c27a34291ea8e06bd306e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xuan=20Huang=20=28=E9=BB=84=E7=8E=84=29?= <huxpro@gmail.com>
Date: Tue, 7 Nov 2023 20:32:52 +0800
Subject: [PATCH 37/52] Capitalize Client/Server Component (#6418)

Summary of changes:
following <https://github.com/reactjs/react.dev/pull/6417>

Co-authored-by: xuan.huang <xuan.huang@bytedance.com>
---
 .../06/15/react-labs-what-we-have-been-working-on-june-2022.md | 2 +-
 src/content/reference/react/use.md                             | 2 +-
 src/content/reference/react/useId.md                           | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
index 938b75c4b..df864db10 100644
--- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
+++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
@@ -28,7 +28,7 @@ We’re working together with Vercel and Shopify to unify bundler support for sh
 
 ## Asset Loading {/*asset-loading*/}
 
-Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, server components, and more.
+Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, Server Components, and more.
 We’re looking at adding APIs to preload and load deduplicated external assets through React APIs that work in all React environments.
 
 We’re also looking at having these support Suspense so you can have images, CSS, and fonts that block display until they’re loaded but don’t block streaming and concurrent rendering. This can help avoid [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) as the visuals pop and layout shifts.
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index 8e1a8f213..b726e67db 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -334,7 +334,7 @@ When passing a Promise from a Server Component to a Client Component, its resolv
 
 #### Should I resolve a Promise in a Server or Client Component? {/*resolve-promise-in-server-or-client-component*/}
 
-A Promise can be passed from a Server Component to a Client Component and resolved in the Client component with the `use` Hook. You can also resolve the Promise in a Server Component with `await` and pass the required data to the Client Component as a prop.
+A Promise can be passed from a Server Component to a Client Component and resolved in the Client Component with the `use` Hook. You can also resolve the Promise in a Server Component with `await` and pass the required data to the Client Component as a prop.
 
 ```js
 export default function App() {
diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md
index 4ea029f27..96a5e25a2 100644
--- a/src/content/reference/react/useId.md
+++ b/src/content/reference/react/useId.md
@@ -179,7 +179,7 @@ You might be wondering why `useId` is better than incrementing a global variable
 
 The primary benefit of `useId` is that React ensures that it works with [server rendering.](/reference/react-dom/server) During server rendering, your components generate HTML output. Later, on the client, [hydration](/reference/react-dom/client/hydrateRoot) attaches your event handlers to the generated HTML. For hydration to work, the client output must match the server HTML.
 
-This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.
+This is very difficult to guarantee with an incrementing counter because the order in which the Client Components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.
 
 Inside React, `useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order.
 
@@ -302,4 +302,3 @@ input { margin: 5px; }
 ```
 
 </Sandpack>
-

From c5a2e15d58eeaa8f4952edc2d00cedb158e4b037 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xuan=20Huang=20=28=E9=BB=84=E7=8E=84=29?= <huxpro@gmail.com>
Date: Tue, 7 Nov 2023 20:50:57 +0800
Subject: [PATCH 38/52] Capitalize Client in "client modules" (#6419)

Summary of changes:
See <https://github.com/reactjs/react.dev/pull/6417>

Co-authored-by: xuan.huang <xuan.huang@bytedance.com>
---
 src/content/reference/react/use-client.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md
index be8bd0089..dedd2480a 100644
--- a/src/content/reference/react/use-client.md
+++ b/src/content/reference/react/use-client.md
@@ -51,14 +51,14 @@ As dependencies of `RichTextEditor`, `formatDate` and `Button` will also be eval
 * When a `'use client'` module is imported from another client-rendered module, the directive has no effect.
 * When a component module contains a `'use client'` directive, any usage of that component is guaranteed to be a Client Component. However, a component can still be evaluated on the client even if it does not have a `'use client'` directive.
 	* A component usage is considered a Client Component if it is defined in module with `'use client'` directive or when it is a transitive dependency of a module that contains a `'use client'` directive. Otherwise, it is a Server Component.
-* Code that is marked for client evaluation is not limited to components. All code that is a part of the client module sub-tree is sent to and run by the client.
+* Code that is marked for client evaluation is not limited to components. All code that is a part of the Client module sub-tree is sent to and run by the client.
 * When a server evaluated module imports values from a `'use client'` module, the values must either be a React component or [supported serializable prop values](#passing-props-from-server-to-client-components) to be passed to a Client Component. Any other use case will throw an exception.
 
 ### How `'use client'` marks client code {/*how-use-client-marks-client-code*/}
 
 In a React app, components are often split into separate files, or [modules](/learn/importing-and-exporting-components#exporting-and-importing-a-component).
 
-For apps that use React Server Components, the app is server-rendered by default. `'use client'` introduces a server-client boundary in the [module dependency tree](/learn/understanding-your-ui-as-a-tree#the-module-dependency-tree), effectively creating a subtree of client modules.
+For apps that use React Server Components, the app is server-rendered by default. `'use client'` introduces a server-client boundary in the [module dependency tree](/learn/understanding-your-ui-as-a-tree#the-module-dependency-tree), effectively creating a subtree of Client modules.
 
 To better illustrate this, consider the following React Server Components app.
 
@@ -145,7 +145,7 @@ export default [
 
 </Sandpack>
 
-In the module dependency tree of this example app, the `'use client'` directive in `InspirationGenerator.js` marks that module and all of its transitive dependencies as client modules. The subtree starting at `InspirationGenerator.js` is now marked as client modules.
+In the module dependency tree of this example app, the `'use client'` directive in `InspirationGenerator.js` marks that module and all of its transitive dependencies as Client modules. The subtree starting at `InspirationGenerator.js` is now marked as Client modules.
 
 <Diagram name="use_client_module_dependency" height={250} width={545} alt="A tree graph with the top node representing the module 'App.js'. 'App.js' has three children: 'Copyright.js', 'FancyText.js', and 'InspirationGenerator.js'. 'InspirationGenerator.js' has two children: 'FancyText.js' and 'inspirations.js'. The nodes under and including 'InspirationGenerator.js' have a yellow background color to signify that this sub-graph is client-rendered due to the 'use client' directive in 'InspirationGenerator.js'.">
 `'use client'` segments the module dependency tree of the React Server Components app, marking `InspirationGenerator.js` and all of its dependencies as client-rendered.
@@ -237,7 +237,7 @@ With `'use client'`, you can determine when components are Client Components. As
 For simplicity, we talk about Server Components, but the same principles apply to all code in your app that is server run.
 
 #### Advantages of Server Components {/*advantages*/}
-* Server Components can reduce the amount of code sent and run by the client. Only client modules are bundled and evaluated by the client.
+* Server Components can reduce the amount of code sent and run by the client. Only Client modules are bundled and evaluated by the client.
 * Server Components benefit from running on the server. They can access the local filesystem and may experience low latency for data fetches and network requests.
 
 #### Limitations of Server Components {/*limitations*/}

From 721479b34668cb1bdfe2e312a86c04f08cd5d659 Mon Sep 17 00:00:00 2001
From: Kathryn Middleton <kmiddleton14@gmail.com>
Date: Tue, 7 Nov 2023 09:36:55 -0500
Subject: [PATCH 39/52] Check for value before passing to gtag (#6415)

---
 src/components/Layout/Feedback.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 86fc91350..b36112c47 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -45,13 +45,14 @@ const thumbsDownIcon = (
 );
 
 function sendGAEvent(isPositive: boolean) {
+  const value = isPositive ? 1 : 0;
   // Fragile. Don't change unless you've tested the network payload
   // and verified that the right events actually show up in GA.
   // @ts-ignore
   gtag('event', 'feedback', {
     event_category: 'button',
     event_label: window.location.pathname,
-    value: isPositive ? 1 : 0,
+    value,
   });
 }
 

From eeb0979c3c41870530b08e7d46780655ccfc8580 Mon Sep 17 00:00:00 2001
From: Kathryn Middleton <kmiddleton14@gmail.com>
Date: Wed, 8 Nov 2023 11:40:02 -0500
Subject: [PATCH 40/52] Update event label and value name (#6421)

---
 src/components/Layout/Feedback.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index b36112c47..8639ce12c 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -45,14 +45,15 @@ const thumbsDownIcon = (
 );
 
 function sendGAEvent(isPositive: boolean) {
+  const category = isPositive ? 'like_button' : 'dislike_button';
   const value = isPositive ? 1 : 0;
   // Fragile. Don't change unless you've tested the network payload
   // and verified that the right events actually show up in GA.
   // @ts-ignore
   gtag('event', 'feedback', {
-    event_category: 'button',
+    event_category: category,
     event_label: window.location.pathname,
-    value,
+    event_value: value,
   });
 }
 

From 49ebed1b5bc753b9584ea137943ab22985f3bfe3 Mon Sep 17 00:00:00 2001
From: Kathryn Middleton <kmiddleton14@gmail.com>
Date: Wed, 8 Nov 2023 13:08:58 -0500
Subject: [PATCH 41/52] Fix useOptimistic demo bug (#6422)

---
 src/content/reference/react/useOptimistic.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md
index d0511b1a9..47593a0ae 100644
--- a/src/content/reference/react/useOptimistic.md
+++ b/src/content/reference/react/useOptimistic.md
@@ -116,7 +116,7 @@ export default function App() {
   ]);
   async function sendMessage(formData) {
     const sentMessage = await deliverMessage(formData.get("message"));
-    setMessages([...messages, { text: sentMessage }]);
+    setMessages((messages) => [...messages, { text: sentMessage }]);
   }
   return <Thread messages={messages} sendMessage={sendMessage} />;
 }

From 44f442d5b201c633619c1c9a5fec784891c696ae Mon Sep 17 00:00:00 2001
From: Luna <lunaleaps@gmail.com>
Date: Wed, 8 Nov 2023 19:55:40 -0400
Subject: [PATCH 42/52] Add space for canary title (#6416)

Co-authored-by: Luna Wei <luwe@fb.com>
---
 src/components/Layout/Sidebar/SidebarLink.tsx | 2 +-
 src/components/PageHeading.tsx                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx
index 180ded867..8a71d9e6e 100644
--- a/src/components/Layout/Sidebar/SidebarLink.tsx
+++ b/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -77,7 +77,7 @@ export function SidebarLink({
         {title}{' '}
         {canary && (
           <IconCanary
-            title="This feature is available in the latest Canary"
+            title=" - This feature is available in the latest Canary"
             className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
           />
         )}
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx
index 076a38be9..659295d0a 100644
--- a/src/components/PageHeading.tsx
+++ b/src/components/PageHeading.tsx
@@ -34,7 +34,7 @@ function PageHeading({
           {title}
           {canary && (
             <IconCanary
-              title="This feature is available in the latest Canary"
+              title=" - This feature is available in the latest Canary"
               className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
             />
           )}

From fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xuan=20Huang=20=28=E9=BB=84=E7=8E=84=29?= <huxpro@gmail.com>
Date: Fri, 10 Nov 2023 21:57:45 +0800
Subject: [PATCH 43/52] Capitalize word "Hook" (#6424)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary of changes:
See <https://github.com/reactjs/react.dev/pull/6417>.

There is one exception though. The error message
“Rendered fewer hooks than expected” from React is indeed "hooks"
so I kept as-is. Shall we change the error message from React?

Co-authored-by: xuan.huang <xuan.huang@bytedance.com>
---
 .../blog/2022/03/08/react-18-upgrade-guide.md |  4 ++--
 src/content/blog/2022/03/29/react-v18.md      | 11 +++++-----
 ...-what-we-have-been-working-on-june-2022.md |  2 +-
 ...what-we-have-been-working-on-march-2023.md |  2 +-
 src/content/learn/typescript.md               | 20 +++++++++----------
 src/content/reference/react/use-client.md     |  2 +-
 6 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/content/blog/2022/03/08/react-18-upgrade-guide.md b/src/content/blog/2022/03/08/react-18-upgrade-guide.md
index 29ba0b71d..66da896ec 100644
--- a/src/content/blog/2022/03/08/react-18-upgrade-guide.md
+++ b/src/content/blog/2022/03/08/react-18-upgrade-guide.md
@@ -224,8 +224,8 @@ For more information, see the [Automatic batching deep dive](https://github.com/
 
 In the React 18 Working Group we worked with library maintainers to create new APIs needed to support concurrent rendering for use cases specific to their use case in areas like styles, and external stores. To support React 18, some libraries may need to switch to one of the following APIs:
 
-* `useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86).
-* `useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `<style>`](https://github.com/reactwg/react-18/discussions/110).
+* `useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86).
+* `useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `<style>`](https://github.com/reactwg/react-18/discussions/110).
 
 React 18 also introduces new APIs for concurrent rendering such as `startTransition`, `useDeferredValue` and `useId`, which we share more about in the [release post](/blog/2022/03/29/react-v18).
 
diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md
index b390ce941..743404c1a 100644
--- a/src/content/blog/2022/03/29/react-v18.md
+++ b/src/content/blog/2022/03/29/react-v18.md
@@ -139,8 +139,8 @@ startTransition(() => {
 Updates wrapped in startTransition are handled as non-urgent and will be interrupted if more urgent updates like clicks or key presses come in. If a transition gets interrupted by the user (for example, by typing multiple characters in a row), React will throw out the stale rendering work that wasn’t finished and render only the latest update.
 
 
-* `useTransition`: a hook to start transitions, including a value to track the pending state.
-* `startTransition`: a method to start transitions when the hook cannot be used.
+* `useTransition`: a Hook to start transitions, including a value to track the pending state.
+* `startTransition`: a method to start transitions when the Hook cannot be used.
 
 Transitions will opt in to concurrent rendering, which allows the update to be interrupted. If the content re-suspends, transitions also tell React to continue showing the current content while rendering the transition content in the background (see the [Suspense RFC](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) for more info).
 
@@ -229,7 +229,7 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the
 
 #### useId {/*useid*/}
 
-`useId` is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/reference/react/useId).
+`useId` is a new Hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/reference/react/useId).
 
 > Note
 >
@@ -245,7 +245,7 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the
 
 #### useSyncExternalStore {/*usesyncexternalstore*/}
 
-`useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/reference/react/useSyncExternalStore).
+`useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/reference/react/useSyncExternalStore).
 
 > Note
 >
@@ -253,7 +253,7 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the
 
 #### useInsertionEffect {/*useinsertioneffect*/}
 
-`useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. [See docs here](/reference/react/useInsertionEffect).
+`useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. [See docs here](/reference/react/useInsertionEffect).
 
 > Note
 >
@@ -339,4 +339,3 @@ See [How to Upgrade to React 18](/blog/2022/03/08/react-18-upgrade-guide) for st
 * Update webpack plugin for webpack 5 ([#22739](https://github.com/facebook/react/pull/22739)  by [@michenly](https://github.com/michenly))
 * Fix a mistake in the Node loader. ([#22537](https://github.com/facebook/react/pull/22537)  by [@btea](https://github.com/btea))
 * Use `globalThis` instead of `window` for edge environments. ([#22777](https://github.com/facebook/react/pull/22777)  by [@huozhi](https://github.com/huozhi))
-
diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
index df864db10..45026912c 100644
--- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
+++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
@@ -41,7 +41,7 @@ Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are great
 
 We gave an [early preview](https://www.youtube.com/watch?v=lGEMwh32soc) of React Forget at React Conf 2021. It’s a compiler that automatically generates the equivalent of `useMemo` and `useCallback` calls to minimize the cost of re-rendering, while retaining React’s programming model.
 
-Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization hooks.
+Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of [local mutations](/learn/keeping-components-pure#local-mutation-your-components-little-secret), and opens up many new compile-time optimization opportunities beyond just being on par with memoization Hooks.
 
 We’re also working on a playground for exploring many aspects of the compiler. While the goal of the playground is to make development of the compiler easier, we think that it will make it easier to try it out and build intuition for what the compiler does. It reveals various insights into how it works under the hood, and live renders the compiler’s outputs as you type. This will be shipped together with the compiler when it’s released.
 
diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
index 5071af6ec..d232dda37 100644
--- a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
+++ b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
@@ -24,7 +24,7 @@ RSC combines the simple "request/response" mental model of server-centric Multi-
 
 Since our last update, we have merged the [React Server Components RFC](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) to ratify the proposal. We resolved outstanding issues with the [React Server Module Conventions](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md) proposal, and reached consensus with our partners to go with the `"use client"` convention. These documents also act as specification for what an RSC-compatible implementation should support.
 
-The biggest change is that we introduced [`async` / `await`](https://github.com/reactjs/rfcs/pull/229) as the primary way to do data fetching from Server Components. We also plan to support data loading from the client by introducing a new hook called `use` that unwraps Promises. Although we can't support `async / await` in arbitrary components in client-only apps, we plan to add support for it when you structure your client-only app similar to how RSC apps are structured.
+The biggest change is that we introduced [`async` / `await`](https://github.com/reactjs/rfcs/pull/229) as the primary way to do data fetching from Server Components. We also plan to support data loading from the client by introducing a new Hook called `use` that unwraps Promises. Although we can't support `async / await` in arbitrary components in client-only apps, we plan to add support for it when you structure your client-only app similar to how RSC apps are structured.
 
 Now that we have data fetching pretty well sorted, we're exploring the other direction: sending data from the client to the server, so that you can execute database mutations and implement forms. We're doing this by letting you pass Server Action functions across the server/client boundary, which the client can then call, providing seamless RPC. Server Actions also give you progressively enhanced forms before JavaScript loads.
 
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index 727974b1c..04c0efc17 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -12,7 +12,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. Out
 <YouWillLearn>
 
 * [TypeScript with React Components](/learn/typescript#typescript-with-react-components)
-* [Examples of typing with hooks](/learn/typescript#example-hooks)
+* [Examples of typing with Hooks](/learn/typescript#example-hooks)
 * [Common types from `@types/react`](/learn/typescript/#useful-types)
 * [Further learning locations](/learn/typescript/#further-learning)
 
@@ -124,13 +124,13 @@ The type describing your component's props can be as simple or as complex as you
 
 ## Example Hooks {/*example-hooks*/}
 
-The type definitions from `@types/react` include types for the built-in hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types. 
+The type definitions from `@types/react` include types for the built-in Hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types. 
 
-However, we can look at a few examples of how to provide types for hooks.
+However, we can look at a few examples of how to provide types for Hooks.
 
 ### `useState` {/*typing-usestate*/}
 
-The [`useState` hook](/reference/react/useState) will re-use the value passed in as the initial state to determine what the type of the value should be. For example:
+The [`useState` Hook](/reference/react/useState) will re-use the value passed in as the initial state to determine what the type of the value should be. For example:
 
 ```ts
 // Infer the type as "boolean"
@@ -166,7 +166,7 @@ const [requestState, setRequestState] = useState<RequestState>({ status: 'idle'
 
 ### `useReducer` {/*typing-usereducer*/}
 
-The [`useReducer` hook](/reference/react/useReducer) is a more complex hook that takes a reducer function and an initial state. The types for the reducer function are inferred from the initial state. You can optionally provide a type argument to the `useReducer` call to provide a type for the state, but it is often better to set the type on the initial state instead:
+The [`useReducer` Hook](/reference/react/useReducer) is a more complex Hook that takes a reducer function and an initial state. The types for the reducer function are inferred from the initial state. You can optionally provide a type argument to the `useReducer` call to provide a type for the state, but it is often better to set the type on the initial state instead:
 
 <Sandpack>
 
@@ -242,7 +242,7 @@ export default function App() {
 
 ### `useContext` {/*typing-usecontext*/}
 
-The [`useContext` hook](/reference/react/useContext) is a technique for passing data down the component tree without having to pass props through components. It is used by creating a provider component and often by creating a hook to consume the value in a child component.
+The [`useContext` Hook](/reference/react/useContext) is a technique for passing data down the component tree without having to pass props through components. It is used by creating a provider component and often by creating a Hook to consume the value in a child component.
 
 The type of the value provided by the context is inferred from the value passed to the `createContext` call:
 
@@ -286,7 +286,7 @@ export default App = AppTSX;
 
 This technique works when you have a default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. 
 
-This causes the issue that you need to eliminate the `| null` in the type for context consumers. Our recommendation is to have the hook do a runtime check for it's existence and throw an error when not present:
+This causes the issue that you need to eliminate the `| null` in the type for context consumers. Our recommendation is to have the Hook do a runtime check for it's existence and throw an error when not present:
 
 ```js {5, 16-20}
 import { createContext, useContext, useState, useMemo } from 'react';
@@ -299,7 +299,7 @@ type ComplexObject = {
 // The context is created with `| null` in the type, to accurately reflect the default value.
 const Context = createContext<ComplexObject | null>(null);
 
-// The `| null` will be removed via the check in the hook.
+// The `| null` will be removed via the check in the Hook.
 const useGetComplexObject = () => {
   const object = useContext(Context);
   if (!object) { throw new Error("useGetComplexObject must be used within a Provider") }
@@ -329,7 +329,7 @@ function MyComponent() {
 
 ### `useMemo` {/*typing-usememo*/}
 
-The [`useMemo`](/reference/react/useMemo) hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the hook.
+The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook.
 
 ```ts
 // The type of visibleTodos is inferred from the return value of filterTodos
@@ -339,7 +339,7 @@ const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
 
 ### `useCallback` {/*typing-usecallback*/}
 
-The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the hook.
+The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the Hook.
 
 
 ```ts
diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md
index dedd2480a..98c45d3d0 100644
--- a/src/content/reference/react/use-client.md
+++ b/src/content/reference/react/use-client.md
@@ -307,7 +307,7 @@ export default function Counter({initialValue = 0}) {
 
 </Sandpack>
 
-As `Counter` requires both the `useState` hook and event handlers to increment or decrement the value, this component must be a Client Component and will require a `'use client'` directive at the top.
+As `Counter` requires both the `useState` Hook and event handlers to increment or decrement the value, this component must be a Client Component and will require a `'use client'` directive at the top.
 
 In contrast, a component that renders UI without interaction will not need to be a Client Component.
 

From ce8e86d7b52832ee5116d87ffb3177112a7d098e Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulbaset@gmail.com>
Date: Sun, 24 Dec 2023 22:35:23 +0200
Subject: [PATCH 44/52] Update meetups.md with new links

---
 src/content/community/meetups.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index e21b078ba..28423a17d 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -53,12 +53,10 @@ permalink: community/meetups.html
 ## الصين {/*china*/}
 ** [بكين](https://www.meetup.com/Beijing-ReactJS-Meetup/)
 
-<<<<<<< HEAD
 ## كولومبيا {/*colombia*/}
 ** [بوغوتا](https://www.meetup.com/meetup-group-iHIeHykY/)
 * [ميديلين](https://www.meetup.com/React-Medellin/)
 * [كالي](https://www.meetup.com/reactcali/)
-=======
 ## Canada {/*canada*/}
 * [Halifax, NS](https://www.meetup.com/Halifax-ReactJS-Meetup/)
 * [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
@@ -66,7 +64,6 @@ permalink: community/meetups.html
 * [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
 * [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)
 * [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc
 
 ## الدنمارك {/*denmark*/}
 * 

From ee29f08527576cb81955d500852f7fb64753f482 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulbaset@gmail.com>
Date: Sun, 24 Dec 2023 22:35:36 +0200
Subject: [PATCH 45/52] Update UI descriptions

---
 src/content/learn/describing-the-ui.md | 41 ++++++++------------------
 1 file changed, 13 insertions(+), 28 deletions(-)

diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index d55bb281a..618de344a 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -19,17 +19,7 @@ title: وصف واجهات المستخدم (UI)
 * [(Conditional rendering) كيفية تصيير المكونات بشكل شرطي](/learn/conditional-rendering)
 * [كيفية تصيير أكثر من مكون مرة واحدة](/learn/rendering-lists)
 * [كيفية تجنب الثغرات المحيرة عن طريق الحفاظ على المكونات نقية](/learn/keeping-components-pure)
-=======
-* [How to write your first React component](/learn/your-first-component)
-* [When and how to create multi-component files](/learn/importing-and-exporting-components)
-* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx)
-* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces)
-* [How to configure components with props](/learn/passing-props-to-a-component)
-* [How to conditionally render components](/learn/conditional-rendering)
-* [How to render multiple components at a time](/learn/rendering-lists)
-* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure)
-* [Why understanding your UI as trees is useful](/learn/understanding-your-ui-as-a-tree)
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc
+* [لماذا يعد التعرف على واجهتك كشجرة مفيدًا](/learn/understanding-your-ui-as-a-tree)
 
 </YouWillLearn>
 
@@ -534,42 +524,37 @@ export default function TeaSet() {
 
 </LearnMore>
 
-<<<<<<< HEAD
-## ماذا بعد ذلك؟ {/*whats-next*/}
-=======
-## Your UI as a tree {/*your-ui-as-a-tree*/}
+## واجهتك مثل الشجرة {/*your-ui-as-a-tree*/}
 
-React uses trees to model the relationships between components and modules. 
+React تستخدم الأشجار لنمذجة العلاقات بين العناصر والوحدات.
 
-A React render tree is a representation of the parent and child relationship between components. 
+شجرة العرض في React هي تمثيل للعلاقة الأبوية والفرعية بين العناصر.
 
-<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">
+<Diagram name="generic_render_tree" height={250} width={500} alt="رسم بياني لشجرة تحتوي على خمسة عقد، حيث يمثل كل عقد عنصرًا. يقع العقد الجذري في الجزء العلوي من الشجرة ومسمى 'Root Component'. يحتوي على سهمين يمتدان إلى عقدين مسمين 'Component A' و 'Component C'. كل من السهمين مسمى بـ 'يقوم بعرض'. 'Component A' لديه سهم 'يقوم بعرض' واحد يشير إلى عقد مسمى 'Component B'. 'Component C' لديه سهم 'يقوم بعرض' واحد يشير إلى عقد مسمى 'Component D'.">
 
-An example React render tree.
+مثال على شجرة العرض في React.
 
 </Diagram>
 
-Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
+العناصر القريبة من الجزء العلوي من الشجرة، بجوار العنصر الجذري، تُعتبر عناصرًا على مستوى عالٍ. العناصر التي ليس لديها عناصر فرعية تُعتبر عناصر أوراق. هذا التصنيف للعناصر مفيد لفهم تدفق البيانات وأداء العرض.
 
-Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. 
+نمذجة العلاقة بين وحدات JavaScript هي طريقة مفيدة أخرى لفهم تطبيقك. نشير إليها باسم شجرة الاعتماد على الوحدة.
 
-<Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">
+<Diagram name="generic_dependency_tree" height={250} width={500} alt="رسم بياني لشجرة تحتوي على خمسة عقد. يُمثل كل عقد وحدة JavaScript. العقد الأعلى مسمى 'RootModule.js'. يمتلك ثلاثة أسهم تمتد إلى العقد: 'ModuleA.js'، 'ModuleB.js'، و 'ModuleC.js'. كل سهم مسمى بـ 'يستورد'. العقد 'ModuleC.js' يحتوي على سهم 'يستورد' واحد يشير إلى عقد مسمى 'ModuleD.js'.">
 
-An example module dependency tree.
+مثال على شجرة اعتماد الوحدة.
 
 </Diagram>
 
-A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. 
+غالبًا ما يُستخدم شجرة الاعتماد من قِبل أدوات البناء لربط جميع أكواد JavaScript ذات الصلة ليتم تنزيلها وعرضها للعميل. حجم الحزمة الكبير يُسبب تراجعًا في تجربة المستخدم لتطبيقات React. فهم شجرة اعتماد الوحدة مفيد لتصحيح مثل هذه المشاكل.
 
 <LearnMore path="/learn/understanding-your-ui-as-a-tree">
 
-Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
+اقرأ **[واجهاتك مثل الشجرة](/learn/understanding-your-ui-as-a-tree)** لتعرف كيفية إنشاء شجرة عرض وشجرة اعتماد الوحدة لتطبيق React وكيفية فائدتها كنماذج عقلية مفيدة لتحسين تجربة المستخدم والأداء.
 
 </LearnMore>
 
-
-## What's next? {/*whats-next*/}
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc
+## ماذا بعد ذلك؟ {/*whats-next*/}
 
 توجه إلى [المكون الأول الخاص بك](/learn/your-first-component) لبدء قراءة هذا الفصل صفحة بصفحة!
 

From 42ca516598d7fbe46b823ea96f35aadf71665147 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulbaset@gmail.com>
Date: Sun, 24 Dec 2023 23:09:09 +0200
Subject: [PATCH 46/52] Fix sidebarReference.json conflict

---
 src/sidebarReference.json | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index b056fbe75..2b1b2ccab 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -171,9 +171,6 @@
       "sectionHeader": "react-dom@18.2.0"
     },
     {
-<<<<<<< HEAD
-      "title": "المكونات",
-=======
       "title": "Hooks",
       "path": "/reference/react-dom/hooks",
       "routes": [
@@ -190,8 +187,7 @@
       ]
     },
     {
-      "title": "Components",
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc
+      "title": "المكونات",
       "path": "/reference/react-dom/components",
       "routes": [
         {

From 61a17d45022c7da5c90ce372f7b145cd19b91563 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulbaset@gmail.com>
Date: Sun, 24 Dec 2023 23:09:55 +0200
Subject: [PATCH 47/52] ..

---
 src/content/community/meetups.md | 384 ++++++++++++++++---------------
 1 file changed, 195 insertions(+), 189 deletions(-)

diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index 28423a17d..e69894f1f 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -1,62 +1,48 @@
 ---
-id: meetups
-title: المُلْتَقَيات حول العالم
-layout: community
-sectionid: community
-permalink: community/meetups.html
+title: React Meetups
 ---
 
-هل لديك مُلْتَقى React.js محلي؟ أضفه هنا!(يرجى الحفاظ على ترتيب القائمة أبجديًا)
-
-## ألبانيا {/*albania*/}
-** [تيرانا](https://www.meetup.com/React-User-Group-Albania/)
-
-## الأرجنتين {/*argentina*/}
-** [بوينس آيرس](https://www.meetup.com/es/React-en-Buenos-Aires)
-* [روزاريو](https://www.meetup.com/es/reactrosario)
-
-## أستراليا {/*australia*/}
-** [بريسبان](https://www.meetup.com/reactbris/)
-* [ملبورن](https://www.meetup.com/React-Melbourne/)
-* [سيدني](https://www.meetup.com/React-Sydney/)
-
-## النمسا {/*austria*/}
-** [فيينا](https://www.meetup.com/Vienna-ReactJS-Meetup/)
-
-## بلجيكا {/*belgium*/}
-** [بلجيكا](https://www.meetup.com/ReactJS-Belgium/)
-
-## البرازيل {/*brazil*/}
-** [بيلو هوريزونتي](https://www.meetup.com/reactbh/)
-* [كوريتيبا](https://www.meetup.com/pt-br/ReactJS-CWB/)
-* [فلوريانوبوليس](https://www.meetup.com/pt-br/ReactJS-Floripa/)
-* [جويانيا](https://www.meetup.com/pt-br/React-Goiania/)
-* [انضمام فيل](https://www.meetup.com/pt-BR/React-Joinville/)
-* [جويز دي فورا](https://www.meetup.com/pt-br/React-Juiz-de-Fora/)
-* [مارينجا](https://www.meetup.com/pt-BR/React-Maringa/)
-* [بورتو أليغري](https://www.meetup.com/pt-BR/React-Porto-Alegre/)
-* [ريو دي جانيرو](https://www.meetup.com/pt-BR/React-Rio-de-Janeiro/)
-* [سلفادور](https://www.meetup.com/pt-BR/ReactSSA)
-* [ساو باولو](https://www.meetup.com/pt-BR/ReactJS-SP/)
-* [فيلا فيلها](https://www.meetup.com/pt-BR/React-ES/)
-
-## بوليفيا {/*bolivia*/}
-** [بوليفيا](https://www.meetup.com/ReactBolivia/)
-
-## كندا {/*canada*/}
-** [هاليفاكس ، NS](https://www.meetup.com/Halifax-ReactJS-Meetup/)
-* [Montreal، QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
-* [فانكوفر ، كولومبيا البريطانية](https://www.meetup.com/ReactJS-Vancover-Meetup/)
-* [أوتاوا ، أونتاريو](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
-* [تورونتو ، ON](https://www.meetup.com/Toronto-React-Native/events/)
-
-## الصين {/*china*/}
-** [بكين](https://www.meetup.com/Beijing-ReactJS-Meetup/)
-
-## كولومبيا {/*colombia*/}
-** [بوغوتا](https://www.meetup.com/meetup-group-iHIeHykY/)
-* [ميديلين](https://www.meetup.com/React-Medellin/)
-* [كالي](https://www.meetup.com/reactcali/)
+<Intro>
+
+Do you have a local React.js meetup? Add it here! (Please keep the list alphabetical)
+
+</Intro>
+
+## Albania {/*albania*/}
+* [Tirana](https://www.meetup.com/React-User-Group-Albania/)
+
+## Argentina {/*argentina*/}
+* [Buenos Aires](https://www.meetup.com/es/React-en-Buenos-Aires)
+* [Rosario](https://www.meetup.com/es/reactrosario)
+
+## Australia {/*australia*/}
+* [Brisbane](https://www.meetup.com/reactbris/)
+* [Melbourne](https://www.meetup.com/React-Melbourne/)
+* [Sydney](https://www.meetup.com/React-Sydney/)
+
+## Austria {/*austria*/}
+* [Vienna](https://www.meetup.com/Vienna-ReactJS-Meetup/)
+
+## Belgium {/*belgium*/}
+* [Belgium](https://www.meetup.com/ReactJS-Belgium/)
+
+## Brazil {/*brazil*/}
+* [Belo Horizonte](https://www.meetup.com/reactbh/)
+* [Curitiba](https://www.meetup.com/pt-br/ReactJS-CWB/)
+* [Florianópolis](https://www.meetup.com/pt-br/ReactJS-Floripa/)
+* [Goiânia](https://www.meetup.com/pt-br/React-Goiania/)
+* [Joinville](https://www.meetup.com/pt-BR/React-Joinville/)
+* [Juiz de Fora](https://www.meetup.com/pt-br/React-Juiz-de-Fora/)
+* [Maringá](https://www.meetup.com/pt-BR/React-Maringa/)
+* [Porto Alegre](https://www.meetup.com/pt-BR/React-Porto-Alegre/)
+* [Rio de Janeiro](https://www.meetup.com/pt-BR/React-Rio-de-Janeiro/)
+* [Salvador](https://www.meetup.com/pt-BR/ReactSSA)
+* [São Paulo](https://www.meetup.com/pt-BR/ReactJS-SP/)
+* [Vila Velha](https://www.meetup.com/pt-BR/React-ES/)
+
+## Bolivia {/*bolivia*/}
+* [Bolivia](https://www.meetup.com/ReactBolivia/)
+
 ## Canada {/*canada*/}
 * [Halifax, NS](https://www.meetup.com/Halifax-ReactJS-Meetup/)
 * [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
@@ -65,37 +51,49 @@ permalink: community/meetups.html
 * [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)
 * [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)
 
-## الدنمارك {/*denmark*/}
-* 
+## Chile {/*chile*/}
+* [Santiago](https://www.meetup.com/es-ES/react-santiago/)
 
-* [البورك](https://www.meetup.com/Aalborg-React-React-Native-Meetup/)
-* [آرهوس](https://www.meetup.com/Aarhus-ReactJS-Meetup/)
+## China {/*china*/}
+* [Beijing](https://www.meetup.com/Beijing-ReactJS-Meetup/)
 
-## إنجلترا (المملكة المتحدة) {/*england-uk*/}
-** [مانشستر](https://www.meetup.com/Manchester-React-User-Group/)
-* [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/)
+## Colombia {/*colombia*/}
+* [Bogotá](https://www.meetup.com/meetup-group-iHIeHykY/)
+* [Medellin](https://www.meetup.com/React-Medellin/)
+* [Cali](https://www.meetup.com/reactcali/)
 
-## فرنسا {/*france*/}
-* [نانت](https://www.meetup.com/React-Nantes/)
-* [ليل](https://www.meetup.com/ReactBeerLille/)
-* [باريس](https://www.meetup.com/ReactJS-Paris/)
+## Denmark {/*denmark*/}
+* [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/)
+* [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/)
+
+## Egypt {/*egypt*/}
+* [Cairo](https://www.meetup.com/react-cairo/)
+
+## England (UK) {/*england-uk*/}
+* [Manchester](https://www.meetup.com/Manchester-React-User-Group/)
+* [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/)
+* [React London : Bring Your Own Project](https://www.meetup.com/React-London-Bring-Your-Own-Project/)
 
-## ألمانيا {/*germany*/}
-** [كولونيا](https://www.meetup.com/React-Cologne/)
-* [دوسلدورف](https://www.meetup.com/de-DE/ReactJS-Meetup-Dusseldorf/)
-* [هامبورغ](https://www.meetup.com/Hamburg-React-js-Meetup/)
-* [كارلسروه](https://www.meetup.com/react_ka/)
-* [كيل](https://www.meetup.com/Kiel-React-Native-Meetup/)
-* [ميونخ](https://www.meetup.com/ReactJS-Meetup-Munich/)
-* [رد برلين](https://www.meetup.com/React-Open-Source/)
+## France {/*france*/}
+* [Nantes](https://www.meetup.com/React-Nantes/)
+* [Lille](https://www.meetup.com/ReactBeerLille/)
+* [Paris](https://www.meetup.com/ReactJS-Paris/)
 
-## اليونان {/*greece*/}
-** [أثينا](https://www.meetup.com/React-To-React-Athens-MeetUp/)
-* [ثيسالونيكي](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/)
+## Germany {/*germany*/}
+* [Cologne](https://www.meetup.com/React-Cologne/)
+* [Düsseldorf](https://www.meetup.com/de-DE/ReactJS-Meetup-Dusseldorf/)
+* [Hamburg](https://www.meetup.com/Hamburg-React-js-Meetup/)
+* [Karlsruhe](https://www.meetup.com/react_ka/)
+* [Kiel](https://www.meetup.com/Kiel-React-Native-Meetup/)
+* [Munich](https://www.meetup.com/ReactJS-Meetup-Munich/)
+* [React Berlin](https://www.meetup.com/React-Open-Source/)
 
-## المجر {/*hungary*/}
-** [بودابست](https://www.meetup.com/React-Budestival/)
+## Greece {/*greece*/}
+* [Athens](https://www.meetup.com/React-To-React-Athens-MeetUp/)
+* [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/)
 
+## Hungary {/*hungary*/}
+* [Budapest](https://www.meetup.com/React-Budapest/)
 
 ## India {/*india*/}
 * [Ahmedabad](https://www.meetup.com/react-ahmedabad/)
@@ -103,114 +101,122 @@ permalink: community/meetups.html
 * [Bangalore (React Native)](https://www.meetup.com/React-Native-Bangalore-Meetup)
 * [Chennai](https://www.meetup.com/React-Chennai/)
 * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
+* [Mumbai](https://reactmumbai.dev)
 * [Pune](https://www.meetup.com/ReactJS-and-Friends/)
 
-## إندونيسيا {/*indonesia*/}
-** [إندونيسيا](https://www.meetup.com/reactindonesia/)
-
-## أيرلندا {/*ireland*/}
-** [دبلن](https://www.meetup.com/ReactJS-Dublin/)
-
-## إيطاليا {/*italy*/}
-** [ميلان](https://www.meetup.com/React-JS-Milano/)
-
-## ماليزيا {/*malaysia*/}
-** [كوالا لمبور](https://www.kl-react.com/)
-* [بينانغ](https://www.facebook.com/groups/reactpenang/)
-
-## هولندا {/*netherlands*/}
-** [أمستردام](https://www.meetup.com/React-Amsterdam/)
-
-## نيوزيلندا {/*new-zealand*/}
-** [ويلينجتون](https://www.meetup.com/React-Wellington/)
-
-## النرويج {/*norway*/}
-** [النرويج](https://reactjs-norway.webflow.io/)
-* [أوسلو](https://www.meetup.com/ReactJS-Oslo-Meetup/)
-
-## باكستان {/*pakistan*/}
-** [كراتشي](https://www.facebook.com/groups/902678696597634/)
-* [لاهور](https://www.facebook.com/groups/ReactjsLahore/)
-
-## بنما {/*panama*/}
-* [بنما](https://www.meetup.com/React-Panama/)
-
-## بيرو {/*peru*/}
-** [ليما](https://www.meetup.com/ReactJS-Peru/)
-
-## الفلبين {/*philippines*/}
-** [مانيلا](https://www.meetup.com/reactjs-developers-manila/)
-* [مانيلا - ReactJS PH](https://www.meetup.com/ReactJS-Philippines/)
-
-## بولندا {/*poland*/}
-** [وارسو](https://www.meetup.com/React-js-Warsaw/)
-
-## البرتغال {/*portugal*/}
-** [لشبونة](https://www.meetup.com/JavaScript-Lisbon/)
-
-## اسكتلندا (المملكة المتحدة) {/*scotland-uk*/}
-** [إدنبرة](https://www.meetup.com/React-Scotland/)
-
-## سنغافورة {/*singapore*/}
-** [سنغافورة - رد فعل على دراية](https://reactknowledhable.org/)
-
-## إسبانيا {/*spain*/}
-** [برشلونة](https://www.meetup.com/ReactJS-Barcelona/)
-* [جزر الكناري](https://www.meetup.com/React-Canarias/)
-
-## السويد {/*sweden*/}
-** [جوتنبرج](https://www.meetup.com/ReactJS-Goteborg/)
-
-## سويسرا {/*سويسرا*/}
-** [زيورخ](https://www.meetup.com/Zurich-ReactJS-Meetup/)
-
-## تركيا {/*turkey*/}
-** [اسطنبول](https://kommunity.com/reactjs-istanbul)
-
-## أوكرانيا {/*ukraine*/}
-** [كييف](https://www.meetup.com/Kyiv-ReactJS-Meetup)
-
-## الولايات المتحدة {/*us*/}
-** [آن أربور ، ميشيغان - ReactJS](https://www.meetup.com/AnnArbor-jsx/)
-* [أتلانتا ، جورجيا - ReactJS](https://www.meetup.com/React-ATL/)
-* [أوستن ، تكساس - ReactJS](https://www.meetup.com/ReactJS-Austin-Meetup/)
-* [بوسطن ، ماساتشوستس - ReactJS](https://www.meetup.com/ReactJS-Boston/)
-* [بوسطن ، ماساتشوستس - React Native](https://www.meetup.com/Boston-React-Native-Meetup/)
-* [شارلوت ، نورث كارولاينا - ReactJS](https://www.meetup.com/ReactJS-Charlotte/)
-* [شارلوت ، نورث كارولاينا - رد الفعل الأصلي](https://www.meetup.com/cltreactnative/)
-* [شيكاغو ، إلينوي - ReactJS](https://www.meetup.com/React-Chicago/)
-* [كليفلاند ، أوهايو - ReactJS](https://www.meetup.com/Cleveland-React/)
-* [كولومبوس ، أوهايو - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/)
-* [دالاس ، تكساس - ReactJS](https://www.meetup.com/ReactDallas/)
-* [دالاس ، تكساس - [عن بعد] React JS](https://www.meetup.com/React-JS-Group/)
-* [ديترويت ، ميشيغان - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/)
-* [ايرفين ، كاليفورنيا - ReactJS](https://www.meetup.com/ReactJS-OC/)
-* [كانساس سيتي ، ميزوري - ReactJS](https://www.meetup.com/Kansas-City-React-Meetup/)
-* [لاس فيغاس ، نيفادا - ReactJS](https://www.meetup.com/ReactVegas/)
-* [ليسبورغ ، فيرجينيا - ReactJS](https://www.meetup.com/React-NOVA/)
-* [لوس أنجلوس ، كاليفورنيا - ReactJS](https://www.meetup.com/socal-react/)
-* [لوس أنجلوس ، كاليفورنيا - رد فعل محلي](https://www.meetup.com/React-Native-Los-Angeles/)
-* [ميامي ، فلوريدا- ReactJS](https://www.meetup.com/React-Miami/)
-* [ناشفيل ، تينيسي - ReactJS](https://www.meetup.com/NashReact-Meetup/)
-* [نيويورك ، نيويورك - ReactJS](https://www.meetup.com/NYC-Javascript-React-Group/)
-* [نيويورك ، نيويورك - رياكت ليديز](https://www.meetup.com/React-Ladies/)
-* [نيويورك، نيويورك- React Native](https://www.meetup.com/React-Native-NYC/)
-* [نيويورك ، نيويورك - useReactNYC](https://www.meetup.com/useReactNYC/)
-* [بالو ألتو ، كاليفورنيا - رد فعل محلي](https://www.meetup.com/React-Native-Silicon-Valley/)
-* [فيلادلفيا ، بنسلفانيا - ReactJS](https://www.meetup.com/ReactPhiladelphia/)
-* [فينيكس ، أريزونا- ReactJS](https://www.meetup.com/ReactJS-Phoenix/)
-* [بيتسبرغ ، بنسلفانيا - ReactJS / React Native](https://www.meetup.com/ReactPgh/)
-* [بورتلاند ، أوريغون- ReactJS](https://www.meetup.com/Portland-ReactJS/)
-* [بروفو ، يوتا- ReactJS](https://www.meetup.com/ReactJS-Utah/)
-* [سكرامنتو ، كاليفورنيا - ReactJS](https://www.meetup.com/Sacramento-ReactJS-Meetup/)
-* [سان دييغو ، كاليفورنيا - San Diego JS](https://www.meetup.com/sandiegojs/)
-* [سان فرانسيسكو - رد فعل العالم الحقيقي](https://www.meetup.com/Real-World-React)
-* [سان فرانسيسكو - ReactJS](https://www.meetup.com/ReactJS-San-Francisco/)
-* [سان فرانسيسكو ، كاليفورنيا - رد فعل أصلي](https://www.meetup.com/React-Native-San-Francisco/)
-* [سان رامون ، كاليفورنيا - TriValley Coders](https://www.meetup.com/trivalleycoders/)
-* [سانتا مونيكا ، كاليفورنيا - ReactJS](https://www.meetup.com/Los-Angeles-ReactJS-User-Group/)
-* [سياتل ، واشنطن - React Native](https://www.meetup.com/Seattle-React-Native-Meetup/)
-* [سياتل ، واشنطن - ReactJS](https://www.meetup.com/seattle-react-js/)
-* [تامبا ، فلوريدا - ReactJS](https://www.meetup.com/ReactJS-Tampa-Bay/)
-* [توكسون ، أريزونا - ReactJS](https://www.meetup.com/Tucson-ReactJS-Meetup/)
-* [واشنطن العاصمة - ReactJS](https://www.meetup.com/React-DC/)
+## Indonesia {/*indonesia*/}
+* [Indonesia](https://www.meetup.com/reactindonesia/)
+
+## Ireland {/*ireland*/}
+* [Dublin](https://www.meetup.com/ReactJS-Dublin/)
+
+## Israel {/*israel*/}
+* [Tel Aviv](https://www.meetup.com/ReactJS-Israel/)
+
+## Italy {/*italy*/}
+* [Milan](https://www.meetup.com/React-JS-Milano/)
+
+## Kenya {/*kenya*/}
+* [Nairobi - Reactdevske](https://kommunity.com/reactjs-developer-community-kenya-reactdevske)
+
+## Malaysia {/*malaysia*/}
+* [Kuala Lumpur](https://www.kl-react.com/)
+* [Penang](https://www.facebook.com/groups/reactpenang/)
+
+## Netherlands {/*netherlands*/}
+* [Amsterdam](https://www.meetup.com/React-Amsterdam/)
+
+## New Zealand {/*new-zealand*/}
+* [Wellington](https://www.meetup.com/React-Wellington/)
+
+## Norway {/*norway*/}
+* [Norway](https://reactjs-norway.webflow.io/)
+* [Oslo](https://www.meetup.com/ReactJS-Oslo-Meetup/)
+
+## Pakistan {/*pakistan*/}
+* [Karachi](https://www.facebook.com/groups/902678696597634/)
+* [Lahore](https://www.facebook.com/groups/ReactjsLahore/)
+
+## Panama {/*panama*/}
+* [Panama](https://www.meetup.com/React-Panama/)
+
+## Peru {/*peru*/}
+* [Lima](https://www.meetup.com/ReactJS-Peru/)
+
+## Philippines {/*philippines*/}
+* [Manila](https://www.meetup.com/reactjs-developers-manila/)
+* [Manila - ReactJS PH](https://www.meetup.com/ReactJS-Philippines/)
+
+## Poland {/*poland*/}
+* [Warsaw](https://www.meetup.com/React-js-Warsaw/)
+* [Wrocław](https://www.meetup.com/ReactJS-Wroclaw/)
+
+## Portugal {/*portugal*/}
+* [Lisbon](https://www.meetup.com/JavaScript-Lisbon/)
+
+## Scotland (UK) {/*scotland-uk*/}
+* [Edinburgh](https://www.meetup.com/React-Scotland/)
+
+## Spain {/*spain*/}
+* [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
+* [Canarias](https://www.meetup.com/React-Canarias/)
+
+## Sweden {/*sweden*/}
+* [Goteborg](https://www.meetup.com/ReactJS-Goteborg/)
+* [Stockholm](https://www.meetup.com/Stockholm-ReactJS-Meetup/)
+
+## Switzerland {/*switzerland*/}
+* [Zurich](https://www.meetup.com/Zurich-ReactJS-Meetup/)
+
+## Turkey {/*turkey*/}
+* [Istanbul](https://kommunity.com/reactjs-istanbul)
+
+## Ukraine {/*ukraine*/}
+* [Kyiv](https://www.meetup.com/Kyiv-ReactJS-Meetup)
+
+## US {/*us*/}
+* [Ann Arbor, MI - ReactJS](https://www.meetup.com/AnnArbor-jsx/)
+* [Atlanta, GA - ReactJS](https://www.meetup.com/React-ATL/)
+* [Austin, TX - ReactJS](https://www.meetup.com/ReactJS-Austin-Meetup/)
+* [Boston, MA - ReactJS](https://www.meetup.com/ReactJS-Boston/)
+* [Boston, MA - React Native](https://www.meetup.com/Boston-React-Native-Meetup/)
+* [Charlotte, NC - ReactJS](https://www.meetup.com/ReactJS-Charlotte/)
+* [Charlotte, NC - React Native](https://www.meetup.com/cltreactnative/)
+* [Chicago, IL - ReactJS](https://www.meetup.com/React-Chicago/)
+* [Cleveland, OH - ReactJS](https://www.meetup.com/Cleveland-React/)
+* [Columbus, OH - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/)
+* [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/)
+* [Dallas, TX - [Remote] React JS](https://www.meetup.com/React-JS-Group/)
+* [Detroit, MI - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/)
+* [Indianapolis, IN - React.Indy](https://www.meetup.com/React-Indy)
+* [Irvine, CA - ReactJS](https://www.meetup.com/ReactJS-OC/)
+* [Kansas City, MO - ReactJS](https://www.meetup.com/Kansas-City-React-Meetup/)
+* [Las Vegas, NV - ReactJS](https://www.meetup.com/ReactVegas/)
+* [Leesburg, VA - ReactJS](https://www.meetup.com/React-NOVA/)
+* [Los Angeles, CA - ReactJS](https://www.meetup.com/socal-react/)
+* [Los Angeles, CA - React Native](https://www.meetup.com/React-Native-Los-Angeles/)
+* [Miami, FL - ReactJS](https://www.meetup.com/React-Miami/)
+* [Nashville, TN - ReactJS](https://www.meetup.com/NashReact-Meetup/)
+* [New York, NY - ReactJS](https://www.meetup.com/NYC-Javascript-React-Group/)
+* [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/)
+* [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/)
+* [New York, NY - useReactNYC](https://www.meetup.com/useReactNYC/)
+* [Omaha, NE - ReactJS/React Native](https://www.meetup.com/omaha-react-meetup-group/)
+* [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/)
+* [Philadelphia, PA - ReactJS](https://www.meetup.com/Reactadelphia/)
+* [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/)
+* [Pittsburgh, PA - ReactJS/React Native](https://www.meetup.com/ReactPgh/)
+* [Portland, OR - ReactJS](https://www.meetup.com/Portland-ReactJS/)
+* [Provo, UT - ReactJS](https://www.meetup.com/ReactJS-Utah/)
+* [Sacramento, CA - ReactJS](https://www.meetup.com/Sacramento-ReactJS-Meetup/)
+* [San Diego, CA - San Diego JS](https://www.meetup.com/sandiegojs/)
+* [San Francisco - Real World React](https://www.meetup.com/Real-World-React)
+* [San Francisco - ReactJS](https://www.meetup.com/ReactJS-San-Francisco/)
+* [San Francisco, CA - React Native](https://www.meetup.com/React-Native-San-Francisco/)
+* [San Ramon, CA - TriValley Coders](https://www.meetup.com/trivalleycoders/)
+* [Santa Monica, CA - ReactJS](https://www.meetup.com/Los-Angeles-ReactJS-User-Group/)
+* [Seattle, WA - React Native](https://www.meetup.com/Seattle-React-Native-Meetup/)
+* [Seattle, WA - ReactJS](https://www.meetup.com/seattle-react-js/)
+* [Tampa, FL - ReactJS](https://www.meetup.com/ReactJS-Tampa-Bay/)
+* [Tucson, AZ - ReactJS](https://www.meetup.com/Tucson-ReactJS-Meetup/)
+* [Washington, DC - ReactJS](https://www.meetup.com/React-DC/)
\ No newline at end of file

From f6930fc6ed38b1167c39a9583b64d140a1af07bf Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulbaset@gmail.com>
Date: Sun, 24 Dec 2023 23:10:33 +0200
Subject: [PATCH 48/52] Fix language mismatch in useId.md and index.md

---
 src/content/reference/react/hooks.md |  88 +++++++++--------
 src/content/reference/react/index.md | 141 ---------------------------
 src/content/reference/react/useId.md |   4 -
 3 files changed, 47 insertions(+), 186 deletions(-)

diff --git a/src/content/reference/react/hooks.md b/src/content/reference/react/hooks.md
index cec71ce8f..d49dd7af7 100644
--- a/src/content/reference/react/hooks.md
+++ b/src/content/reference/react/hooks.md
@@ -1,23 +1,23 @@
 ---
-title: "Built-in React Hooks"
+title: "خطاطيف مدمجة في React"
 ---
 
 <Intro>
 
-*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.
+ تمكنك *الخطاطيف* (Hooks) من استخدام مزايا مختلفة من React في مكوناتك. يمكنك إما استخدام الخطاطيف المدمجة (المبنية مسبقا)، أو استخدامها لبناء الخطاف الخاص بك. ستريك هذه الصفحة جميع الخطاطيف المبنية مسبقًا في React.
 
 </Intro>
 
 ---
 
-## State Hooks {/*state-hooks*/}
+## خطاطيف الحالة (State) {/*state-hooks*/}
 
-*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.
+تسمح *الحالة* للمكون ["بتذكر" معلومات مثل إدخالات المستخدم](/learn/state-a-components-memory). على سبيل المثال، يمكن لمكوّن النموذج Form استخدام الحالة لتخزين قيمة الإدخال، بينما يمكن لمكون معرض الصور استخدام الحالة لتخزين رقم الصورة المختارة.
 
-To add state to a component, use one of these Hooks:
+لإضافة حالة إلى مكون، استخدم أحد هذه الخطاطيف:
 
-* [`useState`](/reference/react/useState) declares a state variable that you can update directly.
-* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
+* [`useState`](/reference/react/useState) يعيّن .متغير حالة يمكنك تحديثه مباشرة
+* [`useReducer`](/reference/react/useReducer) يعيّن متغير حالة مع منطق التحديث داخل [دالة reducer.](/learn/extracting-state-logic-into-a-reducer)
 
 ```js
 function ImageGallery() {
@@ -27,11 +27,12 @@ function ImageGallery() {
 
 ---
 
-## Context Hooks {/*context-hooks*/}
+## خطاطيف السياق (Context) {/*context-hooks*/}
 
-*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep.
+يسمح *السياق* للمكون [بتلقي المعلومات من الآباء البعيدين دون تمريرها كدعامات (props)](/learn/passing-props-to-a-component). على سبيل المثال، يمكن لمكوِّن المستوى الأعلى لتطبيقك أن يمرر سمة واجهة المستخدم الحالية إلى جميع المكونات أدناه، بغض النظر عن مدى عمقها.
 
-* [`useContext`](/reference/react/useContext) reads and subscribes to a context.
+
+* [`useContext`](/reference/react/useContext) يقرأ ويحدّث في السياق.
 
 ```js
 function Button() {
@@ -41,12 +42,14 @@ function Button() {
 
 ---
 
-## Ref Hooks {/*ref-hooks*/}
+## خطاطيف المرجع {/*ref-hooks*/}
+
+تسمح *المراجع* للمكون [بحمل بعض المعلومات التي لا تُستخدم للعرض](/learn/referencing-values-with-refs) ، مثل عنصر DOM أو معرّف المهلة (timeout ID).
+ على عكس الحالة ، لا يؤدي تحديث المرجع إلى إعادة تصيير المكون الخاص بك. المرجع Ref هي "فتحة هروب" من طريقة React. تكون مفيدة عندما تحتاج إلى العمل مع أنظمة غير React، مثل واجهات برمجة تطبيقات المتصفح المضمنة (BOM).
 
-*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.
 
-* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node.
-* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used.
+* [`useRef`](/reference/react/useRef) يعيّن المرجع، يمكنك الاحتفاظ بأي قيمة فيه، ولكن غالبًا ما يتم استخدامه لاحتواء عنصر DOM
+* [`useImperativeHandle`](/reference/react/useImperativeHandle) يتيح لك تخصيص المرجع الذي يعرضه المكون الخاص بك. نادرًا ما يُستخدم هذا الخطاف.
 
 ```js
 function Form() {
@@ -56,11 +59,12 @@ function Form() {
 
 ---
 
-## Effect Hooks {/*effect-hooks*/}
+## خطاطيف التأثير (Effect) {/*effect-hooks*/}
+
+تسمح التأثيرات للمكون [بالاتصال والمزامنة مع الأنظمة الخارجية](/learn/synchronizing-with-effects). يتضمن ذلك التعامل مع الشبكة، ومتصفح DOM، والرسوم المتحركة، وعناصر واجهة المستخدم المكتوبة باستخدام مكتبة واجهة مستخدم مختلفة، وأكواد أخرى غير React.
 
-*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.
 
-* [`useEffect`](/reference/react/useEffect) connects a component to an external system.
+* [`useEffect`](/reference/react/useEffect) يربط المكوّن بنظام خارجي.
 
 ```js
 function ChatRoom({ roomId }) {
@@ -72,23 +76,25 @@ function ChatRoom({ roomId }) {
   // ...
 ```
 
-Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
+التأثيرات هي "فتحة هروب" من أسلوب React. لا تَستخدِم التأثيرات لتنظيم تدفق البيانات لتطبيقك. إذا كنت لا تتفاعل مع نظام خارجي، [فقد لا تحتاج إلى تأثير](/learn/you-might-not-need-an-effect).
 
-There are two rarely used variations of `useEffect` with differences in timing:
 
-* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here.
-* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
+هناك نوعان نادران من أشكال الاستخدام للتأثير  `useEffect` مع اختلافات في توقيت الاستخدام:
+
+* [`useLayoutEffect`](/reference/react/useLayoutEffect) ينطلق قبل أن يعيد المتصفح اظهار الشاشة. يمكنك قياس التخطيط هنا.
+* [`useInsertionEffect`](/reference/react/useInsertionEffect) ينطلق قبل أن تُجري React تغييرات على DOM. يمكن للمكتبات إدراج CSS الديناميكي هنا.
 
 ---
 
-## Performance Hooks {/*performance-hooks*/}
+## خطاطيف الأداء {/*performance-hooks*/}
+
+من الطرق الشائعة لتحسين أداء إعادة العرض تخطي العمل غير الضروري. على سبيل المثال، يمكنك إخبار React بإعادة استخدام نتيجة عملية حسابية مخزنة أو تخطي إعادة التصيير إذا لم تتغير البيانات منذ التصيير السابق.
 
-A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.
+لتخطي العمليات الحسابية وإعادة التصيير غير الضرورية ، استخدم أحد هذه الخطاطيف:
 
-To skip calculations and unnecessary re-rendering, use one of these Hooks:
 
-- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation.
-- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component.
+- [`useMemo`](/reference/react/useMemo) يتيح لك تخزين نتيجة عملية حسابية مكلفة.
+- [`useCallback`](/reference/react/useCallback) يتيح لك تخزين تعريف وظيفة function قبل تمريره إلى مكون محسَّن.
 
 ```js
 function TodoList({ todos, tab, theme }) {
@@ -97,22 +103,22 @@ function TodoList({ todos, tab, theme }) {
 }
 ```
 
-Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart).
+في بعض الأحيان، لا يمكنك تخطي إعادة العرض لأن الشاشة تحتاج بالفعل إلى التحديث. في تلك الحالة، يمكنك تحسين الأداء عن طريق فصل التحديثات الحاظرة لمعالجة الكود (blocking) التي يجب أن تكون متزامنة (مثل الكتابة في أحد المدخلات) عن التحديثات غير الحاظرة (non-blocking) التي لا تحتاج إلى حظر واجهة المستخدم (مثل تحديث مخطط).
 
-To prioritize rendering, use one of these Hooks:
+لتحديد أولوية العرض، استخدم أحد هذه الخطاطيف:
 
-- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
-- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
+- [`useTransition`](/reference/react/useTransition) يتيح لك اعتبار الحالة غير حاظرة والسماح للتحديثات الأخرى بالتداخل معها.
+- [`useDeferredValue`](/reference/react/useDeferredValue) يتيح لك تأجيل تحديث جزء غير مهم من واجهة المستخدم والسماح للأجزاء الأخرى بالتحديث أولاً.
 
 ---
 
-## Resource Hooks {/*resource-hooks*/}
+## خطاطيف المصدر {/*resource-hooks*/}
 
-*Resources* can be accessed by a component without having them as part of their state. For example, a component can read a message from a Promise or read styling information from a context.
+يستطيع المكون الوصول *للمصادر* دون امتلاكها كجزء من حالتهم. على سبيل المثال، يمكن للمكون قراء رسالة من وعد (Promise) أو قراءة معلومات التصميم من السياق (Context).
 
-To read a value from a resource, use this Hook:
+لقراءة معلومة من مصدر استخدم هذا الخطاف:
 
-- [`use`](/reference/react/use) lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context).
+- [`use`](/reference/react/use) يسمح لك بقراء معلومة من مصدر مثل [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) أو [context](/learn/passing-data-deeply-with-context).
 
 ```js
 function MessageComponent({ messagePromise }) {
@@ -124,16 +130,16 @@ function MessageComponent({ messagePromise }) {
 
 ---
 
-## Other Hooks {/*other-hooks*/}
+## خطاطيف أخرى {/*other-hooks*/}
 
-These Hooks are mostly useful to library authors and aren't commonly used in the application code.
+هذه الخطاطيف مفيدة في الغالب لمؤلفي المكتبات ولا يتم استخدامها بشكل شائع في كود التطبيق.
 
-- [`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.
+- [`useDebugValue`](/reference/react/useDebugValue) يتيح لك تخصيص التسمية التي تعرضها أدوات مطوري React لخطافك المخصص.
+- [`useId`](/reference/react/useId) يتيح للمكون ربط معرف فريد بنفسه (unique ID). تستخدم عادة مع واجهات برمجة إمكانية الوصول API.
+- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) يتيح للمكون الاشتراك في مُوَزّع خارجي.
 
 ---
 
-## Your own Hooks {/*your-own-hooks*/}
+## الخطاطيف الخاصة بك {/*your-own-hooks*/}
 
-You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions.
+ يمكنك أيضًا [تعريف الخطاطيف المخصصة](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) الخاصة بك كدوال JavaScript.
\ No newline at end of file
diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md
index 8c61ba77c..43394acf6 100644
--- a/src/content/reference/react/index.md
+++ b/src/content/reference/react/index.md
@@ -1,35 +1,15 @@
 ---
-<<<<<<< HEAD
-title: "خطاطيف مدمجة في React"
-=======
 title: React Reference Overview
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc
 ---
 
 <Intro>
 
-<<<<<<< HEAD
- تمكنك *الخطاطيف* (Hooks) من استخدام مزايا مختلفة من React في مكوناتك. يمكنك إما استخدام الخطاطيف المدمجة (المبنية مسبقا)، أو استخدامها لبناء الخطاف الخاص بك. ستريك هذه الصفحة جميع الخطاطيف المبنية مسبقًا في React.
-
-=======
 This section provides detailed reference documentation for working with React. For an introduction to React, please visit the [Learn](/learn) section.
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc
 
 </Intro>
 
 Our The React reference documentation is broken down into functional subsections:
 
-<<<<<<< HEAD
-## خطاطيف الحالة (State) {/*state-hooks*/}
-
-تسمح *الحالة* للمكون ["بتذكر" معلومات مثل إدخالات المستخدم](/learn/state-a-components-memory). على سبيل المثال، يمكن لمكوّن النموذج Form استخدام الحالة لتخزين قيمة الإدخال، بينما يمكن لمكون معرض الصور استخدام الحالة لتخزين رقم الصورة المختارة.
-
-لإضافة حالة إلى مكون، استخدم أحد هذه الخطاطيف:
-
-* [`useState`](/reference/react/useState) يعيّن .متغير حالة يمكنك تحديثه مباشرة
-
-* [`useReducer`](/reference/react/useReducer) يعيّن متغير حالة مع منطق التحديث داخل [دالة reducer.](/learn/extracting-state-logic-into-a-reducer)
-=======
 ## React {/*react*/}
 
 Programmatic React features:
@@ -40,7 +20,6 @@ Programmatic React features:
 * [Directives](/reference/react/directives) - Provide instructions to bundlers compatible with React Server Components.
 
 ## React DOM {/*react-dom*/}
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc
 
 React-dom contains features that are only supported for web applications (which run in the browser DOM environment). This section is broken into the following:
 
@@ -50,126 +29,6 @@ React-dom contains features that are only supported for web applications (which
 * [Client APIs](/reference/react-dom/client) - The `react-dom/client` APIs let you render React components on the client (in the browser).
 * [Server APIs](/reference/react-dom/server) - The `react-dom/server` APIs let you render React components to HTML on the server.
 
-<<<<<<< HEAD
-## خطاطيف السياق (Context) {/*context-hooks*/}
-
-يسمح *السياق* للمكون [بتلقي المعلومات من الآباء البعيدين دون تمريرها كدعامات (props)](/learn/passing-props-to-a-component). على سبيل المثال، يمكن لمكوِّن المستوى الأعلى لتطبيقك أن يمرر سمة واجهة المستخدم الحالية إلى جميع المكونات أدناه، بغض النظر عن مدى عمقها.
-
-
-* [`useContext`](/reference/react/useContext) يقرأ ويحدّث في السياق.
-
-```js
-function Button() {
-  const theme = useContext(ThemeContext);
-  // ...
-```
-
----
-
-## خطاطيف المرجع {/*ref-hooks*/}
-
-تسمح *المراجع* للمكون [بحمل بعض المعلومات التي لا تُستخدم للعرض](/learn/referencing-values-with-refs) ، مثل عنصر DOM أو معرّف المهلة (timeout ID).
- على عكس الحالة ، لا يؤدي تحديث المرجع إلى إعادة تصيير المكون الخاص بك. المرجع Ref هي "فتحة هروب" من طريقة React. تكون مفيدة عندما تحتاج إلى العمل مع أنظمة غير React، مثل واجهات برمجة تطبيقات المتصفح المضمنة (BOM).
-
-
-* [`useRef`](/reference/react/useRef) يعيّن المرجع، يمكنك الاحتفاظ بأي قيمة فيه، ولكن غالبًا ما يتم استخدامه لاحتواء عنصر DOM
-* [`useImperativeHandle`](/reference/react/useImperativeHandle) يتيح لك تخصيص المرجع الذي يعرضه المكون الخاص بك. نادرًا ما يُستخدم هذا الخطاف.
-
-```js
-function Form() {
-  const inputRef = useRef(null);
-  // ...
-```
-
----
-
-## خطاطيف التأثير (Effect) {/*effect-hooks*/}
-
-تسمح التأثيرات للمكون [بالاتصال والمزامنة مع الأنظمة الخارجية](/learn/synchronizing-with-effects). يتضمن ذلك التعامل مع الشبكة، ومتصفح DOM، والرسوم المتحركة، وعناصر واجهة المستخدم المكتوبة باستخدام مكتبة واجهة مستخدم مختلفة، وأكواد أخرى غير React.
-
-
-* [`useEffect`](/reference/react/useEffect) يربط المكوّن بنظام خارجي.
-
-```js
-function ChatRoom({ roomId }) {
-  useEffect(() => {
-    const connection = createConnection(roomId);
-    connection.connect();
-    return () => connection.disconnect();
-  }, [roomId]);
-  // ...
-```
-
-التأثيرات هي "فتحة هروب" من أسلوب React. لا تَستخدِم التأثيرات لتنظيم تدفق البيانات لتطبيقك. إذا كنت لا تتفاعل مع نظام خارجي، [فقد لا تحتاج إلى تأثير](/learn/you-might-not-need-an-effect).
-
-
-هناك نوعان نادران من أشكال الاستخدام للتأثير  `useEffect` مع اختلافات في توقيت الاستخدام:
-
-* [`useLayoutEffect`](/reference/react/useLayoutEffect) ينطلق قبل أن يعيد المتصفح اظهار الشاشة. يمكنك قياس التخطيط هنا.
-* [`useInsertionEffect`](/reference/react/useInsertionEffect) ينطلق قبل أن تُجري React تغييرات على DOM. يمكن للمكتبات إدراج CSS الديناميكي هنا.
-
----
-
-## خطاطيف الأداء {/*performance-hooks*/}
-
-من الطرق الشائعة لتحسين أداء إعادة العرض تخطي العمل غير الضروري. على سبيل المثال، يمكنك إخبار React بإعادة استخدام نتيجة عملية حسابية مخزنة أو تخطي إعادة التصيير إذا لم تتغير البيانات منذ التصيير السابق.
-
-لتخطي العمليات الحسابية وإعادة التصيير غير الضرورية ، استخدم أحد هذه الخطاطيف:
-
-
-- [`useMemo`](/reference/react/useMemo) يتيح لك تخزين نتيجة عملية حسابية مكلفة.
-- [`useCallback`](/reference/react/useCallback) يتيح لك تخزين تعريف وظيفة function قبل تمريره إلى مكون محسَّن.
-
-```js
-function TodoList({ todos, tab, theme }) {
-  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
-  // ...
-}
-```
-
-في بعض الأحيان، لا يمكنك تخطي إعادة العرض لأن الشاشة تحتاج بالفعل إلى التحديث. في تلك الحالة، يمكنك تحسين الأداء عن طريق فصل التحديثات الحاظرة لمعالجة الكود (blocking) التي يجب أن تكون متزامنة (مثل الكتابة في أحد المدخلات) عن التحديثات غير الحاظرة (non-blocking) التي لا تحتاج إلى حظر واجهة المستخدم (مثل تحديث مخطط).
-
-لتحديد أولوية العرض، استخدم أحد هذه الخطاطيف:
-
-- [`useTransition`](/reference/react/useTransition) يتيح لك اعتبار الحالة غير حاظرة والسماح للتحديثات الأخرى بالتداخل معها.
-- [`useDeferredValue`](/reference/react/useDeferredValue) يتيح لك تأجيل تحديث جزء غير مهم من واجهة المستخدم والسماح للأجزاء الأخرى بالتحديث أولاً.
-
----
-
-## خطاطيف المصدر {/*resource-hooks*/}
-
-يستطيع المكون الوصول *للمصادر* دون امتلاكها كجزء من حالتهم. على سبيل المثال، يمكن للمكون قراء رسالة من وعد (Promise) أو قراءة معلومات التصميم من السياق (Context).
-
-لقراءة معلومة من مصدر استخدم هذا الخطاف:
-
-- [`use`](/reference/react/use) يسمح لك بقراء معلومة من مصدر مثل [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) أو [context](/learn/passing-data-deeply-with-context).
-
-```js
-function MessageComponent({ messagePromise }) {
-  const message = use(messagePromise);
-  const theme = use(ThemeContext);
-  // ...
-}
-```
-
----
-
-
-## خطاطيف أخرى {/*other-hooks*/}
-
-هذه الخطاطيف مفيدة في الغالب لمؤلفي المكتبات ولا يتم استخدامها بشكل شائع في كود التطبيق.
-
-- [`useDebugValue`](/reference/react/useDebugValue) يتيح لك تخصيص التسمية التي تعرضها أدوات مطوري React لخطافك المخصص.
-- [`useId`](/reference/react/useId) يتيح للمكون ربط معرف فريد بنفسه (unique ID). تستخدم عادة مع واجهات برمجة إمكانية الوصول API.
-- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) يتيح للمكون الاشتراك في مُوَزّع خارجي.
-
----
-
-## الخطاطيف الخاصة بك {/*your-own-hooks*/}
-
- يمكنك أيضًا [تعريف الخطاطيف المخصصة](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) الخاصة بك كدوال JavaScript.
-=======
 ## Legacy APIs {/*legacy-apis*/}
 
 * [Legacy APIs](/reference/react/legacy) - Exported from the `react` package, but not recommended for use in newly written code.
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc
diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md
index f2ef4b8f8..2b0b060af 100644
--- a/src/content/reference/react/useId.md
+++ b/src/content/reference/react/useId.md
@@ -179,11 +179,7 @@ input { margin: 5px; }
 
 الفائدة الأساسية لـ `useId` هي أن React ستضمن أنه يعمل مع [تصيير الخادم.](/reference/react-dom/server) أثناء تصيير الخادم، يتم تحويل مكوناتك إلي عناصر HTML. في وقت لاحق، على العميل، [hydration](/reference/react-dom/client/hydrateRoot) يقوم بربط معالجات الأحداث الخاصة بك بعناصر HTML التي تم توليدها. لكي يعمل تحويل العناصر على العميل بشكل صحيح، يجب أن يتطابق إخراج العميل مع HTML الذي على الخادم.
 
-<<<<<<< HEAD
 من الصعب جدا ضمان ذلك باستخدام عداد متزايد لأن ترتيب تحويل المكونات على العميل قد لا يتطابق مع ترتيب إخراج HTML على الخادم. من خلال استدعاء `useId`، ستضمن أن عملية تحويل المكونات ستعمل بشكل صحيح، وسيتطابق الإخراج بين الخادم والعميل.
-=======
-This is very difficult to guarantee with an incrementing counter because the order in which the Client Components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc
 
 داخل React، يتم إنشاء `useId` من الـ "مسار الأب" للمكون الذي يستدعيه. وهذا هو السبب في أنه إذا كانت شجرة العميل وشجرة الخادم متطابقتين، سيتطابق "مسار لأب" بغض النظر عن ترتيب العرض.
 

From 21f984aac4098ace7571352ef87b615513566cb4 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulbaset@gmail.com>
Date: Sun, 24 Dec 2023 23:11:14 +0200
Subject: [PATCH 49/52] Remove conflicting code in UI description and
 directives

---
 src/content/learn/describing-the-ui.md    | 1 -
 src/content/reference/react/directives.md | 5 -----
 2 files changed, 6 deletions(-)

diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index 618de344a..c9f9eebe6 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -10,7 +10,6 @@ title: وصف واجهات المستخدم (UI)
 
 <YouWillLearn isChapter={true}>
 
-<<<<<<< HEAD
 * [كيفية كتابة أول مكون React لك](/learn/your-first-component)
 * [متى وكيف تنشأ ملفات تحتوى على أكثر من مكون](/learn/importing-and-exporting-components)
 * [كيفية إضافة ترميز (Markup) إلى JavaScript باستخدام JSX](/learn/writing-markup-with-jsx)
diff --git a/src/content/reference/react/directives.md b/src/content/reference/react/directives.md
index 122feed8c..19cf4f989 100644
--- a/src/content/reference/react/directives.md
+++ b/src/content/reference/react/directives.md
@@ -18,10 +18,5 @@ These directives are needed only if you're [using React Server Components](/lear
 
 ## توجيهات الكود {/*source-code-directives*/}
 
-<<<<<<< HEAD
 * [`'use client'`](/reference/react/use-client) تميز الملف بأن ما فيه مكون من جانب العميل (client-side).
 * [`'use server'`](/reference/react/use-server) تميز الدوال من جانب الخادم (server-side) التي يمكن استدعاؤها من الكود من جانب العميل (client-side).
-=======
-* [`'use client'`](/reference/react/use-client) lets you mark what code runs on the client.
-* [`'use server'`](/reference/react/use-server) marks server-side functions that can be called from client-side code.
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc

From 87aad107511c01fd2f868f5b66c102781a55b6ae Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulbaset@gmail.com>
Date: Sun, 31 Dec 2023 00:00:36 +0200
Subject: [PATCH 50/52] translate use server lesson

---
 src/content/reference/react/use-server.md | 122 +++++++++-------------
 1 file changed, 48 insertions(+), 74 deletions(-)

diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md
index bb6199312..85b1fdc7b 100644
--- a/src/content/reference/react/use-server.md
+++ b/src/content/reference/react/use-server.md
@@ -5,7 +5,9 @@ canary: true
 ---
 
 <Canary>
+
 هذه التوجيهات لازمة فقط إذا كنت [تستخدم RSC (مكونات الخادم)](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) أو تبني مكتبة متوافقة معها.
+
 </Canary>
 
 
@@ -23,11 +25,7 @@ canary: true
 
 ### `'use server'` {/*use-server*/}
 
-<<<<<<< HEAD
-أضف `'use server';` في أعلى دالة غير متزامنة (async) لتمييز أن الدالة يمكن تنفيذها من قبل العميل.
-=======
-Add `'use server'` at the top of an async function body to mark the function as callable by the client. We call these functions _Server Actions_.
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc
+أضف `'use server';` في أعلى دالة غير متزامنة (async) لتمييز أن الدالة يمكن تنفيذها من قبل العميل. نسمي هذه الدوال Server Actions.
 
 ```js {2}
 async function addToCart(data) {
@@ -36,100 +34,77 @@ async function addToCart(data) {
 }
 ```
 
-<<<<<<< HEAD
-يمكن تمرير هذه الدالة إلى العميل، عندما تُستدعى، ستنفذ طلب شبكة إلى الخادم يتضمن نسخة متسلسلة من أي معاملات تم تمريرها. إذا كانت دالة الخادم ترجع قيمة، سيتم تسلسلها وإرجاعها إلى العميل.
+يمكن تمرير هذه الدالة إلى العميل، عندما تُستدعى، ستنفذ طلب شبكة إلى الخادم يتضمن نسخة متسلسلة من أي معاملات تم تمريرها. إذا كان Server Action ترجع قيمة، سيتم تسلسلها وإرجاعها إلى العميل.
 
-أو بدلا من ذلك، أضف `'use server';` في أعلى ملف لتمييز كل التصديرات في هذا الملف كدوال خادم غير متزامنة يمكن استخدامها في أي مكان، بما في ذلك استيرادها في ملفات مكونات العميل.
+بدلا من وضع `'use server'` في أول الدالة، يمكنك إضافة `'use server';` في أعلى ملف لتمييز كل التصديرات في هذا الملف كدوال خادم غير متزامنة يمكن استخدامها في أي مكان، بما في ذلك استيرادها في ملفات مكونات العميل.
 
 #### ملاحظات {/*caveats*/}
 
-* تذكر أن المعاملات الممررة إلى دالة مميزة بـ `'use server'` متحكم بها بالكامل من جانب العميل. للأمان، عاملها دائمًا كإدخال غير موثوق به، وتأكد من التحقق من صحتها وتصفيتها كما يناسبك.
-* لتجنب الارتباك الذي قد يحدثه خلط الكود من جانب العميل والخادم في نفس الملف، يمكن استخدام `'use server'` فقط في ملفات الخادم؛ يمكن تمرير الدوال الناتجة إلى مكونات العميل عبر الخصائص.
+* يجب أن تكون `'use server'` في بداية الدالة أو الملف. فوق أي كود آخر، بما في ذلك الاستيرادات (التعليقات قبل `'use server'` مسموح به) يجب كتابتها بعلامة تنصيص مفردة أو مزدوجة. ليس backticks.
+* يمكن استخدام `'use server'` في ملفات الخادم فقط، ومن ثَمّ يمكن تمرير Server Actions إلى مكونات العميل من خلال الخصائص (props). اقرأ أيضًا [أنواع التسلسل](#serializable-parameters-and-return-values).
+* عند استيراد Server Action من [كود Client](/reference/react/use-client)، يجب استخدام التوجيهات على مستوى الملف وليس الدالة.
 * لأن الاستدعاءات الشبكية الأساسية دائمًا غير متزامنة، يمكن استخدام `'use server'` فقط في دوال غير متزامنة (async).
-* التوجيهات مثل `'use server'` يجب أن تكون في أعلى الدالة أو الملف، فوق أي كود آخر بما في ذلك الاستيرادات (التعليقات فوق التوجيهات مقبولة). يجب كتابتها بعلامات تنصيص مفردة (`'use server'`) أو مزدوجة (`"use server"`)، وليس علامات تنصيص عكسية backticks (&#x60;`use server`&#x60;). (تشبه تنسيق التوجيهات `'use xyz'` تنسيق تسمية الـ Hooks `useXyz()`، لكن هذا التشابه محض مصادفة.)
-=======
-When calling a Server Action on the client, it will make a network request to the server that includes a serialized copy of any arguments passed. If the Server Action returns a value, that value will be serialized and returned to the client.
-
-Instead of individually marking functions with `'use server'`, you can add the directive to the top of a file to mark all exports within that file as Server Actions that can be used anywhere, including imported in client code.
-
-#### Caveats {/*caveats*/}
-* `'use server'` must be at the very beginning of their function or module; above any other code including imports (comments above directives are OK). They must be written with single or double quotes, not backticks.
-* `'use server'` can only be used in server-side files. The resulting Server Actions can be passed to Client Components through props. See supported [types for serialization](#serializable-parameters-and-return-values).
-* To import a Server Action from [client code](/reference/react/use-client), the directive must be used on a module level.
-* Because the underlying network calls are always asynchronous, `'use server'` can only be used on async functions.
-* Always treat arguments to Server Actions as untrusted input and authorize any mutations. See [security considerations](#security).
-* Server Actions should be called in a [transition](/reference/react/useTransition). Server Actions passed to [`<form action>`](/reference/react-dom/components/form#props) or [`formAction`](/reference/react-dom/components/input#props) will automatically be called in a transition.
-* Server Actions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing Server Actions typically process one action at a time and do not have a way to cache the return value.
+* تذكر أن المعاملات الممررة إلى دالة مميزة بـ `'use server'` متحكم بها بالكامل من جانب العميل. للأمان، عاملها دائمًا كإدخال غير موثوق به، وتأكد من التحقق من صحتها وتصفيتها كما يناسبك.
+* يفضل استعمال Server Actions في [`useTranistion`](/reference/react/useTransition)، أما Server Actions التي يتم تمريرها إلى [`<form action>`](/reference/react-dom/components/form#props) أو [`formAction`](/reference/react-dom/components/input#props) سيتم إضافة transition لهم تلقائيًا.
+* تم تصميم Server Actions لعمليات تعديل حالة الخادم. لا ينصح باستخدامهم في جلب البيانات، ووفقًا لذلك، فإن الإطارات التي تنفذ Server Actions عادة تعالج إجراء واحد في كل مرة وليس لديها طريقة لتخزين قيمة الإرجاع.
 
-### Security considerations {/*security*/}
+### الاعتبارات الأمنية {/*security*/}
 
-Arguments to Server Actions are fully client-controlled. For security, always treat them as untrusted input, and make sure to validate and escape arguments as appropriate.
+تُحكم الوسائط المُرسَلة إلى Server Actions بالكامل من قبل العميل. من أجل الأمان، دائمًا عاملها كمُدخَلات غير موثوق بها، وتأكد دائمًا من التحقق وتهيئة الوسائط بالطريقة المناسبة.
 
-In any Server Action, make sure to validate that the logged-in user is allowed to perform that action.
+في أي Server Action، تأكد من التحقق من أن المستخدم الذي سجل دخوله مسموح له بأداء تلك العملية.
 
 <Wip>
 
-To prevent sending sensitive data from a Server Action, there are experimental taint APIs to prevent unique values and objects from being passed to client code.
+لمنع إرسال بيانات حساسة من إجراء خادمي، هناك واجهات برمجة تجريبية لمنع تمرير القيم والكائنات الفريدة إلى كود العميل.
 
-See [experimental_taintUniqueValue](/reference/react/experimental_taintUniqueValue) and [experimental_taintObjectReference](/reference/react/experimental_taintObjectReference).
+اطلع على [`experimental_taintUniqueValue`](/reference/react/experimental_taintUniqueValue) و [`experimental_taintObjectReference`](/reference/react/experimental_taintObjectReference).
 
 </Wip>
 
-### Serializable arguments and return values {/*serializable-parameters-and-return-values*/}
+### وسائط وقيم الإرجاع قابلة للتسلسل {/*serializable-parameters-and-return-values*/}
 
-As client code calls the Server Action over the network, any arguments passed will need to be serializable.
+عندما يستدعي كود العميل Server Action عبر الشبكة، فإن أي وسائط يتم تمريرها ستحتاج إلى أن تكون قابلة للتسلسل.
 
-Here are supported types for Server Action arguments:
+فيما يلي الأنواع المدعومة لوسائط إجراء الخادم:
 
-* Primitives
+* البيانات الأساسية
 	* [string](https://developer.mozilla.org/en-US/docs/Glossary/String)
 	* [number](https://developer.mozilla.org/en-US/docs/Glossary/Number)
 	* [bigint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)
 	* [boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean)
 	* [undefined](https://developer.mozilla.org/en-US/docs/Glossary/Undefined)
 	* [null](https://developer.mozilla.org/en-US/docs/Glossary/Null)
-	* [symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), only symbols registered in the global Symbol registry via [`Symbol.for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/for)
-* Iterables containing serializable values
+	* [symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), الرموز المُسجَّلة فقط في سجل الرموز من خلال [`Symbol.for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/for)
+
+* مجموعات تحتوي على قيم قابلة للتسلسل
 	* [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
 	* [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
 	* [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
 	* [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
-	* [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) and [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+	* [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) و [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
 * [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
-* [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) instances
-* Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object): those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties
-* Functions that are Server Actions
+* نماذد [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)
+* [كائنات عادية](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object): تلك التي تم إنشاؤها باستخدام [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), مع خصائص متسلسلة
+* دوال Server Actions
 * [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
 
-Notably, these are not supported:
-* React elements, or [JSX](https://react.dev/learn/writing-markup-with-jsx)
-* Functions, including component functions or any other function that is not a Server Action
+وتجدر الإشارة إلى عدم دعم ما يلي:
+* عناصر React، أو [JSX](https://react.dev/learn/writing-markup-with-jsx)
+* الدوال بما في ذلك المكونات أو أي دوال ليست Server Action
 * [Classes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)
-* Objects that are instances of any class (other than the built-ins mentioned) or objects with [a null prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)
-* Symbols not registered globally, ex. `Symbol('my new symbol')`
+* كائنات تكون مثيلات من أي Class (بخلاف المدمجة المذكورة) أو كائنات ب [null prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)
+* الرموز التي لم تُسجل عالمياً، مثل `Symbol('my new symbol')`
 
-
-Supported serializable return values are the same as [serializable props](/reference/react/use-client#passing-props-from-server-to-client-components) for a boundary Client Component.
-
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc
+قيم الإرجاع القابلة للتسلسل المدعومة هي نفسها كالخصائص القابلة للتسلسل لـ Boundry Client Component.
 
 ## الاستخدام {/*usage*/}
 
-<<<<<<< HEAD
-<Wip>
-هذا القسم لم يكتمل بعد.
-
-يمكن استخدام هذا النهج في أي إطار عمل يدعم مكونات الخادم. يمكنك العثور على مظيد من المعلومات منهم:
-
-* [وثائق Next.js](https://nextjs.org/docs/getting-started/react-essentials)
-* المزيد يأتي لاحقا...
-</Wip>
-=======
-### Server Actions in forms {/*server-actions-in-forms*/}
+### Server Actions في النماذج `<form>` {/*server-actions-in-forms*/}
 
-The most common use case of Server Actions will be calling server functions that mutate data. On the browser, the [HTML form element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) is the traditional approach for a user to submit a mutation. With React Server Components, React introduces first-class support for Server Actions in [forms](/reference/react-dom/components/form).
+إن أشهر استخدام للـ Server Actions سيكون مناداة هذه الدوال لتحديث البيانات. في المتصفح، يعتبر عنصر [HTML `<from>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) الطريقة التقليدية للمستخدم لإرسال تعديل. مع React Server Components، تقدم React دعمًا متكاملاً للـ Server Actions في [النماذج](/reference/react-dom/components/form)..
 
-Here is a form that allows a user to request a username.
+هذا النموذج يطلب من المستخدم ادخال اسمه:
 
 ```js [[1, 3, "formData"]]
 // App.js
@@ -143,20 +118,20 @@ async function requestUsername(formData) {
 export default App() {
   <form action={requestUsername}>
     <input type="text" name="username" />
-    <button type="submit">Request</button>
+    <button type="submit">حفظ</button>
   </form>
 }
 ```
 
-In this example `requestUsername` is a Server Action passed to a `<form>`. When a user submits this form, there is a network request to the server function `requestUsername`. When calling a Server Action in a form, React will supply the form's <CodeStep step={1}>[FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)</CodeStep> as the first argument to the Server Action.
+في هذا المثال، يتم تمرير `requestUsername` كـ Server Action إلى `<form>`. عندما يقوم المستخدم بإرسال هذا النموذج، يتم إرسال طلب شبكة إلى دالة الخادم `requestUsername`. عند استدعاء Server Action في نموذج، ستقوم React بتزويد <CodeStep step={1}>[FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)</CodeStep> النموذج كالوسيط الأول للـ Server Action.
 
-By passing a Server Action to the form `action`, React can [progressively enhance](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement) the form. This means that forms can be submitted before the JavaScript bundle is loaded.
+من خلال تمرير Server Action إلى `action`، يمكن لـ React [تحسين النموذج تدريجيًا](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement). وهذا يعني أنه يمكن إرسال النماذج قبل تحميل ملف JavaScript.
 
-#### Handling return values in forms {/*handling-return-values*/}
+#### معالجة القيم الراجعة من النماذج {/*handling-return-values*/}
 
-In the username request form, there might be the chance that a username is not available. `requestUsername` should tell us if it fails or not.
+في نموذج اسم المستخدم السابق، من المحتمل ألا يوجد username. في هذه الحالة يجب على `requrestUsername` أن يخبرنا إن كان فشل أم لا.
 
-To update the UI based on the result of a Server Action while supporting progressive enhancement, use [`useFormState`](/reference/react-dom/hooks/useFormState).
+لتحديث واجهة المستخدم اعتماد على نتيجة Server Action يمكنك استخدام [`useFormState`](/reference/react-dom/hooks/useFormState).
 
 ```js
 // requestUsername.js
@@ -194,13 +169,13 @@ function UsernameForm() {
 }
 ```
 
-Note that like most Hooks, `useFormState` can only be called in <CodeStep step={1}>[client code](/reference/react/use-client)</CodeStep>.
+لاحظ أن `useFormState` يمكن استخدامها فقط في <CodeStep step={1}>[client code](/reference/react/use-client)</CodeStep>.
 
-### Calling a Server Action outside of `<form>` {/*calling-a-server-action-outside-of-form*/}
+### استخدام Server Action خارج `<form>` {/*calling-a-server-action-outside-of-form*/}
 
-Server Actions are exposed server endpoints and can be called anywhere in client code.
+تعتبر Server Actions نقاط نهاية خادم (Endpoint) ويمكن استدعاؤها في أي مكان في كود العميل.
 
-When using a Server Action outside of a [form](/reference/react-dom/components/form), call the Server Action in a [transition](/reference/react/useTransition), which allows you to display a loading indicator, show [optimistic state updates](/reference/react/useOptimistic), and handle unexpected errors. Forms will automatically wrap Server Actions in transitions.
+عند استخدام Server Action خارج `<form>`، استدعها في [transition](/reference/react/useTransition)، والذي يسمح لك بعرض مؤشر التحميل، وعرض [تحديثات الحالة التفاؤلية](/reference/react/useOptimistic)، والتعامل مع الأخطاء غير المتوقعة. ستقوم النماذج تلقائيًا بتغليف Server Actions في transitions.
 
 ```js {9-12}
 import incrementLike from './actions';
@@ -231,11 +206,10 @@ function LikeButton() {
 'use server';
 
 let likeCount = 0;
-export default async incrementLike() {
+export default async function incrementLike() {
   likeCount++;
   return likeCount;
 }
 ```
 
-To read a Server Action return value, you'll need to `await` the promise returned.
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc
+لقراءة القيمة المرجعة، ستحتاج إلى `await` الـ Promise المرجعة.
\ No newline at end of file

From 358c4ca05cc7fcf821d0490f25679d752bdcffa1 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulbaset@gmail.com>
Date: Sun, 31 Dec 2023 00:02:30 +0200
Subject: [PATCH 51/52] revert use client page

---
 src/content/reference/react/use-client.md | 61 ++++-------------------
 1 file changed, 9 insertions(+), 52 deletions(-)

diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md
index 14b668987..351a92f68 100644
--- a/src/content/reference/react/use-client.md
+++ b/src/content/reference/react/use-client.md
@@ -5,18 +5,14 @@ canary: true
 ---
 
 <Canary>
-هذه التوجيهات لازمة فقط إذا كنت [تستخدم RSC (مكونات الخادم)](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) أو تبني مكتبة متوافقة معها.
 
+`'use client'` is needed only if you're [using React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) or building a library compatible with them.
 </Canary>
 
 
 <Intro>
 
-<<<<<<< HEAD
-`'use client'` تميز الملفات ليتم تنفيذ مكوناتها في جانب العميل
-=======
 `'use client'` lets you mark what code runs on the client.
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc
 
 </Intro>
 
@@ -24,13 +20,10 @@ canary: true
 
 ---
 
-## المرجع {/*reference*/}
+## Reference {/*reference*/}
 
 ### `'use client'` {/*use-client*/}
 
-<<<<<<< HEAD
-أضف `'use client'` في أعلى ملف لتمييزه (الملف أو أي مكونات فرعية يحتويها) بأنه يتم تنفيذه عند العميل، بغض النظر عن المكان الذي يتم استيراده منه.
-=======
 Add `'use client'` at the top of a file to mark the module and its transitive dependencies as client code.
 
 ```js {1}
@@ -71,7 +64,7 @@ To better illustrate this, consider the following React Server Components app.
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 import FancyText from './FancyText';
 import InspirationGenerator from './InspirationGenerator';
 import Copyright from './Copyright';
@@ -89,7 +82,7 @@ export default function App() {
 
 ```
 
-```js FancyText.js
+```js src/FancyText.js
 export default function FancyText({title, text}) {
   return title
     ? <h1 className='fancy title'>{text}</h1>
@@ -97,7 +90,7 @@ export default function FancyText({title, text}) {
 }
 ```
 
-```js InspirationGenerator.js
+```js src/InspirationGenerator.js
 'use client';
 
 import { useState } from 'react';
@@ -120,13 +113,13 @@ export default function InspirationGenerator({children}) {
 }
 ```
 
-```js Copyright.js
+```js src/Copyright.js
 export default function Copyright({year}) {
   return <p className='small'>©️ {year}</p>;
 }
 ```
 
-```js inspirations.js
+```js src/inspirations.js
 export default [
   "Don’t let yesterday take up too much of today.” — Will Rogers",
   "Ambition is putting a ladder against the sky.",
@@ -181,7 +174,6 @@ By the above definitions, the component `FancyText` is both a Server and Client
 First, let's clarify that the term "component" is not very precise. Here are just two ways "component" can be understood:
 
 1. A "component" can refer to a **component definition**. In most cases this will be a function.
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc
 
 ```js
 // This is a definition of a component
@@ -294,7 +286,7 @@ Notably, these are not supported:
 
 <Sandpack>
 
-```js App.js
+```js src/App.js
 'use client';
 
 import { useState } from 'react';
@@ -313,40 +305,6 @@ export default function Counter({initialValue = 0}) {
 }
 ```
 
-<<<<<<< HEAD
-عند استيراد ملف معلّم بعبارة `'use client'` من مكوّن في الخادم، ستعامل المجمّعات المتوافقة [bundlers](/learn/start-a-new-react-project#bleeding-edge-reace-frameworks) الاستيراد كـ"نقطة الفصل" بين كود الخادم وكود العميل. يمكن للمكونات الموجودة في هذه النقطة أو أسفلها في الرسم البياني للوحدة الأساسية استخدام الميزات React المخصصة للعميل مثل [`useState`](/reference/react/useState).
-
-#### ملاحظات {/*caveats*/}
-
-* ليس من الضرورة إضافة `'use client'` إلى كل ملف يستخدم ميزات React المخصصة للعميل، بل فقط في الملفات التي يتم استيرادها من ملفات عناصر الخادم. `'use client'` تُشير إلى الحدود بين الكود المخصص للخادم والعميل؛ أي مكونات تكون أسفل هذه الحدود في شجرة العناصر ستُنفَذ تلقائيًا على العميل. لكي يتم تقديمها من عناصر الخادم، يجب أن تحتوي المكونات المصدرة من ملفات `'use client'` على خصائص يمكن تسلسلها.
-
-* عند استيراد ملف `'use client'` من ملف خادم، يمكن تقديم القيم المستوردة كمكون React أو تمريرها عبر الـ props إلى مكون عميل. وأي استخدام آخر سيثير خطأ.
-
-* عند استيراد ملف 'use client' من ملف عميل آخر، فإن التوجيه لا يؤثر. هذا يسمح لك بكتابة مكونات خاصة بالعميل يمكن استخدامها في نفس الوقت من عناصر الخادم والعميل.
-
-* ستصبح جميع الأكواد في ملف `'use client'` وأي وحدات يتم استيرادها (مباشرة أو غير مباشرة) جزءًا من شبكة الوحدات الأساسية للعميل ويجب إرسالها وتنفيذها من قِبل العميل ليتم تقديمها من قبل المستعرض. لتقليل حجم حزمة العميل والاستفادة الكاملة من الخادم، قم بنقل الحالة (والتوجيهات `'use client'`) للأسفل في شجرة العناصر عند الحاجة، وقم بتمرير عناصر الخادم المقدمة [كأطفال (children)](/learn/passing-props-to-a-component#passing-jsx-as-children) إلى عناصر العميل.
-
-* نظرًا لأن الخصائص يتم تسلسلها عبر الحدود بين الخادم والعميل، يجب مراعاة أن موقع هذه التوجيهات يمكن أن يؤثر على كمية البيانات المرسلة إلى العميل؛ يُنصح بتجنب هياكل البيانات التي تكون أكبر من اللازم.
-
-* عادةً، يجب ألا يتم وضع `'use client'` على المكونات مثل `<MarkdownRenderer>` التي لا تستخدم ميزات خاصة بالخادم أو العميل. بهذه الطريقة، يمكنها التقديم حصريًا على الخادم عند استخدامها من عنصر خادم، ولكن ستُضاف إلى حزمة العميل عند استخدامها من عنصر عميل.
-
-* يجب أن تشمل المكتبات التي يتم نشرها على npm `'use client'` على المكونات المصدرة من React التي يمكن تقديمها باستخدام خصائص يمكن تسلسلها وتستخدم ميزات React المخصصة للعميل، للسماح بالاستيراد والتقديم من قِبل عناصر الخادم. وإلا، سيحتاج المستخدمون إلى لف مكونات المكتبة في أكوادهم الخاصة بـ `'use client'` وهذا قد يكون مرهقًا ويمنع المكتبة من نقل الخطط إلى الخادم لاحقًا. عند نشر الملفات المجمَّعة مُسبقًا على npm، تأكد من أن المكونات المصدرة مبدوءة بـ `'use client'`، منفصلة عن أي ملف يحتوي على تصديرات يمكن استخدامها مباشرة على الخادم.
-
-* ستستمر مكونات العميل في العمل كجزء من عملية تقديم جانب الخادم (SSR) أو إنشاء الموقع الثابت في وقت التجميع (SSG)، حيث يعملون كعملاء لتحويل الإخراج الأولي لمكونات React إلى HTML يمكن تقديمه قبل تنزيل حزم JavaScript. ولكنها لا يمكنها استخدام ميزات خاصة بالخادم مثل القراءة مباشرةً من قاعدة بيانات.
-
-* يجب أن تكون التوجيهات مثل `'use client'` في بداية الملف، قبل أي استيرادات أو أكواد أخرى (يمكن وضع تعليقات فوق التوجيهات). يجب كتابة التوجيهات باستخدام علامات اقتباس فردية أو مزدوجة، وليس علامات backtick. (تنسيق التوجيه `'use xyz'` يشبه إلى حد ما تنسيق اسماء الـ Hooks مثل `useXyz()`، ولكن هذا التشابه مجرد صدفة.)
-
-## الاستخدام {/*usage*/}
-
-<Wip>
-هذا القسم لم يكتمل بعد.
-
-يمكن استخدام هذا النهج في أي إطار عمل يدعم مكونات الخادم. يمكنك العثور على مظيد من المعلومات منهم:
-
-* [وثائق Next.js](https://nextjs.org/docs/getting-started/react-essentials)
-* المزيد يأتي لاحقا...
-</Wip>
-=======
 </Sandpack>
 
 As `Counter` requires both the `useState` Hook and event handlers to increment or decrement the value, this component must be a Client Component and will require a `'use client'` directive at the top.
@@ -418,5 +376,4 @@ These libraries may rely on component Hooks or client APIs. Third-party componen
 
 If these libraries have been updated to be compatible with React Server Components, then they will already include `'use client'` markers of their own, allowing you to use them directly from your Server Components. If a library hasn't been updated, or if a component needs props like event handlers that can only be specified on the client, you may need to add your own Client Component file in between the third-party Client Component and your Server Component where you'd like to use it.
 
-[TODO]: <> (Troubleshooting - need use-cases)
->>>>>>> fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc
+[TODO]: <> (Troubleshooting - need use-cases)
\ No newline at end of file

From eee5701348fea3530fee9ab9d8f1babc9a03b714 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulbaset@gmail.com>
Date: Sun, 31 Dec 2023 00:20:06 +0200
Subject: [PATCH 52/52] fix sandpack

---
 src/content/reference/react/use-client.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md
index 351a92f68..2a42b811f 100644
--- a/src/content/reference/react/use-client.md
+++ b/src/content/reference/react/use-client.md
@@ -64,7 +64,7 @@ To better illustrate this, consider the following React Server Components app.
 
 <Sandpack>
 
-```js src/App.js
+```js App.js
 import FancyText from './FancyText';
 import InspirationGenerator from './InspirationGenerator';
 import Copyright from './Copyright';
@@ -82,7 +82,7 @@ export default function App() {
 
 ```
 
-```js src/FancyText.js
+```js FancyText.js
 export default function FancyText({title, text}) {
   return title
     ? <h1 className='fancy title'>{text}</h1>
@@ -90,7 +90,7 @@ export default function FancyText({title, text}) {
 }
 ```
 
-```js src/InspirationGenerator.js
+```js InspirationGenerator.js
 'use client';
 
 import { useState } from 'react';
@@ -113,13 +113,13 @@ export default function InspirationGenerator({children}) {
 }
 ```
 
-```js src/Copyright.js
+```js Copyright.js
 export default function Copyright({year}) {
   return <p className='small'>©️ {year}</p>;
 }
 ```
 
-```js src/inspirations.js
+```js inspirations.js
 export default [
   "Don’t let yesterday take up too much of today.” — Will Rogers",
   "Ambition is putting a ladder against the sky.",
@@ -286,7 +286,7 @@ Notably, these are not supported:
 
 <Sandpack>
 
-```js src/App.js
+```js App.js
 'use client';
 
 import { useState } from 'react';
