React 19 Hooks：新特性及高效使用指南

一份关于 React 19 新 Hooks 的完整指南，包括 use()、useActionState、useFormStatus 和 useOptimistic。

原文发布于 reactuse.com

React 19 引入了四个新的内置 Hooks，改变了开发者处理异步数据、表单交互和乐观 UI 更新的方式。这些 Hooks --- use()、useActionState、useFormStatus 和 useOptimistic --- 减少了样板代码，消除了之前需要第三方代码才能实现的常见模式，并使 React 更贴近现代的服务端优先架构。

React 19 的新 Hooks

use()

use() 不同于任何之前的 React Hook。它可以在条件语句、循环内部甚至 if 语句中调用------打破了自 React 16.8 以来一直约束 React 的"Hooks 规则"。它读取资源的值，可以是 Promise 或 Context，并与 Suspense 边界集成以处理加载状态。

tsx 复制代码

import { use, Suspense } from "react";

function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise);
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

function App() {
  const userPromise = fetchUser(1);
  return (
    <Suspense fallback={<p>Loading user...</p>}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  );
}

use() 还可以替代 useContext 来读取 context 值，优势在于它可以条件调用：

tsx 复制代码

function ThemeLabel({ showTheme }: { showTheme: boolean }) {
  if (showTheme) {
    const theme = use(ThemeContext);
    return <span>{theme}</span>;
  }
  return null;
}

useActionState

useActionState 管理表单提交状态，取代了之前 React DOM canary 版本中的 useFormState。它追踪异步 action 函数的返回值以及一个 pending 标志，使加载指示器和错误处理变得简单直接。

tsx 复制代码

import { useActionState } from "react";

async function submitComment(
  previousState: { message: string } | null,
  formData: FormData
) {
  const comment = formData.get("comment") as string;
  if (comment.length < 3) {
    return { message: "评论至少需要 3 个字符。" };
  }
  await saveComment(comment);
  return { message: "评论已发布！" };
}

function CommentForm() {
  const [state, formAction, isPending] = useActionState(submitComment, null);

  return (
    <form action={formAction}>
      <textarea name="comment" required />
      <button type="submit" disabled={isPending}>
        {isPending ? "发布中..." : "发布评论"}
      </button>
      {state?.message && <p>{state.message}</p>}
    </form>
  );
}

useFormStatus

useFormStatus 让子组件可以访问父 <form> 的提交状态。这个 Hook 必须在表单内部渲染的组件中调用------它不接受任何参数，而是从最近的父表单元素读取状态。

tsx 复制代码

import { useFormStatus } from "react-dom";

function SubmitButton() {
  const { pending, data, method } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "提交中..." : "提交"}
    </button>
  );
}

useOptimistic

useOptimistic 让你在异步操作（如网络请求）在后台完成时，在 UI 中立即显示乐观更新。如果操作失败，React 会自动回退到之前的状态。

tsx 复制代码

import { useOptimistic } from "react";

function TodoList({ todos, addTodoAction }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (currentTodos, newTitle: string) => [
      ...currentTodos,
      { id: crypto.randomUUID(), title: newTitle, pending: true },
    ]
  );

  async function handleSubmit(formData: FormData) {
    const title = formData.get("title") as string;
    addOptimisticTodo(title);
    await addTodoAction(formData);
  }

  return (
    <div>
      <form action={handleSubmit}>
        <input name="title" required />
        <button type="submit">添加</button>
      </form>
      <ul>
        {optimisticTodos.map((todo) => (
          <li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>
            {todo.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

ReactUse 如何与 React 19 互补

React 19 的新 Hooks 涵盖了异步数据读取、表单状态和乐观更新。然而，它们并不能替代生产应用所需的广泛实用 Hooks。浏览器 API、DOM 测量、传感器访问、动画控制和状态持久化仍然不在 React 内置 Hooks 的范围之内。

ReactUse 提供了 115+ 个生产级 Hooks 来填补这些空白。它以 TypeScript 为先、支持 Tree-shaking、兼容 SSR------设计为与 React 19 的内置 Hooks 并行使用，没有重叠或冲突。

内置 vs 库：你仍然需要什么

能力	React 19 内置	ReactUse (@reactuses/core)
读取 Promises/Context	`use()`	---
表单 action 状态	`useActionState`	---
表单提交状态	`useFormStatus`	---
乐观 UI 更新	`useOptimistic`	---
LocalStorage / SessionStorage	---	`useLocalStorage`、`useSessionStorage`
深色模式	---	`useDarkMode`
剪贴板访问	---	`useClipboard`
地理定位	---	`useGeolocation`
元素尺寸 / 大小调整	---	`useElementSize`、`useResizeObserver`
防抖 / 节流	---	`useDebounce`、`useThrottle`
事件监听器	---	`useEventListener`
媒体查询	---	`useMediaQuery`

React 19 覆盖了数据流和表单层。ReactUse 覆盖了你的 UI 与浏览器和用户交互所需的一切。

迁移建议

用 useActionState 替换 useFormState。 API 几乎完全相同，但增加了 isPending 返回值。
逐步采用 use()。 从已经使用 Suspense 边界的新组件开始。
将 useOptimistic 与 Server Actions 配合使用。 从简单场景开始，如切换点赞按钮。
保留你的实用 Hooks 库。 React 19 的新 Hooks 不能替代浏览器 API Hooks、状态持久化或 DOM 测量。
更新你的 TypeScript 配置。 确保 @types/react 在版本 19。

React 19 的新 Hooks 是框架向前迈出的重要一步。结合像 ReactUse 这样的综合实用库，它们为你提供了在 2026 年构建快速、响应式和可维护的 React 应用所需的一切。

开始使用 ReactUse →