React 19 新 Hooks（附示例）

Source: Dev.to

use()

use() hook 提供了一种简洁的方式，在组件内部直接处理异步数据。它可以与 Suspense 配合使用，使渲染在 Promise resolve 之前暂停。

使用场景

获取数据并展示，无需额外的 async 处理。

示例：获取用户资料

import React, { use } from 'react';

async function fetchUserProfile(userId) {
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
}

function UserProfile({ userId }) {
  const user = use(fetchUserProfile(userId)); // Directly use the async function

  return (
    
      
## {user.name}
      
{user.bio}
    
  );
}

export default function App() {
  return (
    Loading...}>
      
    
  );
}

use() 让你在组件内部获取数据时不必显式使用 async/await 或 .then()。将组件包裹在 Suspense 中即可在数据加载期间提供加载状态。

useOptimistic()

useOptimistic 简化了乐观 UI 更新——在服务器后台处理更改的同时，立即更新 UI。

使用场景

“点赞”按钮在服务器确认之前就能立即显示新的状态。

示例：乐观的 “点赞” 按钮

import React, { useOptimistic } from 'react';
import { api } from './api'; // assume an API helper exists

function LikeButton({ postId }) {
  const [isLiked, setIsLiked] = useOptimistic(false);

  const handleLike = async () => {
    setIsLiked(true);               // Optimistic update
    await api.likePost(postId);     // Server call runs in the background
  };

  return (
    
      {isLiked ? 'Liked' : 'Like'}
    
  );
}

按钮会立即更新，而 useOptimistic 则在后台保持乐观状态与最终的服务器响应同步。

useFormStatus()

useFormStatus 提供表单提交和验证状态的实时信息，便于显示加载指示器或禁用控件。

使用场景

在表单提交期间显示加载信息并禁用提交按钮。

示例：带加载指示的表单

import React, { useFormStatus } from 'react';

function MyForm() {
  const { isSubmitting, isValid } = useFormStatus();

  return (
    
      
        Name:
        
      
      
        {isSubmitting ? 'Submitting...' : 'Submit'}
      
    
  );
}

isSubmitting 与 isValid 让你能够即时反馈并防止重复提交。

useFormState()

useFormState 自动处理表单值，省去为每个字段手动管理状态的繁琐。

使用场景

在联系表单中管理多个输入的状态，而无需写大量样板代码。

示例：管理表单值

import React, { useFormState } from 'react';

function ContactForm() {
  const { values, handleChange } = useFormState({
    name: '',
    email: '',
  });

  return (
    
      
        Name:
        
      
      
        Email:
        
      
      Submit
    
  );
}

useFormState 会让 values 与用户输入保持同步，handleChange 自动更新状态。

结论

React 19 的新 Hook——use、useOptimistic、useFormStatus 与 useFormState——简化了常见的开发模式：

• 数据获取：使用 use 与 Suspense 无缝集成。
• 乐观 UI：使用 useOptimistic 轻松实现。
• 表单处理：借助 useFormStatus 与 useFormState 更具声明性且不易出错。

这些新增功能减少了样板代码，提高了性能，使开发者能够构建更流畅、更具响应性的用户体验。