diff --git a/README.md b/README.md
index 959e0bd2a9..ecd588894a 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,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
diff --git a/public/images/team/lauren.jpg b/public/images/team/lauren.jpg
index cb08b97254..26d46bd2fb 100644
Binary files a/public/images/team/lauren.jpg and b/public/images/team/lauren.jpg differ
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.
diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md
index 81e97683be..6473616485 100644
--- a/src/content/blog/2024/12/05/react-19.md
+++ b/src/content/blog/2024/12/05/react-19.md
@@ -17,7 +17,11 @@ description: React 19 版现在可以在 npm 上使用了! 在这篇文章中，
- **预热 suspend 树**：阅读 [改善 Suspense](/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense) 来了解更多。
- **React DOM 静态 API**：阅读 [新的 React DOM 静态 API](#new-react-dom-static-apis) 来了解更多。
+<<<<<<< HEAD
__本文的日期已更新，以反映稳定版的发布日期。__
+=======
+_The date for this post has been updated to reflect the stable release date._
+>>>>>>> 8a5526e4f744a303bf7f9c795db2033ef79cc890
@@ -362,7 +366,11 @@ React 19 包含了所有从 Canary 渠道引入的 React 服务器组件功能
#### 如何构建对服务器组件的支持? {/*how-do-i-build-support-for-server-components*/}
+<<<<<<< HEAD
虽然 React 19 中的 React 服务器组件是稳定的，并且在主版本之间不会发生破坏，但用于实现 React 服务器组件打包器或框架的底层 API 不遵循 semver，并可能在 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.
+>>>>>>> 8a5526e4f744a303bf7f9c795db2033ef79cc890
为了支持 React 服务器组件作为打包器或框架，我们建议固定到特定的 React 版本，或者使用 Canary 发行版。我们将继续与打包器和框架合作，以稳定用于实现 React 服务器组件的 API。
@@ -807,4 +815,8 @@ React 19 添加了对自定义元素的全面支持，并通过了 [Custom Eleme
请查看 [React 19 升级指南](/blog/2024/04/25/react-19-upgrade-guide) 以获取逐步指导和完整的破坏性和显著变化列表。
+<<<<<<< HEAD
__注意：这篇文章最初发布于 2024 年 4 月 25 日，并已将内容更新至 2024 年 12 月 5 日发布的稳定版本。__
+=======
+_Note: this post was originally published 04/25/2024 and has been updated to 12/05/2024 with the stable release._
+>>>>>>> 8a5526e4f744a303bf7f9c795db2033ef79cc890
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
diff --git a/src/content/community/team.md b/src/content/community/team.md
index 5e79f8caee..5a25223828 100644
--- a/src/content/community/team.md
+++ b/src/content/community/team.md
@@ -43,7 +43,7 @@ React 核心团队成员全职致力于核心组件 API 的开发，负责 React
- Lauren's programming career peaked when she first discovered the `
diff --git a/src/content/learn/index.md b/src/content/learn/index.md
index db580b69e7..01b13396f1 100644
--- a/src/content/learn/index.md
+++ b/src/content/learn/index.md
@@ -10,7 +10,11 @@ translators:
+<<<<<<< HEAD
欢迎来到 React 文档！本章节将介绍你每天都会使用的 80% 的 React 概念。
+=======
+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.
+>>>>>>> 8a5526e4f744a303bf7f9c795db2033ef79cc890
diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md
index c046d9bcb4..d1e6cef9fc 100644
--- a/src/content/learn/react-compiler.md
+++ b/src/content/learn/react-compiler.md
@@ -348,7 +348,11 @@ React Compiler 可以静态验证 React 的许多规则，并且在检测到错
### 我如何知道我的组件已被优化？ {/*how-do-i-know-my-components-have-been-optimized*/}
+<<<<<<< HEAD
[React 开发工具](/learn/react-developer-tools)（v5.0 及以上版本）对 React Compiler 有内置支持，并会在已被编译器优化的组件旁边显示“Memo ✨”徽章。
+=======
+[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.
+>>>>>>> 8a5526e4f744a303bf7f9c795db2033ef79cc890
### 编译后某些内容无法正常工作 {/*something-is-not-working-after-compilation*/}
如果你安装了 eslint-plugin-react-compiler ，编译器将在你的编辑器中显示任何违反 React 规则的情况。当它这样做时，意味着编译器跳过了对该组件或钩子的优化。这完全没问题，并且编译器可以恢复并继续优化你代码库中的其他组件。**你不必立即修复所有的违反 ESLint 规则的代码。** 你可以按照自己的节奏来处理它们，以增加被优化的组件和钩子的数量。
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index 047b65aa7e..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.
@@ -117,7 +117,7 @@ function AddToCart({productId}) {
}
```
-When `
#### 使用 `Promise.catch` 提供替代值 {/*providing-an-alternative-value-with-promise-catch*/}
diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md
index 04f9a3d62a..4e788e6372 100644
--- a/src/content/reference/react/useImperativeHandle.md
+++ b/src/content/reference/react/useImperativeHandle.md
@@ -23,9 +23,9 @@ useImperativeHandle(ref, createHandle, dependencies?)
在组件顶层通过调用 `useImperativeHandle` 来自定义 ref 暴露出来的句柄：
```js
-import { forwardRef, useImperativeHandle } from 'react';
+import { useImperativeHandle } from 'react';
-const MyInput = forwardRef(function MyInput(props, ref) {
+function MyInput({ ref }) {
useImperativeHandle(ref, () => {
return {
// ... 你的方法 ...
@@ -38,13 +38,27 @@ const MyInput = forwardRef(function MyInput(props, ref) {
#### 参数 {/*parameters*/}
+<<<<<<< HEAD
* `ref`：该 `ref` 是你从 [`forwardRef` 渲染函数](/reference/react/forwardRef#render-function) 中获得的第二个参数。
+=======
+* `ref`: The `ref` you received as a prop to the `MyInput` component.
+>>>>>>> 8a5526e4f744a303bf7f9c795db2033ef79cc890
* `createHandle`：该函数无需参数，它返回你想要暴露的 ref 的句柄。该句柄可以包含任何类型。通常，你会返回一个包含你想暴露的方法的对象。
* **可选的** `dependencies`：函数 `createHandle` 代码中所用到的所有反应式的值的列表。反应式的值包含 props、状态和其他所有直接在你组件体内声明的变量和函数。倘若你的代码检查器已 [为 React 配置好](/learn/editor-setup#linting)，它会验证每一个反应式的值是否被正确指定为依赖项。该列表的长度必须是一个常数项，并且必须按照 `[dep1, dep2, dep3]` 的形式罗列各依赖项。React 会使用 [`Object.is`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 来比较每一个依赖项与其对应的之前值。如果一次重新渲染导致某些依赖项发生了改变，或你没有提供这个参数列表，你的函数 `createHandle` 将会被重新执行，而新生成的句柄则会被分配给 ref。
+<<<<<<< HEAD
#### 返回值 {/*returns*/}
+=======
+
+
+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)
+
+
+
+#### Returns {/*returns*/}
+>>>>>>> 8a5526e4f744a303bf7f9c795db2033ef79cc890
`useImperativeHandle` 返回 `undefined`。
@@ -54,40 +68,50 @@ const MyInput = forwardRef(function MyInput(props, ref) {
### 向父组件暴露一个自定义的 ref 句柄 {/*exposing-a-custom-ref-handle-to-the-parent-component*/}
+<<<<<<< HEAD
默认情况下，组件不会将它们的 DOM 节点暴露给父组件。举例来说，如果你想要 `MyInput` 的父组件 [能访问到](/learn/manipulating-the-dom-with-refs) `` DOM 节点，你必须选择使用 [`forwardRef`:](/reference/react/forwardRef)。
-
-```js {4}
-import { forwardRef } from 'react';
-
-const MyInput = forwardRef(function MyInput(props, ref) {
- return ;
-});
+=======
+To expose a DOM node to the parent element, pass in the `ref` prop to the node.
+>>>>>>> 8a5526e4f744a303bf7f9c795db2033ef79cc890
+
+```js {2}
+function MyInput({ ref }) {
+ return ;
+};
```
+<<<<<<< HEAD
在上方的代码中，[`MyInput` 的 ref 会接收到 `` DOM 节点](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component)。然而，你可以选择暴露一个自定义的值。为了修改被暴露的句柄，在你的顶层组件调用 `useImperativeHandle`：
+=======
+With the code above, [a ref to `MyInput` will receive the `` 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:
+>>>>>>> 8a5526e4f744a303bf7f9c795db2033ef79cc890
```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 {
// ... 你的方法 ...
};
}, []);
- return ;
-});
+ return ;
+};
```
+<<<<<<< HEAD
注意在上述代码中，该 `ref` 已不再被转发到 `` 中。
+=======
+Note that in the code above, the `ref` is no longer passed to the ``.
+>>>>>>> 8a5526e4f744a303bf7f9c795db2033ef79cc890
举例来说，假设你不想暴露出整个 `` DOM 节点，但你想要它其中两个方法：`focus` 和 `scrollIntoView`。为此，用单独额外的 ref 来指向真实的浏览器 DOM。然后使用 `useImperativeHandle` 来暴露一个句柄，它只返回你想要父组件去调用的方法：
```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 +125,8 @@ const MyInput = forwardRef(function MyInput(props, ref) {
};
}, []);
- return ;
-});
+ return ;
+};
```
现在，如果你的父组件获得了 `MyInput` 的 ref，就能通过该 ref 来调用 `focus` 和 `scrollIntoView` 方法。然而，它的访问是受限的，无法读取或调用下方 `` DOM 节点的其他所有属性和方法。
@@ -134,9 +158,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 +175,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
}, []);
return ;
-});
+};
export default MyInput;
```
@@ -195,11 +219,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 +245,16 @@ const Post = forwardRef((props, ref) => {
);
-});
+};
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 +276,17 @@ const CommentList = forwardRef(function CommentList(props, ref) {
{comments}
);
-});
+}
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 ;
-});
+}
export default AddComment;
```
diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md
index 8ffeee2ea7..97b81f5c2c 100644
--- a/src/content/reference/react/useMemo.md
+++ b/src/content/reference/react/useMemo.md
@@ -1101,11 +1101,14 @@ function ChatRoom({ roomId }) {
}, [roomId]); // ✅ 只有当 roomId 改变时才会被改变
useEffect(() => {
- const options = createOptions();
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
+<<<<<<< HEAD
}, [options]); // ✅ 只有当 createOptions 改变时才会被改变
+=======
+ }, [options]); // ✅ Only changes when options changes
+>>>>>>> 8a5526e4f744a303bf7f9c795db2033ef79cc890
// ...
```
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 5ad1eb1319..2780bc77de 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -48,7 +48,11 @@ function TabContainer() {
### `startTransition` 函数 {/*starttransition*/}
+<<<<<<< HEAD
`useTransition` 返回的 `startTransition` 函数允许你将更新标记为 transition。
+=======
+The `startTransition` function returned by `useTransition` lets you mark an update as a Transition.
+>>>>>>> 8a5526e4f744a303bf7f9c795db2033ef79cc890
```js {6,8}
function TabContainer() {
@@ -305,12 +309,12 @@ export async function updateQuantity(newQuantity) {
-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)
- [`