diff --git a/.gitignore b/.gitignore
index ff88094dee..92626a1e63 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,3 +43,6 @@ public/rss.xml
# claude local settings
.claude/*.local.*
.claude/react/
+
+# worktrees
+.worktrees/
diff --git a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md
index 6845e2f2f4..dc049c78c6 100644
--- a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md
+++ b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md
@@ -106,7 +106,7 @@ See [this issue](https://github.com/facebook/react-native/issues/54772#issuecomm
**CVEs:** [CVE-2026-23864](https://www.cve.org/CVERecord?id=CVE-2026-23864)
**Base Score:** 7.5 (High)
-**Date**: January 26, 2025
+**Date**: January 26, 2026
Security researchers discovered additional DoS vulnerabilities still exist in React Server Components.
diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index b53064c2b9..b79bed9e2a 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -48,7 +48,7 @@ In this way, Activity can be thought of as a mechanism for rendering "background
#### Caveats {/*caveats*/}
- If an Activity is rendered inside of a [ViewTransition](/reference/react/ViewTransition), and it becomes visible as a result of an update caused by [startTransition](/reference/react/startTransition), it will activate the ViewTransition's `enter` animation. If it becomes hidden, it will activate its `exit` animation.
-- An Activity that just renders text will not render anything rather than rendering hidden text, because there’s no corresponding DOM element to apply visibility changes to. For example, `` will not produce any output in the DOM for `const ComponentThatJustReturnsText = () => "Hello, World!"`.
+- A *hidden* Activity that just renders text will not render anything rather than rendering hidden text, because there’s no corresponding DOM element to apply visibility changes to. For example, `` will not produce any output in the DOM for `const ComponentThatJustReturnsText = () => "Hello, World!"`. `` will render visible text.
---
diff --git a/src/content/reference/react/hooks.md b/src/content/reference/react/hooks.md
index dc80c55998..0e4e1e3cf7 100644
--- a/src/content/reference/react/hooks.md
+++ b/src/content/reference/react/hooks.md
@@ -79,6 +79,9 @@ Effect 是从 React 范式中的“脱围机制”。避免使用 Effect 协调
* [`useLayoutEffect`](/reference/react/useLayoutEffect) 在浏览器重新绘制屏幕前执行，可以在此处测量布局。
* [`useInsertionEffect`](/reference/react/useInsertionEffect) 在 React 对 DOM 进行更改之前触发，库可以在此处插入动态 CSS。
+You can also separate events from Effects:
+
+- [`useEffectEvent`](/reference/react/useEffectEvent) creates a non-reactive event to fire from any Effect hook.
---
## 性能 Hook {/*performance-hooks*/}
diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md
index 3e7392c28f..b4d89c6848 100644
--- a/src/content/reference/react/useActionState.md
+++ b/src/content/reference/react/useActionState.md
@@ -4,14 +4,19 @@ title: useActionState
+<<<<<<< HEAD
`useActionState` 是一个可以根据某个表单动作的结果更新 state 的 Hook。
+=======
+`useActionState` is a React Hook that lets you update state with side effects using [Actions](/reference/react/useTransition#functions-called-in-starttransition-are-called-actions).
+>>>>>>> 55a317d40781a0054a05a9f6c443ae0bd71f7d7e
```js
-const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);
+const [state, dispatchAction, isPending] = useActionState(reducerAction, initialState, permalink?);
```
+<<<<<<< HEAD
在早期的 React Canary 版本中，此 API 是 React DOM 的一部分，称为 `useFormState`。
@@ -19,25 +24,32 @@ const [state, formAction, isPending] = useActionState(fn, initialState, permalin
+=======
+>>>>>>> 55a317d40781a0054a05a9f6c443ae0bd71f7d7e
---
## 参考 {/*reference*/}
-### `useActionState(action, initialState, permalink?)` {/*useactionstate*/}
+### `useActionState(reducerAction, initialState, permalink?)` {/*useactionstate*/}
+<<<<<<< HEAD
{/* TODO T164397693: link to actions documentation once it exists */}
在组件的顶层调用 `useActionState` 即可创建一个随 [表单动作被调用](/reference/react-dom/components/form) 而更新的 state。在调用 `useActionState` 时在参数中传入现有的表单动作函数以及一个初始状态，无论 Action 是否在 pending 中，它都会返回一个新的 action 函数和一个 form state 以供在 form 中使用。这个新的 form state 也会作为参数传入提供的表单动作函数。
+=======
+Call `useActionState` at the top level of your component to create state for the result of an Action.
+>>>>>>> 55a317d40781a0054a05a9f6c443ae0bd71f7d7e
```js
-import { useActionState } from "react";
+import { useActionState } from 'react';
-async function increment(previousState, formData) {
- return previousState + 1;
+function reducerAction(previousState, actionPayload) {
+ // ...
}
+<<<<<<< HEAD
function StatefulForm({}) {
const [state, formAction] = useActionState(increment, 0);
return (
@@ -54,51 +66,147 @@ form state 是一个只在表单被提交触发 action 后才会被更新的值
如果与服务器函数一起使用，`useActionState` 允许与表单交互的服务器的返回值在激活完成前显示。
[请参阅下方更多示例](#usage)。
+=======
+function MyCart({initialState}) {
+ const [state, dispatchAction, isPending] = useActionState(reducerAction, initialState);
+ // ...
+}
+```
+
+[See more examples below.](#usage)
+>>>>>>> 55a317d40781a0054a05a9f6c443ae0bd71f7d7e
#### 参数 {/*parameters*/}
+<<<<<<< HEAD
* `fn`：当按钮被按下或者表单被提交时触发的函数。当函数被调用时，该函数会接收到表单的上一个 state（初始值为传入的 `initialState` 参数，否则为上一次执行完该函数的结果）作为函数的第一个参数，余下参数为普通表单动作接到的参数。
* `initialState`：state 的初始值。任何可序列化的值都可接收。当 action 被调用一次后该参数会被忽略。
* **可选的** `permalink`：一个包含了在特定情况下（后述）表单提交后将跳转到的独立 URL 的字符串。此参数用于渐进式地增强应用了动态内容的页面（例如 feeds）：如果 `fn` 是一个 [服务器函数](/reference/rsc/server-functions)，并且表单在 JavaScript 包加载之前提交，则浏览器将导航到指定的 `permalink` URL，而不是当前页面的 URL。确保在目标页面上渲染相同的表单组件（包括相同的 `fn` 和 `permalink` ），以便 React 知道应如何同步状态。一旦表单被激活，此参数将不再起作用。
{/* TODO T164397693: link to serializable values docs once it exists */}
+=======
+* `reducerAction`: The function to be called when the Action is triggered. When called, it receives the previous state (initially the `initialState` you provided, then its previous return value) as its first argument, followed by the `actionPayload` passed to `dispatchAction`.
+* `initialState`: The value you want the state to be initially. React ignores this argument after `dispatchAction` is invoked for the first time.
+* **optional** `permalink`: A string containing the unique page URL that this form modifies.
+ * For use on pages with [React Server Components](/reference/rsc/server-components) with progressive enhancement.
+ * If `reducerAction` is a [Server Function](/reference/rsc/server-functions) and the form is submitted before the JavaScript bundle loads, the browser will navigate to the specified permalink URL rather than the current page's URL.
+>>>>>>> 55a317d40781a0054a05a9f6c443ae0bd71f7d7e
#### 返回值 {/*returns*/}
+<<<<<<< HEAD
`useActionState` 返回一个包含以下值的数组：
1. 当前的 state。第一次渲染期间，该值为传入的 `initialState` 参数值。在 action 被调用后该值会变为 action 的返回值。
2. 一个新的 action 函数用于在你的 `form` 组件的 `action` 参数或表单中任意一个 `button` 组件的 `formAction` 参数中传递。这个 action 也可以手动在 [`startTransition`](/reference/react/startTransition) 中调用。
3. 一个 `isPending` 标识，用于表明是否有正在 pending 的 Transition。
+=======
+`useActionState` returns an array with exactly three values:
+
+1. The current state. During the first render, it will match the `initialState` you passed. After `dispatchAction` is invoked, it will match the value returned by the `reducerAction`.
+2. A `dispatchAction` function that you call inside [Actions](/reference/react/useTransition#functions-called-in-starttransition-are-called-actions).
+3. The `isPending` flag that tells you if any dispatched Actions for this Hook are pending.
+>>>>>>> 55a317d40781a0054a05a9f6c443ae0bd71f7d7e
#### 注意 {/*caveats*/}
+<<<<<<< HEAD
* 在支持 React 服务器组件的框架中使用该功能时，`useActionState` 允许表单在服务器渲染阶段时获得部分交互性。当不使用服务器组件时，它的特性与本地 state 相同。
* 与直接通过表单动作调用的函数不同，传入 `useActionState` 的函数被调用时，会多传入一个代表 state 的上一个值或初始值的参数作为该函数的第一个参数。
+=======
+* `useActionState` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
+* React queues and executes multiple calls to `dispatchAction` sequentially. Each call to `reducerAction` receives the result of the previous call.
+* The `dispatchAction` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
+* When using the `permalink` option, ensure the same form component is rendered on the destination page (including the same `reducerAction` and `permalink`) so React knows how to pass the state through. Once the page becomes interactive, this parameter has no effect.
+* When using Server Functions, `initialState` needs to be [serializable](/reference/rsc/use-server#serializable-parameters-and-return-values) (values like plain objects, arrays, strings, and numbers).
+* If `dispatchAction` throws an error, React cancels all queued actions and shows the nearest [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary).
+* If there are multiple ongoing Actions, React batches them together. This is a limitation that may be removed in a future release.
+
+
+
+`dispatchAction` must be called from an Action.
+
+You can wrap it in [`startTransition`](/reference/react/startTransition), or pass it to an [Action prop](/reference/react/useTransition#exposing-action-props-from-components). Calls outside that scope won’t be treated as part of the Transition and [log an error](#async-function-outside-transition) on development mode.
+
+
+
+---
+
+### `reducerAction` function {/*reduceraction*/}
+
+The `reducerAction` function passed to `useActionState` receives the previous state and returns a new state.
+
+Unlike reducers in `useReducer`, the `reducerAction` can be async and perform side effects:
+
+```js
+async function reducerAction(previousState, actionPayload) {
+ const newState = await post(actionPayload);
+ return newState;
+}
+```
+
+Each time you call `dispatchAction`, React calls the `reducerAction` with the `actionPayload`. The reducer will perform side effects such as posting data, and return the new state. If `dispatchAction` is called multiple times, React queues and executes them in order so the result of the previous call is passed as `previousState` for the current call.
+
+#### Parameters {/*reduceraction-parameters*/}
+
+* `previousState`: The last state. Initially this is equal to the `initialState`. After the first call to `dispatchAction`, it's equal to the last state returned.
+
+* **optional** `actionPayload`: The argument passed to `dispatchAction`. It can be a value of any type. Similar to `useReducer` conventions, it is usually an object with a `type` property identifying it and, optionally, other properties with additional information.
+
+#### Returns {/*reduceraction-returns*/}
+
+`reducerAction` returns the new state, and triggers a Transition to re-render with that state.
+
+#### Caveats {/*reduceraction-caveats*/}
+
+* `reducerAction` can be sync or async. It can perform sync actions like showing a notification, or async actions like posting updates to a server.
+* `reducerAction` is not invoked twice in `` since `reducerAction` is designed to allow side effects.
+* The return type of `reducerAction` must match the type of `initialState`. If TypeScript infers a mismatch, you may need to explicitly annotate your state type.
+* If you set state after `await` in the `reducerAction` you currently need to wrap the state update in an additional `startTransition`. See the [startTransition](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition) docs for more info.
+* When using Server Functions, `actionPayload` needs to be [serializable](/reference/rsc/use-server#serializable-parameters-and-return-values) (values like plain objects, arrays, strings, and numbers).
+
+
+
+#### Why is it called `reducerAction`? {/*why-is-it-called-reduceraction*/}
+
+The function passed to `useActionState` is called a *reducer action* because:
+
+- It *reduces* the previous state into a new state, like `useReducer`.
+- It's an *Action* because it's called inside a Transition and can perform side effects.
+
+Conceptually, `useActionState` is like `useReducer`, but you can do side effects in the reducer.
+
+
+>>>>>>> 55a317d40781a0054a05a9f6c443ae0bd71f7d7e
---
## 用法 {/*usage*/}
+<<<<<<< HEAD
### 使用某个表单动作返回的信息 {/*using-information-returned-by-a-form-action*/}
在组件的顶层调用 `useActionState` 以获取上一次表单被提交时触发的 action 的返回值。
+=======
+### Adding state to an Action {/*adding-state-to-an-action*/}
-```js [[1, 5, "state"], [2, 5, "formAction"], [3, 5, "action"], [4, 5, "null"], [2, 8, "formAction"]]
+Call `useActionState` at the top level of your component to create state for the result of an Action.
+>>>>>>> 55a317d40781a0054a05a9f6c443ae0bd71f7d7e
+
+```js [[1, 7, "count"], [2, 7, "dispatchAction"], [3, 7, "isPending"]]
import { useActionState } from 'react';
-import { action } from './actions.js';
-function MyComponent() {
- const [state, formAction] = useActionState(action, null);
+async function addToCartAction(prevCount) {
+ // ...
+}
+function Counter() {
+ const [count, dispatchAction, isPending] = useActionState(addToCartAction, 0);
+
// ...
- return (
-
- );
}
```
+<<<<<<< HEAD
`useActionState` 返回一个包含以下值的数组：
1. 该表单的 当前 state，初始值为提供的 初始 state，当表单被提交后则改为传入的 action 的返回值。
@@ -121,13 +229,24 @@ function action(currentState, formData) {
#### 展示表单错误 {/*display-form-errors*/}
将 action 包裹进 `useActionState` 即可展示诸如错误信息或服务器函数返回的 toast 等信息。
+=======
+`useActionState` returns an array with exactly three items:
+
+1. The current state, initially set to the initial state you provided.
+2. The action dispatcher that lets you trigger `reducerAction`.
+3. A pending state that tells you whether the Action is in progress.
+
+To call `addToCartAction`, call the action dispatcher. React will queue calls to `addToCartAction` with the previous count.
+>>>>>>> 55a317d40781a0054a05a9f6c443ae0bd71f7d7e
```js src/App.js
-import { useActionState, useState } from "react";
-import { addToCart } from "./actions.js";
+import { useActionState, startTransition } from 'react';
+import { addToCart } from './api';
+import Total from './Total';
+<<<<<<< HEAD
function AddToCartForm({itemID, itemTitle}) {
const [message, formAction, isPending] = useActionState(addToCart, null);
return (
@@ -163,38 +282,164 @@ export async function addToCart(prevState, queryData) {
setTimeout(resolve, 2000);
});
return "无法加入购物车：商品已售罄";
+=======
+export default function Checkout() {
+ const [count, dispatchAction, isPending] = useActionState(async (prevCount) => {
+ return await addToCart(prevCount)
+ }, 0);
+
+ function handleClick() {
+ startTransition(() => {
+ dispatchAction();
+ });
+>>>>>>> 55a317d40781a0054a05a9f6c443ae0bd71f7d7e
}
+
+ return (
+
+ );
+}
+```
+
+```js src/api.js
+export async function addToCart(count) {
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ return count + 1;
+}
+
+export async function removeFromCart(count) {
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ return Math.max(0, count - 1);
}
```
-```css src/styles.css hidden
-form {
- border: solid 1px black;
- margin-bottom: 24px;
- padding: 12px
+```css
+.checkout {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 16px;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ font-family: system-ui;
+}
+
+.checkout h2 {
+ margin: 0 0 8px 0;
}
-form button {
- margin-right: 12px;
+.row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.row button {
+ margin-left: auto;
+ min-width: 150px;
+}
+
+.total {
+ font-weight: bold;
+}
+
+hr {
+ width: 100%;
+ border: none;
+ border-top: 1px solid #ccc;
+ margin: 4px 0;
+}
+
+button {
+ padding: 8px 16px;
+ cursor: pointer;
}
```
+
-
+Every time you click "Add Ticket," React queues a call to `addToCartAction`. React shows the pending state until all the tickets are added, and then re-renders with the final state.
+<<<<<<< HEAD
#### 提交表单后展示结构性数据 {/*display-structured-information-after-submitting-a-form*/}
服务器函数的返回值可以为任意可序列化的值。例如，可以返回一个实例，该实例携带一个 boolean 类型的属性表示操作是否成功，同时附带错误信息或更新消息。
+=======
+
+
+#### How `useActionState` queuing works {/*how-useactionstate-queuing-works*/}
+
+Try clicking "Add Ticket" multiple times. Every time you click, a new `addToCartAction` is queued. Since there's an artificial 1 second delay, that means 4 clicks will take ~4 seconds to complete.
+
+**This is intentional in the design of `useActionState`.**
+
+We have to wait for the previous result of `addToCartAction` in order to pass the `prevCount` to the next call to `addToCartAction`. That means React has to wait for the previous Action to finish before calling the next Action.
+
+You can typically solve this by [using with useOptimistic](/reference/react/useActionState#using-with-useoptimistic) but for more complex cases you may want to consider [cancelling queued actions](#cancelling-queued-actions) or not using `useActionState`.
+
+
+
+---
+
+### Using multiple Action types {/*using-multiple-action-types*/}
+
+To handle multiple types, you can pass an argument to `dispatchAction`.
+
+By convention, it is common to write it as a switch statement. For each case in the switch, calculate and return some next state. The argument can have any shape, but it is common to pass objects with a `type` property identifying the action.
+>>>>>>> 55a317d40781a0054a05a9f6c443ae0bd71f7d7e
```js src/App.js
-import { useActionState, useState } from "react";
-import { addToCart } from "./actions.js";
+import { useActionState, startTransition } from 'react';
+import { addToCart, removeFromCart } from './api';
+import Total from './Total';
+
+export default function Checkout() {
+ const [count, dispatchAction, isPending] = useActionState(updateCartAction, 0);
+
+ function handleAdd() {
+ startTransition(() => {
+ dispatchAction({ type: 'ADD' });
+ });
+ }
+
+ function handleRemove() {
+ startTransition(() => {
+ dispatchAction({ type: 'REMOVE' });
+ });
+ }
-function AddToCartForm({itemID, itemTitle}) {
- const [formState, formAction] = useActionState(addToCart, {});
return (
+<<<<<<< HEAD
+=======
+
+ );
}
```
-```js src/actions.js
-"use server";
+```js src/api.js hidden
+export async function addToCart(count) {
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ return count + 1;
+}
-export async function addToCart(prevState, queryData) {
- const itemID = queryData.get('itemID');
- if (itemID === "1") {
- return {
- success: true,
- cartSize: 12,
- };
- } else {
- return {
- success: false,
- message: "商品已售罄",
- };
+export async function removeFromCart(count) {
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ return Math.max(0, count - 1);
+}
+```
+
+```css
+.checkout {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 16px;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ font-family: system-ui;
+}
+
+.checkout h2 {
+ margin: 0 0 8px 0;
+}
+
+.row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.stepper {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.qty {
+ min-width: 20px;
+ text-align: center;
+}
+
+.buttons {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.buttons button {
+ padding: 0 8px;
+ font-size: 10px;
+ line-height: 1.2;
+ cursor: pointer;
+}
+
+.pending {
+ width: 20px;
+ text-align: center;
+}
+
+.total {
+ font-weight: bold;
+}
+
+hr {
+ width: 100%;
+ border: none;
+ border-top: 1px solid #ccc;
+ margin: 4px 0;
+}
+```
+
+
+
+When you click to increase or decrease the quantity, an `"ADD"` or `"REMOVE"` is dispatched. In the `reducerAction`, different APIs are called to update the quantity.
+
+In this example, we use the pending state of the Actions to replace both the quantity and the total. If you want to provide immediate feedback, such as immediately updating the quantity, you can use `useOptimistic`.
+
+
+
+#### How is `useActionState` different from `useReducer`? {/*useactionstate-vs-usereducer*/}
+
+You might notice this example looks a lot like `useReducer`, but they serve different purposes:
+
+- **Use `useReducer`** to manage state of your UI. The reducer must be pure.
+
+- **Use `useActionState`** to manage state of your Actions. The reducer can perform side effects.
+
+You can think of `useActionState` as `useReducer` for side effects from user Actions. Since it computes the next Action to take based on the previous Action, it has to [order the calls sequentially](/reference/react/useActionState#how-useactionstate-queuing-works). If you want to perform Actions in parallel, use `useState` and `useTransition` directly.
+
+
+
+---
+
+### Using with `useOptimistic` {/*using-with-useoptimistic*/}
+
+You can combine `useActionState` with [`useOptimistic`](/reference/react/useOptimistic) to show immediate UI feedback:
+
+
+
+
+```js src/App.js
+import { useActionState, startTransition, useOptimistic } from 'react';
+import { addToCart, removeFromCart } from './api';
+import Total from './Total';
+
+export default function Checkout() {
+ const [count, dispatchAction, isPending] = useActionState(updateCartAction, 0);
+ const [optimisticCount, setOptimisticCount] = useOptimistic(count);
+
+ function handleAdd() {
+ startTransition(() => {
+ setOptimisticCount(c => c + 1);
+ dispatchAction({ type: 'ADD' });
+ });
+ }
+
+ function handleRemove() {
+ startTransition(() => {
+ setOptimisticCount(c => c - 1);
+ dispatchAction({ type: 'REMOVE' });
+ });
}
+
+ return (
+