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

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>` 標籤包覆。你需要在段落之間插入分隔線，結果大概會像這個樣子：
+這個範例展示了葛飾北斎一首著名的俳句，它的每一行都由 `<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 框架。** 它非常靈活，讓你可以建立任何大小的 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 或 serverless 主機，或是你自己的伺服器上。[完全靜態的 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 或 serverless 主機，或是你自己的伺服器上。Next.js 也支援 [static export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports)，它不需要伺服器。
 
 ### Remix {/*remix*/}
 
@@ -89,14 +89,9 @@ Expo 由 [Expo（公司）](https://expo.dev/about)維護。使用 Expo 構建
 
 ### Next.js (App Router) {/*nextjs-app-router*/}
 
-**[Next.js 的 App Router](https://beta.nextjs.org/docs/getting-started) 是 Next.js API 的重新設計，旨在實現 React 團隊的全端架構願景。** 它允許你在執行於伺服器上或甚至是構建期間的非同步（asynchronous） component 中取得資料。
+**[Next.js 的 App Router](https://nextjs.org/docs) 是 Next.js API 的重新設計，旨在實現 React 團隊的全端架構願景。**它允許你在執行於伺服器上或甚至是構建期間的非同步（asynchronous） component 中取得資料。
 
-Next.js 由 [Vercel](https://vercel.com/) 維護。你可以將 Next.js 應用程式部署到任何 Node.js 或 serverless 主機，或是你自己的伺服器上。Next.js 還支援[靜態匯出](https://beta.nextjs.org/docs/configuring/static-export)，不需要伺服器即可執行。
-<Pitfall>
-
-Next.js 的 App Router 目前仍在測試（beta）階段，尚未建議用於 production 環境（截至 2023 年 3 月）。如果想要在現有的 Next.js 專案中嘗試使用它，[請參考這個漸進式遷移指南](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app)。
-
-</Pitfall>
+Next.js 由 [Vercel](https://vercel.com/) 維護。你可以將 [Next.js 應用程式部署](https://nextjs.org/docs/app/building-your-application/deploying)到任何 Node.js 或 serverless 主機，或是你自己的伺服器上。Next.js 還支援[靜態匯出](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)，不需要伺服器即可執行。
 
 <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>