Sync with react.dev @ c003ac4e

.github/workflows/analyze.yml

@@ -11,18 +11,18 @@ jobs:
  analyze:
  runs-on: ubuntu-latest
  steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v3
 
  - name: Set up node
- uses: actions/setup-node@v1
+ uses: actions/setup-node@v3
  with:
  node-version: '20.x'
 
  - name: Install dependencies
  uses: bahmutov/npm-install@v1.7.10
 
  - name: Restore next build
- uses: actions/cache@v2
+ uses: actions/cache@v3
  id: restore-build-cache
  env:
  cache-name: cache-next-build
@@ -41,7 +41,7 @@ jobs:
  run: npx -p nextjs-bundle-analysis@0.5.0 report
 
  - name: Upload bundle
- uses: actions/upload-artifact@v2
+ uses: actions/upload-artifact@v3
  with:
  path: .next/analyze/__bundle_analysis.json
  name: bundle_analysis.json
@@ -73,7 +73,7 @@ jobs:
  run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
 
  - name: Upload analysis comment
- uses: actions/upload-artifact@v2
+ uses: actions/upload-artifact@v3
  with:
  name: analysis_comment.txt
  path: .next/analyze/__bundle_analysis_comment.txt
@@ -82,7 +82,7 @@ jobs:
  run: echo ${{ github.event.number }} > ./pr_number
 
  - name: Upload PR number
- uses: actions/upload-artifact@v2
+ uses: actions/upload-artifact@v3
  with:
  name: pr_number
  path: ./pr_number

src/components/Layout/Footer.tsx

@@ -283,7 +283,7 @@ export function Footer() {
  <div
  className="text-xs text-left rtl:text-right mt-2 pe-0.5"
  dir="ltr">
- &copy;{new Date().getFullYear()}
+ Copyright &copy; Meta Platforms, Inc
  </div>
  <div
  className="uwu-visible text-xs cursor-pointer hover:text-link hover:dark:text-link-dark hover:underline"

src/content/blog/2023/03/16/introducing-react-dev.md

@@ -269,7 +269,7 @@ Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn
 function Item({ name, isPacked }) {
  return (
  <li className="item">
- {name} {isPacked && '✔'}
+ {name} {isPacked && '✅'}
  </li>
  );
 }
@@ -307,7 +307,7 @@ export default function PackingList() {
 function Item({ name, isPacked }) {
  return (
  <li className="item">
- {name} {isPacked ? '✔' : '❌'}
+ {name} {isPacked ? '✅' : '❌'}
  </li>
  );
 }

src/content/community/conferences.md

@@ -10,26 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {/*upcoming-conferences*/}
 
-### React Nexus 2024 {/*react-nexus-2024*/}
-July 04 & 05, 2024. Bangalore, India (In-person event)
-
-[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
-
-### Chain React 2024 {/*chain-react-2024*/}
-July 17-19, 2024. In-person in Portland, OR, USA
-
-[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)
-
-### The Geek Conf 2024 {/*the-geek-conf-2024*/}
-July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)
-
-[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)
-
-### React Rally 2024 🐙 {/*react-rally-2024*/}
-August 12-13, 2024. Park City, UT, USA
-
-[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)
-
 ### React Universe Conf 2024 {/*react-universe-conf-2024*/}
 September 5-6, 2024. Wrocław, Poland.
 
@@ -55,13 +35,48 @@ October 18, 2024. In-person in Brussels, Belgium (hybrid event)
 
 [Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)
 
+### React Advanced London 2024 {/*react-advanced-london-2024*/}
+October 25 & 28, 2024. In-person in London, UK + online (hybrid event)
+
+[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
+
+### React Summit US 2024 {/*react-summit-us-2024*/}
+November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)
+
+[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
+
 ### React Africa 2024 {/*react-africa-2024*/}
 November 29, 2024. In-person in Casablanca, Morocco (hybrid event)
 
 [Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)
 
+### React Day Berlin 2024 {/*react-day-berlin-2024*/}
+December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)
+
+[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)
+
 ## Past Conferences {/*past-conferences*/}
 
+### React Rally 2024 🐙 {/*react-rally-2024*/}
+August 12-13, 2024. Park City, UT, USA
+
+[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)
+
+### The Geek Conf 2024 {/*the-geek-conf-2024*/}
+July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)
+
+[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)
+
+### Chain React 2024 {/*chain-react-2024*/}
+July 17-19, 2024. In-person in Portland, OR, USA
+
+[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)
+
+### React Nexus 2024 {/*react-nexus-2024*/}
+July 04 & 05, 2024. Bangalore, India (In-person event)
+
+[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
+
 ### React Summit 2024 {/*react-summit-2024*/}
 June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event)
 

src/content/learn/conditional-rendering.md

@@ -52,13 +52,13 @@ export default function PackingList() {
 
 </Sandpack>
 
-لاحظ أن بعض مكونات `Item` لديها خاصية `isPacked` معينة إلى `true` بدلا من `false`. ترغب في إضافة علامة التحقق (✔) إلى العناصر المحزومة في حالة `isPacked={true}`.
+لاحظ أن بعض مكونات `Item` لديها خاصية `isPacked` معينة إلى `true` بدلا من `false`. ترغب في إضافة علامة التحقق (✅) إلى العناصر المحزومة في حالة `isPacked={true}`.
 
 يمكنك كتابة ذلك باستخدام [عبارة `if`/`else`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) على النحو التالي:
 
 ```js
 if (isPacked) {
- return <li className="item">{name} ✔</li>;
+ return <li className="item">{name} ✅</li>;
 }
 return <li className="item">{name}</li>;
 ```
@@ -70,7 +70,7 @@ return <li className="item">{name}</li>;
 ```js
 function Item({ name, isPacked }) {
  if (isPacked) {
- return <li className="item">{name} ✔</li>;
+ return <li className="item">{name} ✅</li>;
  }
  return <li className="item">{name}</li>;
 }
@@ -159,7 +159,7 @@ export default function PackingList() {
 في المثال السابق، تحكمت في شجرة JSX (إن وجدت!) التي سيُرجعها المكون. ربما لاحظت بالفعل بعض التكرار في ناتج العرض:
 
 ```js
-<li className="item">{name} ✔</li>
+<li className="item">{name} ✅</li>
 ```
 
 مشابه جدًا لـ
@@ -172,7 +172,7 @@ export default function PackingList() {
 
 ```js
 if (isPacked) {
- return <li className="item">{name} ✔</li>;
+ return <li className="item">{name} ✅</li>;
 }
 return <li className="item">{name}</li>;
 ```
@@ -187,7 +187,7 @@ return <li className="item">{name}</li>;
 
 ```js
 if (isPacked) {
- return <li className="item">{name} ✔</li>;
+ return <li className="item">{name} ✅</li>;
 }
 return <li className="item">{name}</li>;
 ```
@@ -197,12 +197,12 @@ return <li className="item">{name}</li>;
 ```js
 return (
  <li className="item">
- {isPacked ? name + ' ✔' : name}
+ {isPacked ? name + ' ✅' : name}
  </li>
 );
 ```
 
-يمكنك قرائتها على النحو التالي *”إذا كان `isPacked` صحيحا، إذا قم بعرض `name + ' ✔'`، وإلا (`:`) قم بعرض `name`“.*
+يمكنك قرائتها على النحو التالي *”إذا كان `isPacked` صحيحا، إذا قم بعرض name + ' ✅'`، وإلا (`:`) قم بعرض `name`“.*
 
 <DeepDive>
 
@@ -222,7 +222,7 @@ function Item({ name, isPacked }) {
  <li className="item">
  {isPacked ? (
  <del>
- {name + ' ✔'}
+ {name + ' ✅'}
  </del>
  ) : (
  name
@@ -265,7 +265,7 @@ export default function PackingList() {
 ```js
 return (
  <li className="item">
- {name} {isPacked && '✔'}
+ {name} {isPacked && '✅'}
  </li>
 );
 ```
@@ -280,7 +280,7 @@ return (
 function Item({ name, isPacked }) {
  return (
  <li className="item">
- {name} {isPacked && '✔'}
+ {name} {isPacked && '✅'}
  </li>
  );
 }
@@ -336,7 +336,7 @@ let itemContent = name;
 
 ```js
 if (isPacked) {
- itemContent = name + " ✔";
+ itemContent = name + " ✅";
 }
 ```
 
@@ -356,7 +356,7 @@ if (isPacked) {
 function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
- itemContent = name + " ✔";
+ itemContent = name + " ✅";
  }
  return (
  <li className="item">
@@ -400,7 +400,7 @@ function Item({ name, isPacked }) {
  if (isPacked) {
  itemContent = (
  <del>
- {name + " ✔"}
+ {name + " ✅"}
  </del>
  );
  }
@@ -461,7 +461,7 @@ export default function PackingList() {
 function Item({ name, isPacked }) {
  return (
  <li className="item">
- {name} {isPacked && '✔'}
+ {name} {isPacked && '✅'}
  </li>
  );
 }
@@ -499,7 +499,7 @@ export default function PackingList() {
 function Item({ name, isPacked }) {
  return (
  <li className="item">
- {name} {isPacked ? '✔' : '❌'}
+ {name} {isPacked ? '✅' : '❌'}
  </li>
  );
 }

src/content/learn/describing-the-ui.md

@@ -326,7 +326,7 @@ export function getImageUrl(person, size = 's') {
 function Item({ name, isPacked }) {
  return (
  <li className="item">
- {name} {isPacked && '✔'}
+ {name} {isPacked && '✅'}
  </li>
  );
 }

src/content/learn/you-might-not-need-an-effect.md

@@ -408,9 +408,9 @@ function Game() {
 
 There are two problems with this code.
 
-One problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below.
+The first problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below.
 
-Even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile.
+The second problem is that even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile.
 
 In this case, it's better to calculate what you can during rendering, and adjust the state in the event handler:
 

src/content/reference/react-dom/components/index.md

@@ -34,7 +34,7 @@ They are special in React because passing the `value` prop to them makes them *[
 
 ## Resource and Metadata Components {/*resource-and-metadata-components*/}
 
-These bulit-in browser components let you load external resources or annotate the document with metadata:
+These built-in browser components let you load external resources or annotate the document with metadata:
 
 * [`<link>`](/reference/react-dom/components/link)
 * [`<meta>`](/reference/react-dom/components/meta)

src/content/reference/react/cache.md

@@ -226,7 +226,7 @@ By caching a long-running data fetch, you can kick off asynchronous work prior t
 ```jsx [[2, 6, "await getUser(id)"], [1, 17, "getUser(id)"]]
 const getUser = cache(async (id) => {
  return await db.user.query(id);
-})
+});
 
 async function Profile({id}) {
  const user = await getUser(id);
@@ -327,7 +327,7 @@ In general, you should use [`useMemo`](/reference/react/useMemo) for caching a e
 'use client';
 
 function WeatherReport({record}) {
- const avgTemp = useMemo(() => calculateAvg(record)), record);
+ const avgTemp = useMemo(() => calculateAvg(record), record);
  // ...
 }
 

src/content/reference/react/index.md

@@ -15,7 +15,7 @@ The React reference documentation is broken down into functional subsections:
 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.
+* [Components](/reference/react/components) - Built-in components that you can use in your JSX.
 * [APIs](/reference/react/apis) - APIs that are useful for defining components.
 * [Directives](/reference/rsc/directives) - Provide instructions to bundlers compatible with React Server Components.
 

src/content/reference/react/lazy.md

@@ -78,7 +78,7 @@ Now that your component's code loads on demand, you also need to specify what sh
 <Suspense fallback={<Loading />}>
  <h2>Preview</h2>
  <MarkdownPreview />
- </Suspense>
+</Suspense>
 ```
 
 In this example, the code for `MarkdownPreview` won't be loaded until you attempt to render it. If `MarkdownPreview` hasn't loaded yet, `Loading` will be shown in its place. Try ticking the checkbox:

src/content/reference/react/useCallback.md

@@ -711,7 +711,7 @@ function ChatRoom({ roomId }) {
 
  useEffect(() => {
  const options = createOptions();
- const connection = createConnection();
+ const connection = createConnection(options);
  connection.connect();
  // ...
 ```
@@ -722,7 +722,7 @@ This creates a problem. [Every reactive value must be declared as a dependency o
 ```js {6}
  useEffect(() => {
  const options = createOptions();
- const connection = createConnection();
+ const connection = createConnection(options);
  connection.connect();
  return () => connection.disconnect();
  }, [createOptions]); // 🔴 Problem: This dependency changes on every render
@@ -744,7 +744,7 @@ function ChatRoom({ roomId }) {
 
  useEffect(() => {
  const options = createOptions();
- const connection = createConnection();
+ const connection = createConnection(options);
  connection.connect();
  return () => connection.disconnect();
  }, [createOptions]); // ✅ Only changes when createOptions changes
@@ -766,7 +766,7 @@ function ChatRoom({ roomId }) {
  }
 
  const options = createOptions();
- const connection = createConnection();
+ const connection = createConnection(options);
  connection.connect();
  return () => connection.disconnect();
  }, [roomId]); // ✅ Only changes when roomId changes