React 19如何在返回的JSX中渲染Promise？

我写了一段React组件代码，原本以为直接渲染Promise类型会报错，但在React 19里点击按钮后居然能正常等待3秒显示响应文本，想知道这是怎么实现的。

React组件代码 #

import { useState } from "react"

export default function TestRoute() {
  const [response, setResponse] = useState<Promise<string>>()

  const sendRequest = async (): Promise<string> => {
    const response = await fetch('http://localhost:9090/test/test_delayed')
    const message = await response.json()
    return message.message
  }

  const handleButtonClick = async () => {
    const result = sendRequest()
    setResponse(result)
  }
  
  return (
    <div>
      <button onClick={handleButtonClick}>Delayed response</button>
      <p>{response}</p>
    </div>
  )
}

FastAPI接口代码 #

@router.get("/test_delayed")
async def test_delayed():
    await asyncio.sleep(3)
    return {
        "message": "Delayed response",
    }

原理说明 #

这是React 19新增的自动Promise渲染特性，它把异步UI的常见场景做了内置处理，简化了代码编写流程：

• 当React在JSX中识别到Promise对象时，会自动追踪它的状态变化
• Promise处于pending状态时，React会保持当前DOM内容不变，直到Promise完成
• 当Promise resolve后，React会自动用resolve的结果替换原来的Promise进行渲染
• 如果Promise reject，默认会抛出错误，你可以通过Error Boundary来捕获并处理这种情况

在React 18及更早版本中，直接渲染Promise只会显示[object Promise]或者触发报错，没有这种自动处理的能力。

如果需要自定义加载状态（比如显示加载提示），还是需要手动管理loading、data、error这类状态。

内容的提问来源于stack exchange，提问作者big_noob