diff --git a/src/components/Icon/IconTwitter.tsx b/src/components/Icon/IconTwitter.tsx
index 951171524..e7b0cf09e 100644
--- a/src/components/Icon/IconTwitter.tsx
+++ b/src/components/Icon/IconTwitter.tsx
@@ -9,13 +9,13 @@ export const IconTwitter = memo(
return (
);
}
diff --git a/src/components/MDX/Heading.tsx b/src/components/MDX/Heading.tsx
index 50e209e74..a9f3efc38 100644
--- a/src/components/MDX/Heading.tsx
+++ b/src/components/MDX/Heading.tsx
@@ -88,3 +88,11 @@ export const H4 = ({className, ...props}: HeadingProps) => (
{...props}
/>
);
+
+export const H5 = ({className, ...props}: HeadingProps) => (
+
+);
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index a35a15147..8344f9770 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -11,7 +11,7 @@ import {CodeDiagram} from './CodeDiagram';
import ConsoleBlock from './ConsoleBlock';
import ExpandableCallout from './ExpandableCallout';
import ExpandableExample from './ExpandableExample';
-import {H1, H2, H3, H4} from './Heading';
+import {H1, H2, H3, H4, H5} from './Heading';
import InlineCode from './InlineCode';
import Intro from './Intro';
import BlogCard from './BlogCard';
@@ -388,6 +388,7 @@ export const MDXComponents = {
h2: H2,
h3: H3,
h4: H4,
+ h5: H5,
hr: Divider,
a: Link,
img: Image,
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 974e4a825..2f67c4754 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,27 +10,52 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
## Upcoming Conferences {/*upcoming-conferences*/}
-### React Rally 2023 🐙 {/*react-rally-2023*/}
-August 17 & 18, 2023. Salt Lake City, UT, USA
+### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/}
+September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event)
-[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)
+[Website](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs)
+
+### React Alicante 2023 {/*react-alicante-2023*/}
+September 28 - 30, 2023. Alicante, Spain
+
+[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante)
+
+### React Live 2023 {/*react-live-2023*/}
+September 29, 2023. Amsterdam, Netherlands
+
+[Website](https://reactlive.nl/)
### React Native EU 2023 {/*react-native-eu-2023*/}
September 7 & 8, 2023. Wrocław, Poland
[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)
+### RenderCon Kenya 2023 {/*rendercon-kenya-2023*/}
+September 29 - 30, 2023. Nairobi, Kenya
+
+[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
### React India 2023 {/*react-india-2023*/}
October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
+### React Brussels 2023 {/*react-brussels-2023*/}
+October 13th 2023. In-person in Brussels, Belgium + Remote (hybrid)
+
+[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact)
+
### React Advanced 2023 {/*react-advanced-2023*/}
October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event)
[Website](https://www.reactadvanced.com/) - [Twitter](https://twitter.com/ReactAdvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://portal.gitnation.org/events/react-advanced-conference-2023)
+### reactjsday 2023 {/*reactjsday-2023*/}
+October 27th 2023. In-person in Verona, Italy and online (hybrid event)
+
+[Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
+
+
### React Summit US 2023 {/*react-summit-us-2023*/}
November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)
@@ -41,8 +66,18 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity
[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023)
+### Render(ATL) 2024 🍑 {/*renderatl-2024-*/}
+June 12 - June 14, 2024. Atlanta, GA, USA
+
+[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/)
+
## Past Conferences {/*past-conferences*/}
+### React Rally 2023 🐙 {/*react-rally-2023*/}
+August 17 & 18, 2023. Salt Lake City, UT, USA
+
+[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)
+
### React Nexus 2023 {/*react-nexus-2023*/}
July 07 & 08, 2023. Bangalore, India (In-person event)
@@ -516,7 +551,7 @@ August 18 in Guangzhou, China
[Website](https://react.w3ctech.com)
-### React Rally 2018{/*react-rally-2018*/}
+### React Rally 2018 {/*react-rally-2018*/}
August 16-17 in Salt Lake City, Utah USA
[Website](http://www.reactrally.com) - [Twitter](https://twitter.com/reactrally)
diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index 214688597..1c9c341fb 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -935,7 +935,7 @@ Clicking "next" again
-Each `Counter`'s state gets destroyed each time its removed from the DOM. This is why they reset every time you click the button.
+Each `Counter`'s state gets destroyed each time it's removed from the DOM. This is why they reset every time you click the button.
This solution is convenient when you only have a few independent components rendered in the same place. In this example, you only have two, so it's not a hassle to render both separately in the JSX.
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index c46b9f2a0..5b66365b6 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -2309,9 +2309,13 @@ body {
عصام: 5 مهمات متبقية
```
+<<<<<<< HEAD
بالإضافة إلى العدادات المحدثة، فإن الإنسان الذي يقرأ هذا سيقول على الأرجح أنك قمت بتبديل ترتيب عصام وهند، وأضفت سعيد بينهما، ومع ذلك React هو برنامج حاسوبي ولا يمكنه معرفة ما كنت تقصده، لذا تحتاج إلى تحديد خاصية مفتاحية _key_ لكل عنصر في القائمة للتمييز بين كل عنصر في القائمة وإخوته. إذا كانت بياناتك من قاعدة بيانات، فيمكن استخدام معرفات قاعدة بيانات الفريدة (ID). أقصد المعرف الخاص بهند وعصام وسعيد.
عندما لا يكون لديك معرفات مستقرة لتصيير العناصر، ربما تستخدم المسلسل كمفتاح كحل أخير:
+=======
+In addition to the updated counts, a human reading this would probably say that you swapped Alexa and Ben's ordering and inserted Claudia between Alexa and Ben. However, React is a computer program and does not know what you intended, so you need to specify a _key_ property for each list item to differentiate each list item from its siblings. If your data was from a database, Alexa, Ben, and Claudia's database IDs could be used as keys.
+>>>>>>> 5219d736a7c181a830f7646e616eb97774b43272
```js {1}
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index 5695b755f..56fa5be5b 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -20,7 +20,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. Out
## Installation {/*installation*/}
-All [production-grade React frameworks](https://react-dev-git-fork-orta-typescriptpage-fbopensource.vercel.app/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
+All [production-grade React frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
- [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript)
- [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 46710908c..0dbdc1537 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -52,7 +52,7 @@ These `
}>
+
+
+ );
+}
+```
+
+The Client Component then takes the Promise it received as a prop and passes it to the `use` Hook. This allows the Client Component to read the value from the Promise that was initially created by the Server Component.
+
+```js [[2, 6, "Message"], [4, 6, "messagePromise"], [4, 7, "messagePromise"], [5, 7, "use"]]
+// message.js
+'use client';
+
+import { use } from 'react';
+
+export function Message({ messagePromise }) {
+ const messageContent = use(messagePromise);
+ return
Here is the message: {messageContent}
;
+}
+```
+Because `Message` is wrapped in [`Suspense`](/reference/react/Suspense), the fallback will be displayed until the Promise is resolved. When the Promise is resolved, the value will be read by the `use` Hook and the `Message` component will replace the Suspense fallback.
+
+
+
+```js message.js active
+"use client";
+
+import { use, Suspense } from "react";
+
+function Message({ messagePromise }) {
+ const messageContent = use(messagePromise);
+ return
Here is the message: {messageContent}
;
+}
+
+export function MessageContainer({ messagePromise }) {
+ return (
+ ⌛Downloading message...}>
+
+
+ );
+}
+```
+
+```js App.js hidden
+import { useState } from "react";
+import { MessageContainer } from "./message.js";
+
+function fetchMessage() {
+ return new Promise((resolve) => setTimeout(resolve, 1000, "⚛️"));
+}
+
+export default function App() {
+ const [messagePromise, setMessagePromise] = useState(null);
+ const [show, setShow] = useState(false);
+ function download() {
+ setMessagePromise(fetchMessage());
+ setShow(true);
+ }
+
+ if (show) {
+ return ;
+ } else {
+ return ;
+ }
+}
+```
+
+```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(
+
+
+
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "18.3.0-canary-9377e1010-20230712",
+ "react-dom": "18.3.0-canary-9377e1010-20230712",
+ "react-scripts": "^5.0.0"
+ },
+ "main": "/index.js"
+}
+```
+
+
+
+
+When passing a Promise from a Server Component to a Client Component, its resolved value must be serializable to pass between server and client. Data types like functions aren't serializable and cannot be the resolved value of such a Promise.
+
+
+
+
+
+
+#### 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.
+
+```js
+export default function App() {
+ const messageContent = await fetchMessage();
+ return
+}
+```
+
+But using `await` in a [Server Component](/reference/react/components#server-components) will block its rendering until the `await` statement is finished. Passing a Promise from a Server Component to a Client Component prevents the Promise from blocking the rendering of the Server Component.
+
+
+
+### Dealing with rejected Promises {/*dealing-with-rejected-promises*/}
+
+In some cases a Promise passed to `use` could be rejected. You can handle rejected Promises by either:
+
+1. [Displaying an error to users with error boundary.](#displaying-an-error-to-users-with-error-boundary)
+2. [Providing an alternative value with `Promise.catch`](#providing-an-alternative-value-with-promise-catch)
+
+
+`use` cannot be called in a try-catch block. Instead of a try-catch block [wrap your component in an Error Boundary](#displaying-an-error-to-users-with-error-boundary), or [provide an alternative value to use with the Promise's `.catch` method](#providing-an-alternative-value-with-promise-catch).
+
+
+#### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
+
+If you'd like to display an error to your users when a Promise is rejected, you can use 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 `use` Hook in an error boundary. If the Promise passed to `use` is rejected the fallback for the error boundary will be displayed.
+
+
+
+```js message.js active
+"use client";
+
+import { use, Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+export function MessageContainer({ messagePromise }) {
+ return (
+ ⚠️Something went wrong}>
+ ⌛Downloading message...}>
+
+
+
+ );
+}
+
+function Message({ messagePromise }) {
+ const content = use(messagePromise);
+ return
Here is the message: {content}
;
+}
+```
+
+```js App.js hidden
+import { useState } from "react";
+import { MessageContainer } from "./message.js";
+
+function fetchMessage() {
+ return new Promise((resolve, reject) => setTimeout(reject, 1000));
+}
+
+export default function App() {
+ const [messagePromise, setMessagePromise] = useState(null);
+ const [show, setShow] = useState(false);
+ function download() {
+ setMessagePromise(fetchMessage());
+ setShow(true);
+ }
+
+ if (show) {
+ return ;
+ } else {
+ return ;
+ }
+}
+```
+
+```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(
+
+
+
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "18.3.0-canary-9377e1010-20230712",
+ "react-dom": "18.3.0-canary-9377e1010-20230712",
+ "react-scripts": "^5.0.0",
+ "react-error-boundary": "4.0.3"
+ },
+ "main": "/index.js"
+}
+```
+
+
+#### Providing an alternative value with `Promise.catch` {/*providing-an-alternative-value-with-promise-catch*/}
+
+If you'd like to provide an alternative value when the Promise passed to `use` is rejected you can use the Promise's [`catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) method.
+
+```js [[1, 6, "catch"],[2, 7, "return"]]
+import { Message } from './message.js';
+
+export default function App() {
+ const messagePromise = new Promise((resolve, reject) => {
+ reject();
+ }).catch(() => {
+ return "no new message found.";
+ });
+
+ return (
+ waiting for message...}>
+
+
+ );
+}
+```
+
+To use the Promise's `catch` method, call `catch` on the Promise object. `catch` takes a single argument: a function that takes an error message as an argument. Whatever is returned by the function passed to `catch` will be used as the resolved value of the Promise.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### "Suspense Exception: This is not a real error!" {/*suspense-exception-error*/}
+
+You are either calling `use` outside of a React component or Hook function, or calling `use` in a try–catch block. If you are calling `use` inside a try–catch block, wrap your component in an error boundary, or call the Promise's `catch` to catch the error and resolve the Promise with another value. [See these examples](#dealing-with-rejected-promises).
+
+If you are calling `use` outside a React component or Hook function, move the `use` call to a React component or Hook function.
+
+```jsx
+function MessageComponent({messagePromise}) {
+ function download() {
+ // ❌ the function calling `use` is not a Component or Hook
+ const message = use(messagePromise);
+ // ...
+```
+
+Instead, call `use` outside any component closures, where the function that calls `use` is a component or Hook.
+
+```jsx
+function MessageComponent({messagePromise}) {
+ // ✅ `use` is being called from a component.
+ const message = use(messagePromise);
+ // ...
+```
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 64b892d6a..a71846aa6 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -10,6 +10,11 @@
"title": "Hooks",
"path": "/reference/react",
"routes": [
+ {
+ "title": "use",
+ "path": "/reference/react/use",
+ "canary": true
+ },
{
"title": "useCallback",
"path": "/reference/react/useCallback"
@@ -98,6 +103,11 @@
"title": "APIs",
"path": "/reference/react/apis",
"routes": [
+ {
+ "title": "cache",
+ "path": "/reference/react/cache",
+ "canary": true
+ },
{
"title": "createContext",
"path": "/reference/react/createContext"