function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    

       setName(event.target.value)} />
      
        Update
      
      {error && 
{error}
}
    
  );
}

function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = async () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    

       setName(event.target.value)} />
      
        Update
      
      {error && 
{error}
}
    

  );
}

function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
    }
  );

  return (
    

      
      Update
      {error && 
{error}
}
    
  );
}

const [error, submitAction, isPending] = useActionState(async (previousState, newName) => {  
  const error = await updateName(newName);  
  
  if (error) {  
    // 可以返回Action的任何结果，这里只返回错误信息。  
    return error;  
  }  
  
  // 处理成功的情况  
});

import { useFormStatus } from 'react-dom';  
  
function DesignButton() {  
  const { pending } = useFormStatus();  
  
  return ;  
}

function ChangeName({currentName, onUpdateName}) {
  const [optimisticName, setOptimisticName] = useoptimistic(currentName);

  const submitAction = async formData => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    
      
Your name is: {optimisticName}
      

        Change Name:
        
      
    
  );
}

import { use } from 'react';  
  
function Comments({ commentsPromise }) {  
  // 使用use读取Promise，React会在Promise解析前挂起组件渲染  
  const comments = use(commentsPromise);  
  
  return (  
    
  
      {comments.map((comment) => (  
        
{comment.text}
  
      ))}  
    
  
  );  
}  
  
function Page({ commentsPromise }) {  
  // 当Comments组件因use挂起时，这里会显示Suspense的fallback内容  
  return (  
    加载中...

同样可以使用use来读取上下文（），因而实现在特定条件下（比如初期返回以后）按需读取上下文数据。

初期返回指的是在函数或方式中的某个点提早结束执行，并返回结果或退出，而不是继续执行剩余的代码。在函数内部，按照个别条件或逻辑，你可能会决定不须要继续执行后续的代码，此时可以使用句子来立刻退出函数。

import {use} from 'react';
import ThemeContext from './ThemeContext'

function Heading({children}) {
  if (children == null) {
    return null;
  }
   
  // 使用 useContext 在这里不会生效 ，因为存在早期返回。
  const theme = use(ThemeContext);
  return (
    

      {children}
    
  );
}

useAPI的调用仅限于渲染阶段，与React的Hook类似。但是，与Hook不同的是，useAPI准许在条件句子中灵活调用。展望未来，React团队计划进一步扩充useAPI的功能，提供更多在渲染时消费资源的方法。

React服务器组件服务器组件

服务器组件是一种创新性的技术，它容许在打包前，在独立于顾客端应用程序或服务器端渲染（SSR）服务器的环境中预先渲染组件。这个独立的环境即为React服务器组件中的“服务器”。服务器组件有两种运行模式：一种是在建立时（比如在持续集成服务器上）运行一次；另一种是针对每位恳求，通过Web服务器进行实时运行。

React19全面集成了来自频道的所有服务器组件特点。这意味着，这些带有服务器组件的库如今可以将React19作为对等依赖项进行目标定位，并通过react-导入条件，为支持全栈React构架的框架提供强悍的支持。

服务器操作

服务器动作是一项强悍功能，它容许顾客端组件调用并执行在服务端的异步函数。

通过“use”指令定义服务器操作后，框架将智能地创建一个指向服务端函数的引用，并安全地将该引用传递给顾客端组件。当顾客端组件须要调用这个函数时，React会负责向服务器发送恳求，执行相应的函数，并将结果返回给顾客端。

服务器操作的创建特别灵活，既可以在服务器组件内部创建，并作为属性传递给顾客端组件使用；也可以直接在顾客端组件中导出并调用。这些设计致使服务器操作就能无缝集成到应用中，实现前后端数据的流畅交互。

功能改进ref作为属性

从React19开始，可以将ref作为函数组件的参数进行访问：

function MyInput({placeholder, ref}) {  
  return   
}  
  
//...  
  

新的函数组件将不再须要，React团队将会发布一个代码转换工具来手动更新组件，以使用新的ref属性。在未来的版本中，将弃用并移除。

水合错误报告

React19在react-dom中对水合错误的报告进行了优化。过去，在开发模式下遇见水合不匹配时，系统常常只记录多个错误，而缺少关于不匹配内容的具体信息。如今，引入了diff功能，致使顾客端渲染与服务端渲染内容之间的差别一目了然。这一改进除了提高了错误报告的清晰度，更有助于开发者迅速定位并修补水合相关问题，因而急剧提高开发效率。

现今只会记录一条包含不匹配内容差别的消息：

作为提供者

React19准许直接将用作提供者，而无需使用传统的写法：

const ThemeContext = createContext('');  
  
function App({children}) {  
  return (  
      
      {children}  
      
  );  
}

这些新的句型愈发简练直观。为了便捷开发者升级现有代码，React团队将发布一个代码转换工具，才能手动将现有的转换为新的提供者。未来版本中，将逐渐弃用，以促进React社区向愈发简化的句型过渡。

refs清除函数

如今支持从ref反弹函数中返回一个清除函数：

 {  
    // 创建 ref  
  
    // 新增：返回一个清理函数，当元素从 DOM 中移除时重置 ref。  
    return () => {  
      // ref 的清理工作  
    };  
  }}  
/>

当组件卸载时，React将调用从ref反弹函数中返回的清除函数。这适用于DOMrefs、类组件的refs以及。

因为引入了ref清除函数的机制，如今将拒绝从ref反弹函数中返回除清除函数以外的任何内容。为了防止这个问题，我们一般建议避开使用隐式返回，例如将形参操作置于花括弧中，如下所示：

 (instance = current)} />

 { instance = current; }} />

这些改变是由于难以判定原始代码中返回的是否应当是清除函数，还是无意中的隐式返回值。通过将形参操作明晰地包裹在花括弧中，确保了ref反弹中不会意外地返回任何值，除非有意为之。

为了手动化这些模式的转换，可以使用no--ref--规则进行代码转换。这将帮助你在升级React版本时更顺畅地处理ref相关的代码。

的初始值

React19为引入了选项，该选项容许指定组件首次渲染时返回的值。

function Search({ deferredValue }) {  
  // 在组件首次渲染时，返回 initialValue 作为 value。  
  // 随后，useDeferredValue 会在后台计划一次重渲染，使用 deferredValue 作为新的 value。  
  const value = useDeferredValue(deferredValue, { initialValue: '' });  
  
  return (  
      
  );  
}

使用可以确保组件在首次渲染时就能立刻显示一个占位值，而无需等待的异步估算完成。此后，当打算好时，会触发组件的后台重渲染，以显示最新的值。这有助于提高应用的响应性和用户体验。

文档元数据支持

在HTML中，例如、和等文档元数据标签一般放置在区域内。但是，在React应用中，决定什么元数据适用于当前页面的组件可能并不直接坐落渲染的位置，甚至React可能根本不直接渲染。过去，这种元数据标签须要自动通过或利用如react-这样的库进行插入，且在服务器渲染React应用时须要非常当心处理。

React19引入了原生支持在组件中渲染文档元数据标签的功能。这意味着可以直接在组件内部定义这种标签，React会手动将它们提高到文档的部份。这一改进确保了元数据标签才能在仅顾客端应用、流式服务端渲染（SSR）以及服务器组件等场景下正常工作。

下边是一个简单的示例，展示了怎样在React组件中定义并使用这种元数据标签：

function BlogPost({ post }) {  
  return (  
    
  
      
{post.title}h1>  
      {/* 直接在组件内部定义元数据标签 */}