React 19单页应用中使用use()进行数据获取的有效性问题

问题背景 #

我见过用use()替代useEffect在首次渲染时获取数据的写法，本意是借助Suspense和ErrorBoundary处理加载状态与错误，但实际达不到预期——每次组件渲染都会重新创建Promise，导致无法正常解析，而且React官方文档也不推荐这种用法，想知道这是不是有效方案？

示例代码 #

import { use } from 'react'

async function fetchUser() {
  const response = await fetch('/api/user');
  return response.json();
}

function UserProfile() {
  const user = use(fetchUser());

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

结论：这不是有效方案 #

原因如下：

• 重复创建Promise导致循环渲染与资源浪费：每次组件渲染时，fetchUser()都会被调用生成新的Promise实例。use()会尝试解析这个新Promise，触发组件重新渲染，进而再次调用fetchUser()，陷入无限循环；同时无法复用之前的请求结果，造成不必要的重复网络请求。
• 违背官方设计初衷：React的use()钩子是为配合已缓存的Promise（比如来自React Query、SWR这类数据管理库，或是组件内部缓存的Promise）而设计，并非让开发者直接在渲染阶段调用异步函数生成新Promise。这种用法会破坏Suspense的预期行为，不符合React的渲染机制。

正确的替代方式 #

如果想用Suspense处理数据加载，推荐两种方式：

• 使用成熟数据缓存库：比如React Query、SWR，这类库会自动缓存Promise、处理重复请求，配合Suspense就能实现简洁的加载状态与错误管理，是官方推荐的方案。
• 手动缓存Promise：用useMemo在组件内部缓存异步函数的调用结果，确保每次渲染复用同一个Promise：

  import { use, useMemo } from 'react'
  
  async function fetchUser() {
    const response = await fetch('/api/user');
    return response.json();
  }
  
  function UserProfile() {
    // 用useMemo缓存Promise，仅在依赖变化时重新生成
    const userPromise = useMemo(() => fetchUser(), []);
    const user = use(userPromise);
  
    return (
      <div>
        <h1>{user.name}</h1>
        <p>{user.email}</p>
      </div>
    );
  }
  

  不过手动缓存的稳定性不如专业数据库，仅适合简单场景。

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