Sync with react.dev @ c2d61310

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

@@ -55,6 +55,11 @@ 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 Africa 2024 {/*react-africa-2024*/}
 November 29, 2024. In-person in Casablanca, Morocco (hybrid event)
 

src/content/learn/conditional-rendering.md

@@ -52,13 +52,13 @@ export default function PackingList() {
 
 </Sandpack>
 
-Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`.
+Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✅) to packed items if `isPacked={true}`.
 
 You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so:
 
 ```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 @@ If the `isPacked` prop is `true`, this code **returns a different JSX tree.** Wi
 ```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 @@ In practice, returning `null` from a component isn't common because it might sur
 In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output:
 
 ```js
-<li className="item">{name} ✔</li>
+<li className="item">{name} ✅</li>
 ```
 
 is very similar to
@@ -172,7 +172,7 @@ Both of the conditional branches return `<li className="item">...</li>`:
 
 ```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 @@ Instead of this:
 
 ```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 @@ You can write this:
 ```js
 return (
  <li className="item">
- {isPacked ? name + ' ✔' : name}
+ {isPacked ? name + ' ✅' : name}
  </li>
 );
 ```
 
-You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`"*.
+You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✅'`, otherwise (`:`) render `name`"*.
 
 <DeepDive>
 
@@ -222,7 +222,7 @@ function Item({ name, isPacked }) {
  <li className="item">
  {isPacked ? (
  <del>
- {name + ' ✔'}
+ {name + ' ✅'}
  </del>
  ) : (
  name
@@ -265,7 +265,7 @@ Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) o
 ```js
 return (
  <li className="item">
- {name} {isPacked && '✔'}
+ {name} {isPacked && '✅'}
  </li>
 );
 ```
@@ -280,7 +280,7 @@ Here it is in action:
 function Item({ name, isPacked }) {
  return (
  <li className="item">
- {name} {isPacked && '✔'}
+ {name} {isPacked && '✅'}
  </li>
  );
 }
@@ -337,7 +337,7 @@ Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked
 
 ```js
 if (isPacked) {
- itemContent = name + " ✔";
+ itemContent = name + " ✅";
 }
 ```
 
@@ -357,7 +357,7 @@ This style is the most verbose, but it's also the most flexible. Here it is in a
 function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
- itemContent = name + " ✔";
+ itemContent = name + " ✅";
  }
  return (
  <li className="item">
@@ -401,7 +401,7 @@ function Item({ name, isPacked }) {
  if (isPacked) {
  itemContent = (
  <del>
- {name + " ✔"}
+ {name + " ✅"}
  </del>
  );
  }
@@ -464,7 +464,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>
  );
 }
@@ -502,7 +502,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

@@ -327,7 +327,7 @@ In this example, the JavaScript `&&` operator is used to conditionally render a
 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.
+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/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.
 

vercel.json

@@ -24,6 +24,11 @@
  "destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key",
  "permanent": false
  },
+ {
+ "source": "/docs/lists-and-keys",
+ "destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key",
+ "permanent": false
+ },
  {
  "source": "/link/invalid-hook-call",
  "destination": "/warnings/invalid-hook-call-warning",