From 9fb491d71fac23553d1cbf54e7e409b81b17447a Mon Sep 17 00:00:00 2001
From: Jimmy Callin <jimmy@callin.cc>
Date: Mon, 16 Dec 2024 15:27:14 +0100
Subject: [PATCH 01/24] Fix troubleshooting links in startTransition reference
 (#7367)

* fix links

* Update startTransition.md

* Update startTransition.md

* Update startTransition.md

* Update startTransition.md
---
 src/content/reference/react/startTransition.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react/startTransition.md b/src/content/reference/react/startTransition.md
index 5956bb070b..7a06095d4c 100644
--- a/src/content/reference/react/startTransition.md
+++ b/src/content/reference/react/startTransition.md
@@ -41,7 +41,7 @@ function TabContainer() {
 
 #### Parameters {/*parameters*/}
 
-* `action`: A function that updates some state by calling one or more [`set` functions](/reference/react/useState#setstate). React calls `action` immediately with no parameters and marks all state updates scheduled synchronously during the `action` function call as Transitions. Any async calls awaited in the `action` will be included in the transition, but currently require wrapping any `set` functions after the `await` in an additional `startTransition` (see [Troubleshooting](#react-doesnt-treat-my-state-update-after-await-as-a-transition)). State updates marked as Transitions will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](#preventing-unwanted-loading-indicators).
+* `action`: A function that updates some state by calling one or more [`set` functions](/reference/react/useState#setstate). React calls `action` immediately with no parameters and marks all state updates scheduled synchronously during the `action` function call as Transitions. Any async calls awaited in the `action` will be included in the transition, but currently require wrapping any `set` functions after the `await` in an additional `startTransition` (see [Troubleshooting](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition)). State updates marked as Transitions will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](/reference/react/useTransition#preventing-unwanted-loading-indicators).
 
 #### Returns {/*returns*/}
 
@@ -55,7 +55,7 @@ function TabContainer() {
 
 * The function you pass to the of `startTransition` is called immediately, marking all state updates that happen while it executes as Transitions. If you try to perform state updates in a `setTimeout`, for example, they won't be marked as Transitions.
 
-* You must wrap any state updates after any async requests in another `startTransition` to mark them as Transitions. This is a known limitation that we will fix in the future (see [Troubleshooting](#react-doesnt-treat-my-state-update-after-await-as-a-transition)).
+* You must wrap any state updates after any async requests in another `startTransition` to mark them as Transitions. This is a known limitation that we will fix in the future (see [Troubleshooting](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition)).
 
 * A state update marked as a Transition will be interrupted by other state updates. For example, if you update a chart component inside a Transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input state update.
 

From 51864f6f58597c3ba6f9007fd961a32b1e2a9a7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ahmet=20=C3=96zenir?=
 <101597537+ahm3tozenir@users.noreply.github.com>
Date: Mon, 16 Dec 2024 17:27:33 +0300
Subject: [PATCH 02/24] (fix): mismatch href bug (#7368)

"use-server" docs Server Functions href fixed.
---
 src/content/reference/rsc/use-server.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/rsc/use-server.md b/src/content/reference/rsc/use-server.md
index ed09ee4212..4d6fb46397 100644
--- a/src/content/reference/rsc/use-server.md
+++ b/src/content/reference/rsc/use-server.md
@@ -24,7 +24,7 @@ titleForTitleTag: "'use server' directive"
 
 ### `'use server'` {/*use-server*/}
 
-Add `'use server'` at the top of an async function body to mark the function as callable by the client. We call these functions [_Server Functions_]((/reference/rsc/server-functions)).
+Add `'use server'` at the top of an async function body to mark the function as callable by the client. We call these functions [_Server Functions_](/reference/rsc/server-functions).
 
 ```js {2}
 async function addToCart(data) {

From bc93f0578d04be4e85c5fd4c2ef9f5667efce01b Mon Sep 17 00:00:00 2001
From: Eric Cote <eric@coteexpert.com>
Date: Mon, 16 Dec 2024 10:58:20 -0500
Subject: [PATCH 03/24] Fix stylesheet precedence example (#7235)

* Fix stylesheet precedence example

* Update link.md

---------

Co-authored-by: dan <dan.abramov@gmail.com>
---
 .../reference/react-dom/components/link.md        | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md
index 77da89d47c..41236eb3dc 100644
--- a/src/content/reference/react-dom/components/link.md
+++ b/src/content/reference/react-dom/components/link.md
@@ -151,9 +151,7 @@ export default function SiteMapPage() {
 
 ### Controlling stylesheet precedence {/*controlling-stylesheet-precedence*/}
 
-Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, two components render stylesheets, and the one with the higher precedence goes later in the document even though the component that renders it comes earlier.
-
-{/*FIXME: this doesn't appear to actually work -- I guess precedence isn't implemented yet?*/}
+Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, three components render stylesheets, and the ones with the same precedence are grouped together in the `<head>`. 
 
 <SandpackWithHTMLOutput>
 
@@ -165,23 +163,30 @@ export default function HomePage() {
     <ShowRenderedHTML>
       <FirstComponent />
       <SecondComponent />
+      <ThirdComponent/>
       ...
     </ShowRenderedHTML>
   );
 }
 
 function FirstComponent() {
-  return <link rel="stylesheet" href="first.css" precedence="high" />;
+  return <link rel="stylesheet" href="first.css" precedence="first" />;
 }
 
 function SecondComponent() {
-  return <link rel="stylesheet" href="second.css" precedence="low" />;
+  return <link rel="stylesheet" href="second.css" precedence="second" />;
+}
+
+function ThirdComponent() {
+  return <link rel="stylesheet" href="third.css" precedence="first" />;
 }
 
 ```
 
 </SandpackWithHTMLOutput>
 
+Note the `precedence` values themselves are arbitrary and their naming is up to you. React will infer that precedence values it discovers first are "lower" and precedence values it discovers later are "higher".
+
 ### Deduplicated stylesheet rendering {/*deduplicated-stylesheet-rendering*/}
 
 If you render the same stylesheet from multiple components, React will place only a single `<link>` in the document head.

From 07eca837770bfa481bdc18b3707909ed34c4543d Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Tue, 17 Dec 2024 00:59:51 +0900
Subject: [PATCH 04/24] Fix intro of prerenderToNodeStream (#7356)

---
 .../reference/react-dom/static/prerenderToNodeStream.md       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md
index 259a3b5d82..0399874978 100644
--- a/src/content/reference/react-dom/static/prerenderToNodeStream.md
+++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md
@@ -4,7 +4,7 @@ title: prerenderToNodeStream
 
 <Intro>
 
-`prerender` renders a React tree to a static HTML string using a [Node.js Stream.](https://nodejs.org/api/stream.html).
+`prerenderToNodeStream` renders a React tree to a static HTML string using a [Node.js Stream.](https://nodejs.org/api/stream.html).
 
 ```js
 const {prelude} = await prerenderToNodeStream(reactNode, options?)
@@ -292,4 +292,4 @@ Suspense-enabled data fetching without the use of an opinionated framework is no
 The `prerenderToNodeStream` response waits for the entire app to finish rendering, including waiting for all suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads.
 
 To stream content as it loads, use a streaming server render API like [renderToPipeableStream](/reference/react-dom/server/renderToPipeableStream).
- 
\ No newline at end of file
+ 

From c92bad2fa2be771fd685ca1c947aa7cb438bb5a3 Mon Sep 17 00:00:00 2001
From: Coal <coalio.gg@gmail.com>
Date: Mon, 16 Dec 2024 10:01:48 -0600
Subject: [PATCH 05/24] chore: several major typo fixes (#7362)

Co-authored-by: Josue Navas <josue.navas@eagleview.com>
---
 src/content/blog/2024/12/05/react-19.md        | 4 ++--
 src/content/learn/index.md                     | 2 +-
 src/content/reference/react/createContext.md   | 2 +-
 src/content/reference/rsc/server-components.md | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md
index 9f212209ba..22f61147e7 100644
--- a/src/content/blog/2024/12/05/react-19.md
+++ b/src/content/blog/2024/12/05/react-19.md
@@ -17,7 +17,7 @@ Additions since this post was originally shared with the React 19 RC in April:
 - **Pre-warming for suspended trees**: see [Improvements to Suspense](/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense).
 - **React DOM static APIs**: see [New React DOM Static APIs](#new-react-dom-static-apis).
 
-_The date for this post has been update to reflect the stable release date._
+_The date for this post has been updated to reflect the stable release date._
 
 </Note>
 
@@ -807,4 +807,4 @@ Thanks to [Joey Arhar](https://github.com/josepharhar) for driving the design an
 #### How to upgrade {/*how-to-upgrade*/}
 See the [React 19 Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide) for step-by-step instructions and a full list of breaking and notable changes.
 
-_Note: this post was originally published 04/25/2024 and has been updated to 12/05/2024 with the stable release._
\ No newline at end of file
+_Note: this post was originally published 04/25/2024 and has been updated to 12/05/2024 with the stable release._
diff --git a/src/content/learn/index.md b/src/content/learn/index.md
index b57655bc42..15e3b28663 100644
--- a/src/content/learn/index.md
+++ b/src/content/learn/index.md
@@ -4,7 +4,7 @@ title: Quick Start
 
 <Intro>
 
-Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis.
+Welcome to the React documentation! This page will give you an introduction to 80% of the React concepts that you will use on a daily basis.
 
 </Intro>
 
diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md
index a653633c1d..03b09f8af9 100644
--- a/src/content/reference/react/createContext.md
+++ b/src/content/reference/react/createContext.md
@@ -84,7 +84,7 @@ function Button() {
 }
 ```
 
-Although this older way still works, but **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:**
+Although this older way still works, **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:**
 
 ```js
 function Button() {
diff --git a/src/content/reference/rsc/server-components.md b/src/content/reference/rsc/server-components.md
index 636b190c77..7c8bc6ae89 100644
--- a/src/content/reference/rsc/server-components.md
+++ b/src/content/reference/rsc/server-components.md
@@ -4,7 +4,7 @@ title: Server Components
 
 <RSC>
 
-Sever Components are for use in [React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
+Server Components are for use in [React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
 
 </RSC>
 

From d3bd0f9d8a52ea0bc77ba3cd1bfa88f989e4e1a1 Mon Sep 17 00:00:00 2001
From: huiliangShen <alal2al@hotmail.com>
Date: Tue, 17 Dec 2024 00:02:18 +0800
Subject: [PATCH 06/24] Update act.md (#7363)

docs: fixed typo act md counter fn grammar error
---
 src/content/reference/react/act.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/reference/react/act.md b/src/content/reference/react/act.md
index c01f3cd691..eff3f891fa 100644
--- a/src/content/reference/react/act.md
+++ b/src/content/reference/react/act.md
@@ -70,13 +70,13 @@ function Counter() {
   }
 
   useEffect(() => {
-    document.title = `You clicked ${this.state.count} times`;
+    document.title = `You clicked ${count} times`;
   }, [count]);
 
   return (
     <div>
-      <p>You clicked {this.state.count} times</p>
-      <button onClick={this.handleClick}>
+      <p>You clicked {count} times</p>
+      <button onClick={handleClick}>
         Click me
       </button>
     </div>

From 31456db6c9497e78435ca15a4df4d3f72c8badc4 Mon Sep 17 00:00:00 2001
From: Amin Zaherdannak <41632899+AminDannak@users.noreply.github.com>
Date: Mon, 16 Dec 2024 19:32:37 +0330
Subject: [PATCH 07/24] chore: correct typo in useTransition docs (#7366)

---
 src/content/reference/react/useTransition.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 7c019bc162..970e29e9ab 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -48,7 +48,7 @@ function TabContainer() {
 
 ### `startTransition(action)` {/*starttransition*/}
 
-The `startTransition` function returned by `useTransition` lets you mark a updates as a Transition.
+The `startTransition` function returned by `useTransition` lets you mark an update as a Transition.
 
 ```js {6,8}
 function TabContainer() {

From d4d16832ea6302f76cc221694759212472f7c1f0 Mon Sep 17 00:00:00 2001
From: Amin Zaherdannak <41632899+AminDannak@users.noreply.github.com>
Date: Mon, 16 Dec 2024 19:32:53 +0330
Subject: [PATCH 08/24] chore: fix a typo in startTransition docs (#7361)

---
 src/content/reference/react/startTransition.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/startTransition.md b/src/content/reference/react/startTransition.md
index 7a06095d4c..fba28f6d1b 100644
--- a/src/content/reference/react/startTransition.md
+++ b/src/content/reference/react/startTransition.md
@@ -53,7 +53,7 @@ function TabContainer() {
 
 * You can wrap an update into a Transition only if you have access to the `set` function of that state. If you want to start a Transition in response to some prop or a custom Hook return value, try [`useDeferredValue`](/reference/react/useDeferredValue) instead.
 
-* The function you pass to the of `startTransition` is called immediately, marking all state updates that happen while it executes as Transitions. If you try to perform state updates in a `setTimeout`, for example, they won't be marked as Transitions.
+* The function you pass to `startTransition` is called immediately, marking all state updates that happen while it executes as Transitions. If you try to perform state updates in a `setTimeout`, for example, they won't be marked as Transitions.
 
 * You must wrap any state updates after any async requests in another `startTransition` to mark them as Transitions. This is a known limitation that we will fix in the future (see [Troubleshooting](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition)).
 

From 04ba43cb2439f0b528437b6dc58ec61b8c537de5 Mon Sep 17 00:00:00 2001
From: Baoshuo <i@baoshuo.ren>
Date: Tue, 17 Dec 2024 00:03:15 +0800
Subject: [PATCH 09/24] fix: add link to prop-type codemod (#7344)

---
 src/content/blog/2024/04/25/react-19-upgrade-guide.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
index fd160e943b..fbc4e378c7 100644
--- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md
+++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
@@ -113,7 +113,7 @@ This will run the following codemods from `react-codemod`:
 - [`replace-string-ref`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref)
 - [`replace-act-import`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import)
 - [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state) 
-- [`prop-types-typescript`](TODO)
+- [`prop-types-typescript`](https://codemod.com/registry/react-prop-types-typescript)
 
 This does not include the TypeScript changes. See [TypeScript changes](#typescript-changes) below.
 

From 4349dd5dc0244423a37a21881d0279d5b0b18496 Mon Sep 17 00:00:00 2001
From: Jealh <1620175472@qq.com>
Date: Tue, 17 Dec 2024 00:03:29 +0800
Subject: [PATCH 10/24] fix: anchor (#7343)

---
 src/content/reference/react/useTransition.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 970e29e9ab..537dd6f857 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -305,7 +305,7 @@ export async function updateQuantity(newQuantity) {
 
 </Sandpack>
 
-This is a basic example to demonstrate how Actions work, but this example does not handle requests completing out of order. When updating the quantity multiple times, it's possible for the previous requests to finish after later requests causing the quantity to update out of order. This is a known limitation that we will fix in the future (see [Troubleshooting](#my-state-updates-in-async-transitions-are-out-of-order) below).
+This is a basic example to demonstrate how Actions work, but this example does not handle requests completing out of order. When updating the quantity multiple times, it's possible for the previous requests to finish after later requests causing the quantity to update out of order. This is a known limitation that we will fix in the future (see [Troubleshooting](#my-state-updates-in-transitions-are-out-of-order) below).
 
 For common use cases, React provides built-in abstractions such as:
 - [`useActionState`](/reference/react/useActionState)

From d3cde8f03bb4852016dd5d61484f096393289b56 Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Tue, 17 Dec 2024 01:04:07 +0900
Subject: [PATCH 11/24] Fix "won't break between majors" (#7357)

---
 src/content/blog/2024/12/05/react-19.md        | 2 +-
 src/content/reference/rsc/server-components.md | 2 +-
 src/content/reference/rsc/server-functions.md  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md
index 22f61147e7..62a6ce4645 100644
--- a/src/content/blog/2024/12/05/react-19.md
+++ b/src/content/blog/2024/12/05/react-19.md
@@ -362,7 +362,7 @@ React 19 includes all of the React Server Components features included from the
 
 #### How do I build support for Server Components? {/*how-do-i-build-support-for-server-components*/}
 
-While React Server Components in React 19 are stable and will not break between major versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. 
+While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. 
 
 To support React Server Components as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement React Server Components in the future.
 
diff --git a/src/content/reference/rsc/server-components.md b/src/content/reference/rsc/server-components.md
index 7c8bc6ae89..b58b7dea73 100644
--- a/src/content/reference/rsc/server-components.md
+++ b/src/content/reference/rsc/server-components.md
@@ -22,7 +22,7 @@ This separate environment is the "server" in React Server Components. Server Com
 
 #### How do I build support for Server Components? {/*how-do-i-build-support-for-server-components*/}
 
-While React Server Components in React 19 are stable and will not break between major versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. 
+While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. 
 
 To support React Server Components as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement React Server Components in the future.
 
diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md
index adce772846..74aab615c2 100644
--- a/src/content/reference/rsc/server-functions.md
+++ b/src/content/reference/rsc/server-functions.md
@@ -22,7 +22,7 @@ Server Functions allow Client Components to call async functions executed on the
 
 #### How do I build support for Server Functions? {/*how-do-i-build-support-for-server-functions*/}
 
-While Server Functions in React 19 are stable and will not break between major versions, the underlying APIs used to implement Server Functions in a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. 
+While Server Functions in React 19 are stable and will not break between minor versions, the underlying APIs used to implement Server Functions in a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. 
 
 To support Server Functions as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement Server Functions in the future.
 

From 37e1ce947f7fdcbfdba680ad83ef451cda8a7381 Mon Sep 17 00:00:00 2001
From: Denis Urban <denis.urban@gitnation.org>
Date: Mon, 16 Dec 2024 23:05:15 +0700
Subject: [PATCH 12/24] Add React Summit 2025 to conferences.md; move past
 conferences to the appropriate section (#7354)

---
 src/content/community/conferences.md | 68 +++++++++++++++-------------
 1 file changed, 37 insertions(+), 31 deletions(-)

diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index aaa7612185..d735371f1d 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,62 +10,68 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {/*upcoming-conferences*/}
 
-### React Universe Conf 2024 {/*react-universe-conf-2024*/}
-September 5-6, 2024. Wrocław, Poland.
+### React Day Berlin 2024 {/*react-day-berlin-2024*/}
+December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)
 
-[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
+[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)
 
-### React Alicante 2024 {/*react-alicante-2024*/}
-September 19-21, 2024. Alicante, Spain.
+### React Summit 2025 {/*react-summit-2025*/}
+June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)
 
-[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
+[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)
 
-### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/}
-October 04 - 05, 2024. Nairobi, Kenya
+## Past Conferences {/*past-conferences*/}
 
-[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
+### React Africa 2024 {/*react-africa-2024*/}
+November 29, 2024. In-person in Casablanca, Morocco (hybrid event)
 
-### React India 2024 {/*react-india-2024*/}
-October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
+[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)
 
-[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 Summit US 2024 {/*react-summit-us-2024*/}
+November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)
 
-### React Brussels 2024 {/*react-brussels-2024*/}
-October 18, 2024. In-person in Brussels, Belgium (hybrid event)
+[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
 
-[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)
+### React Native London Conf 2024 {/*react-native-london-2024*/}
+November 14 & 15, 2024. In-person in London, UK
+
+[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf)
+
+### 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)
 
 ### reactjsday 2024 {/*reactjsday-2024*/}
 October 25, 2024. In-person in Verona, Italy + online (hybrid event)
 
 [Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
 
-### React Advanced London 2024 {/*react-advanced-london-2024*/}
-October 25 & 28, 2024. In-person in London, UK + online (hybrid event)
+### React Brussels 2024 {/*react-brussels-2024*/}
+October 18, 2024. In-person in Brussels, Belgium (hybrid event)
 
-[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
+[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)
 
-### React Native London Conf 2024 {/*react-native-london-2024*/}
-November 14 & 15, 2024. In-person in London, UK
+### React India 2024 {/*react-india-2024*/}
+October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
 
-[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf)
+[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 Summit US 2024 {/*react-summit-us-2024*/}
-November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)
+### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/}
+October 04 - 05, 2024. Nairobi, Kenya
 
-[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
+[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
 
-### React Africa 2024 {/*react-africa-2024*/}
-November 29, 2024. In-person in Casablanca, Morocco (hybrid event)
+### React Alicante 2024 {/*react-alicante-2024*/}
+September 19-21, 2024. Alicante, Spain.
 
-[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)
+[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
 
-### React Day Berlin 2024 {/*react-day-berlin-2024*/}
-December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)
+### React Universe Conf 2024 {/*react-universe-conf-2024*/}
+September 5-6, 2024. Wrocław, Poland.
 
-[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)
+[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
 
-## Past Conferences {/*past-conferences*/}
 
 ### React Rally 2024 🐙 {/*react-rally-2024*/}
 August 12-13, 2024. Park City, UT, USA

From 4b5ce9150c9712f407659ef4c83560794bf5546f Mon Sep 17 00:00:00 2001
From: Andrew Patton <andrew@acusti.ca>
Date: Mon, 16 Dec 2024 08:05:36 -0800
Subject: [PATCH 13/24] Add missing react-error-boundary dependency (#7353)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

the “Dealing with rejected Promises” codesandbox example depends on react-error-boundary, but doesn’t specify it as a dependency, so the code example is broken
---
 src/content/reference/react/use.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index 48b21fa610..557a71cad2 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -397,6 +397,17 @@ root.render(
 );
 ```
 
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-scripts": "^5.0.0",
+    "react-error-boundary": "4.0.3"
+  },
+  "main": "/index.js"
+}
+```
 </Sandpack>
 
 #### Providing an alternative value with `Promise.catch` {/*providing-an-alternative-value-with-promise-catch*/}

From 08056131f19210b1ea60c2cfbc1f1a4944ffe8ce Mon Sep 17 00:00:00 2001
From: Simon <simon30002021@icloud.com>
Date: Mon, 16 Dec 2024 17:05:53 +0100
Subject: [PATCH 14/24] fix broken link in use server (#7351)


From a4b6074cd65f92aada65dec9422cb2121df54162 Mon Sep 17 00:00:00 2001
From: Steve Xu <xuqiok@outlook.com>
Date: Tue, 17 Dec 2024 00:06:17 +0800
Subject: [PATCH 15/24] fix: page does not exist (#7348)

---
 src/content/reference/react-dom/components/form.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index 047b65aa7e..3974e259e7 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -117,7 +117,7 @@ function AddToCart({productId}) {
 }
 ```
 
-When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-function) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
+When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-functions) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
 
 ### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
 To display a pending state when a form is being submitted, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned.

From 807e7fa94ffcd8833669cb681983b559deb6e7df Mon Sep 17 00:00:00 2001
From: Jeremy Deutsch <jeremy.e.deutsch@gmail.com>
Date: Mon, 16 Dec 2024 08:07:36 -0800
Subject: [PATCH 16/24] Mention that uncontrolled form elements are reset by
 form actions (#7340)

---
 src/content/reference/react-dom/components/form.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index 3974e259e7..b3c849e724 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -50,7 +50,7 @@ To create interactive controls for submitting information, render the [built-in
 
 ### Handle form submission on the client {/*handle-form-submission-on-the-client*/}
 
-Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs.
+Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. After the `action` function succeeds, all uncontrolled field elements in the form are reset.
 
 <Sandpack>
 

From 0f8bd801128d457338179ee2216e07e878fa0a52 Mon Sep 17 00:00:00 2001
From: JZZICK <143719171+JZZICK@users.noreply.github.com>
Date: Tue, 17 Dec 2024 00:08:28 +0800
Subject: [PATCH 17/24] Code example mistake in useMemo page (#7335)

---
 src/content/reference/react/useMemo.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md
index 33193ee3ba..6bfaba8ee0 100644
--- a/src/content/reference/react/useMemo.md
+++ b/src/content/reference/react/useMemo.md
@@ -1101,11 +1101,10 @@ function ChatRoom({ roomId }) {
   }, [roomId]); // ✅ Only changes when roomId changes
 
   useEffect(() => {
-    const options = createOptions();
     const connection = createConnection(options);
     connection.connect();
     return () => connection.disconnect();
-  }, [options]); // ✅ Only changes when createOptions changes
+  }, [options]); // ✅ Only changes when options changes
   // ...
 ```
 

From 35580955890e342e7992c3daec75227893b3fb70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= <slorber@users.noreply.github.com>
Date: Mon, 16 Dec 2024 17:09:03 +0100
Subject: [PATCH 18/24] docs: include React 19 blog post in sidebarBlog.json
 (#7331)

---
 src/sidebarBlog.json | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json
index 84947fdf59..5562a5a6ca 100644
--- a/src/sidebarBlog.json
+++ b/src/sidebarBlog.json
@@ -11,6 +11,13 @@
       "path": "/blog",
       "skipBreadcrumb": true,
       "routes": [
+        {
+          "title": "React 19",
+          "titleForHomepage": "React 19",
+          "icon": "blog",
+          "date": "December 05, 2024",
+          "path": "/blog/2024/12/05/react-19"
+        },
         {
           "title": "React Compiler Beta Release and Roadmap",
           "titleForHomepage": "React Compiler Beta Release and Roadmap",

From 93a03f121cb139e0918cf534a108400b5fe269d5 Mon Sep 17 00:00:00 2001
From: Ethan Shea <ethan.shea@vercel.com>
Date: Mon, 16 Dec 2024 11:10:53 -0500
Subject: [PATCH 19/24] docs: Fix broken link to next.js Suspense docs (#7318)

---
 src/content/reference/react/Suspense.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index dc22c907a3..4fce69d694 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -207,7 +207,7 @@ async function getAlbums() {
 
 **Only Suspense-enabled data sources will activate the Suspense component.** They include:
 
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)
 - Lazy-loading component code with [`lazy`](/reference/react/lazy)
 - Reading the value of a cached Promise with [`use`](/reference/react/use)
 

From 204b3f197551624b6c18832422388c2a50215730 Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Tue, 17 Dec 2024 01:11:06 +0900
Subject: [PATCH 20/24] Remove canary flag from useFormStatus (#7349)

---
 src/content/reference/react-dom/hooks/useFormStatus.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md
index 0eb8c5d79d..0fc83e3e18 100644
--- a/src/content/reference/react-dom/hooks/useFormStatus.md
+++ b/src/content/reference/react-dom/hooks/useFormStatus.md
@@ -1,6 +1,5 @@
 ---
 title: useFormStatus
-canary: true
 ---
 
 <Intro>

From 8ac5531913e547238c4e75c6786a525937a50610 Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Tue, 17 Dec 2024 01:11:21 +0900
Subject: [PATCH 21/24] Rename remaining "Server Actions" (#7352)

---
 src/content/reference/react/useTransition.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 537dd6f857..f4781295c9 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -310,7 +310,7 @@ This is a basic example to demonstrate how Actions work, but this example does n
 For common use cases, React provides built-in abstractions such as:
 - [`useActionState`](/reference/react/useActionState)
 - [`<form>` actions](/reference/react-dom/components/form)
-- [Server Actions](/reference/rsc/server-actions)
+- [Server Functions](/reference/rsc/server-functions)
 
 These solutions handle request ordering for you. When using Transitions to build your own custom hooks or libraries that manage async state transitions, you have greater control over the request ordering, but you must handle it yourself.
 

From 998519969e1364f4caabab41943334e16fa00721 Mon Sep 17 00:00:00 2001
From: Piotr Tomczewski <piotr@tomczewski.dev>
Date: Mon, 16 Dec 2024 17:13:10 +0100
Subject: [PATCH 22/24] docs[compiler]: clarify React DevTools support for
 Compiler Badges in React Native (#7369)

* docs[compiler]: clarify React DevTools support for Compiler Badges in React Native

* Update react-compiler.md

* Update react-compiler.md

---------

Co-authored-by: dan <dan.abramov@gmail.com>
---
 src/content/learn/react-compiler.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md
index 5362d69e1d..0ae4994726 100644
--- a/src/content/learn/react-compiler.md
+++ b/src/content/learn/react-compiler.md
@@ -347,7 +347,7 @@ React Compiler can verify many of the Rules of React statically, and will safely
 
 ### How do I know my components have been optimized? {/*how-do-i-know-my-components-have-been-optimized*/}
 
-[React Devtools](/learn/react-developer-tools) (v5.0+) has built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.
+[React DevTools](/learn/react-developer-tools) (v5.0+) and [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) have built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.
 
 ### Something is not working after compilation {/*something-is-not-working-after-compilation*/}
 If you have eslint-plugin-react-compiler installed, the compiler will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase. **You don't have to fix all ESLint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized.

From c37fdd38ff6c9ef8fdb3ab198168c8f89fa458d7 Mon Sep 17 00:00:00 2001
From: Sebastian Ong <78428559+SebassNoob@users.noreply.github.com>
Date: Tue, 17 Dec 2024 01:25:07 +0900
Subject: [PATCH 23/24] Remove forwardref from useImperativeHandle docs (#7360)

* fix: remove forwardref from useImperativeHandle docs

* Make changes more focused

* Update useImperativeHandle.md

---------

Co-authored-by: dan <dan.abramov@gmail.com>
---
 .../reference/react/useImperativeHandle.md    | 68 ++++++++++---------
 1 file changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md
index abd93cd4ca..92f6e2cdab 100644
--- a/src/content/reference/react/useImperativeHandle.md
+++ b/src/content/reference/react/useImperativeHandle.md
@@ -23,9 +23,9 @@ useImperativeHandle(ref, createHandle, dependencies?)
 Call `useImperativeHandle` at the top level of your component to customize the ref handle it exposes:
 
 ```js
-import { forwardRef, useImperativeHandle } from 'react';
+import { useImperativeHandle } from 'react';
 
-const MyInput = forwardRef(function MyInput(props, ref) {
+function MyInput({ ref }) {
   useImperativeHandle(ref, () => {
     return {
       // ... your methods ...
@@ -38,12 +38,18 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 
 #### Parameters {/*parameters*/}
 
-* `ref`: The `ref` you received as the second argument from the [`forwardRef` render function.](/reference/react/forwardRef#render-function)
+* `ref`: The `ref` you received as a prop to the `MyInput` component.
 
 * `createHandle`: A function that takes no arguments and returns the ref handle you want to expose. That ref handle can have any type. Usually, you will return an object with the methods you want to expose.
 
 * **optional** `dependencies`: The list of all reactive values referenced inside of the `createHandle` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. If a re-render resulted in a change to some dependency, or if you omitted this argument, your `createHandle` function will re-execute, and the newly created handle will be assigned to the ref.
 
+<Note>
+
+Starting with React 19, [`ref` is available a prop.](/blog/2024/12/05/react-19#ref-as-a-prop) In React 18 and earlier, it was necessary to get the `ref` from [`forwardRef`.](/reference/react/forwardRef) 
+
+</Note>
+
 #### Returns {/*returns*/}
 
 `useImperativeHandle` returns `undefined`.
@@ -54,40 +60,38 @@ const MyInput = forwardRef(function MyInput(props, ref) {
 
 ### Exposing a custom ref handle to the parent component {/*exposing-a-custom-ref-handle-to-the-parent-component*/}
 
-By default, components don't expose their DOM nodes to parent components. For example, if you want the parent component of `MyInput` to [have access](/learn/manipulating-the-dom-with-refs) to the `<input>` DOM node, you have to opt in with [`forwardRef`:](/reference/react/forwardRef)
-
-```js {4}
-import { forwardRef } from 'react';
+To expose a DOM node to the parent element, pass in the `ref` prop to the node.
 
-const MyInput = forwardRef(function MyInput(props, ref) {
-  return <input {...props} ref={ref} />;
-});
+```js {2}
+function MyInput({ ref }) {
+  return <input ref={ref} />;
+};
 ```
 
-With the code above, [a ref to `MyInput` will receive the `<input>` DOM node.](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component) However, you can expose a custom value instead. To customize the exposed handle, call `useImperativeHandle` at the top level of your component:
+With the code above, [a ref to `MyInput` will receive the `<input>` DOM node.](/learn/manipulating-the-dom-with-refs) However, you can expose a custom value instead. To customize the exposed handle, call `useImperativeHandle` at the top level of your component:
 
 ```js {4-8}
-import { forwardRef, useImperativeHandle } from 'react';
+import { useImperativeHandle } from 'react';
 
-const MyInput = forwardRef(function MyInput(props, ref) {
+function MyInput({ ref }) {
   useImperativeHandle(ref, () => {
     return {
       // ... your methods ...
     };
   }, []);
 
-  return <input {...props} />;
-});
+  return <input />;
+};
 ```
 
-Note that in the code above, the `ref` is no longer forwarded to the `<input>`.
+Note that in the code above, the `ref` is no longer passed to the `<input>`.
 
 For example, suppose you don't want to expose the entire `<input>` DOM node, but you want to expose two of its methods: `focus` and `scrollIntoView`. To do this, keep the real browser DOM in a separate ref. Then use `useImperativeHandle` to expose a handle with only the methods that you want the parent component to call:
 
 ```js {7-14}
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useRef, useImperativeHandle } from 'react';
 
-const MyInput = forwardRef(function MyInput(props, ref) {
+function MyInput({ ref }) {
   const inputRef = useRef(null);
 
   useImperativeHandle(ref, () => {
@@ -101,8 +105,8 @@ const MyInput = forwardRef(function MyInput(props, ref) {
     };
   }, []);
 
-  return <input {...props} ref={inputRef} />;
-});
+  return <input ref={inputRef} />;
+};
 ```
 
 Now, if the parent component gets a ref to `MyInput`, it will be able to call the `focus` and `scrollIntoView` methods on it. However, it will not have full access to the underlying `<input>` DOM node.
@@ -134,9 +138,9 @@ export default function Form() {
 ```
 
 ```js src/MyInput.js
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useRef, useImperativeHandle } from 'react';
 
-const MyInput = forwardRef(function MyInput(props, ref) {
+function MyInput({ ref, ...props }) {
   const inputRef = useRef(null);
 
   useImperativeHandle(ref, () => {
@@ -151,7 +155,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
   }, []);
 
   return <input {...props} ref={inputRef} />;
-});
+};
 
 export default MyInput;
 ```
@@ -195,11 +199,11 @@ export default function Page() {
 ```
 
 ```js src/Post.js
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useRef, useImperativeHandle } from 'react';
 import CommentList from './CommentList.js';
 import AddComment from './AddComment.js';
 
-const Post = forwardRef((props, ref) => {
+function Post({ ref }) {
   const commentsRef = useRef(null);
   const addCommentRef = useRef(null);
 
@@ -221,16 +225,16 @@ const Post = forwardRef((props, ref) => {
       <AddComment ref={addCommentRef} />
     </>
   );
-});
+};
 
 export default Post;
 ```
 
 
 ```js src/CommentList.js
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useRef, useImperativeHandle } from 'react';
 
-const CommentList = forwardRef(function CommentList(props, ref) {
+function CommentList({ ref }) {
   const divRef = useRef(null);
 
   useImperativeHandle(ref, () => {
@@ -252,17 +256,17 @@ const CommentList = forwardRef(function CommentList(props, ref) {
       {comments}
     </div>
   );
-});
+}
 
 export default CommentList;
 ```
 
 ```js src/AddComment.js
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useRef, useImperativeHandle } from 'react';
 
-const AddComment = forwardRef(function AddComment(props, ref) {
+function AddComment({ ref }) {
   return <input placeholder="Add comment..." ref={ref} />;
-});
+}
 
 export default AddComment;
 ```

From e2bba41bf0f4913b7faaeff4920ec4eb98207a66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EB=B4=89=EC=B0=AC?= <devwqc@gmail.com>
Date: Tue, 17 Dec 2024 01:26:13 +0900
Subject: [PATCH 24/24] docs: fix readme node version (#7316)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 966131db57..182192cb55 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ This repo contains the source code and documentation powering [react.dev](https:
 ### Prerequisites
 
 1. Git
-1. Node: any 12.x version starting with v12.0.0 or greater
+1. Node: any version starting with v16.8.0 or greater
 1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
 1. A fork of the repo (for any contributions)
 1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine