Merge pull request #37 from reactjs/sync-68f417a6

Sync with react.dev @ 68f417a

src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md

@@ -8,7 +8,7 @@ June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](http
 
 <Intro>
 
-[React 18](https://reactjs.org/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
+[React 18](https://react.dev/blog/2022/03/29/react-v18) was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.
 
 </Intro>
 

src/content/community/conferences.md

@@ -55,7 +55,6 @@ 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)
 
@@ -66,6 +65,11 @@ 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)
 
+### App.js Conf 2024 {/*appjs-conf-2024*/}
+May 22 - 24, 2024. In-person in Kraków, Poland + remote
+
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+
 ### Render(ATL) 2024 🍑 {/*renderatl-2024-*/}
 June 12 - June 14, 2024. Atlanta, GA, USA
 

src/content/learn/referencing-values-with-refs.md

@@ -284,7 +284,7 @@ You also don't need to worry about [avoiding mutation](/learn/updating-objects-i
 
 ## Refs and the DOM {/*refs-and-the-dom*/}
 
-You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `<div ref={myRef}>`, React will put the corresponding DOM element into `myRef.current`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
+You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `<div ref={myRef}>`, React will put the corresponding DOM element into `myRef.current`. Once the element is removed from the DOM, React will update `myRef.current` to be `null`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
 
 <Recap>
 

src/content/learn/rendering-lists.md

@@ -1086,7 +1086,7 @@ export const recipes = [{
 
 #### Спіс з раздзяляльнікам {/*list-with-a-separator*/}
 
-У гэтым прыкладзе рэндэрыцца знакамітае хайку Кацусіка Хокусая, кожны радок якога абгорнуты тэгам `<p>`. Ваша задача — уставіць раздзяляльнік `<hr />` паміж кожным абзацам. Ваша выніковая структура павінна выглядаць так:
+У гэтым прыкладзе рэндэрыцца знакамітае хайку Тацібана Хокусі, кожны радок якога абгорнуты тэгам `<p>`. Ваша задача — уставіць раздзяляльнік `<hr />` паміж кожным абзацам. Ваша выніковая структура павінна выглядаць так:
 
 ```js
 <article>

src/content/learn/start-a-new-react-project.md

@@ -21,12 +21,12 @@ title: Пачаць новы React праект
 **[Next.js](https://nextjs.org/) — гэта ўніверсальны фулстэк React фрэймворк.** З яго дапамогай вы можаце ствараць сайты любога памеру ад простага статычнага блога да складанага дынамічнага сайта. Каб стварыць новы Next.js праект, запусціце ў вашым тэрмінале:
 
 <TerminalBlock>
-npx create-next-app
+npx create-next-app@latest
 </TerminalBlock>
 
 Для знаёмства з Next.js вы можаце азнаёміцца з іх [падручнікам па Next.js.](https://nextjs.org/learn/foundations/about-nextjs)
 
-Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [разгарнуць Next.js](https://nextjs.org/docs/deployment) на любым бессерверным хостынгу, Node.js хостынгу або на вашым уласным серверы. [Цалкам статычную праграму на Next.js](https://nextjs.org/docs/advanced-features/static-html-export) можна разгарнуць на любым статычным хостынгу.
+Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [разгарнуць Next.js](https://nextjs.org/docs/app/building-your-application/deploying) на любым бессерверным хостынгу, Node.js хостынгу або на вашым уласным серверы. [Цалкам статычную праграму на Next.js](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) можна разгарнуць на любым статычным хостынгу.
 
 ### Remix {/*remix*/}
 
@@ -89,13 +89,19 @@ React дакладна можна выкарыстоўваць без фрэйм
 
 ### Next.js (App Router) {/*nextjs-app-router*/}
 
+<<<<<<< HEAD
 **[Next.js App Router](https://beta.nextjs.org/docs/getting-started) — гэта абноўлены API Next.js, які адпавядае таму, як каманда React бачыць архітэктуру фулстэк-праграм сёння.** Ён дазваляе загружаць даныя ў асінхронных кампанентах на серверы або нават падчас зборкі.
 
 Next.js падтрымліваецца [Vercel](https://vercel.com/). Вы можаце [разгарнуць Next.js праграму](https://nextjs.org/docs/deployment) на любым Node.js або бессерверным хостынгу, або на вашым уласным серверы. Next.js таксама падтрымлівае [статычны экспарт](https://beta.nextjs.org/docs/configuring/static-export), які не патрабуе сервера.
 <Pitfall>
 
 Next.js App Router **у цяперашні час знаходзіцца ў бэта-версіі і пакуль не рэкамендуецца для выкарыстання ў працоўным асяроддзі** (па стане на сакавік 2023 году). Каб паэксперыментаваць з ім у існуючым праекце Next.js, [прытрымлівайцеся гэтага кіраўніцтва па паступовай міграцыі](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app).
 </Pitfall>
+=======
+**[Next.js's App Router](https://nextjs.org/docs) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build.
+
+Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server.
+>>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909
 
 <DeepDive>
 

src/content/learn/tutorial-tic-tac-toe.md

@@ -2073,7 +2073,13 @@ export default function Game() {
 }
 ```
 
-You can see what your code should look like below. Note that you should see an error in the developer tools console that says: ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` You'll fix this error in the next section.
+You can see what your code should look like below. Note that you should see an error in the developer tools console that says: 
+
+<ConsoleBlock level="warning">
+Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of &#96;Game&#96;.
+</ConsoleBlock>
+  
+You'll fix this error in the next section.
 
 <Sandpack>
 

src/content/reference/react/Profiler.md

@@ -58,7 +58,7 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime
 * `actualDuration`: The number of milliseconds spent rendering the `<Profiler>` and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. [`memo`](/reference/react/memo) and [`useMemo`](/reference/react/useMemo)). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
 * `baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `<Profiler>` subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration` against it to see if memoization is working.
 * `startTime`: A numeric timestamp for when React began rendering the current update.
-* `endTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
+* `commitTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
 
 ---
 

src/content/reference/react/useMemo.md

@@ -647,7 +647,7 @@ In this example, the `List` component is **artificially slowed down** so that yo
 
 Switching the tabs feels slow because it forces the slowed down `List` to re-render. That's expected because the `tab` has changed, and so you need to reflect the user's new choice on the screen.
 
-Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleItems` array has not changed since the last render. The `visibleItems` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render.
+Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleTodos` array has not changed since the last render. The `visibleTodos` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render.
 
 <Sandpack>