React中仅在useEffect内调用一次setState，是否有更优方案？

核心结论 #

你当前使用useState+useEffect实现页面加载时单次获取数据的写法，就是业界通用的标准方案之一，完全不存在冗余问题——React的状态本质是用来管理组件渲染依赖的可变数据，哪怕只更新一次，它也是组件从「加载中」到「数据就绪」状态切换的核心触发点。

为什么必须用State？ #

React组件的渲染是数据驱动的，组件需要根据数据变化触发重新渲染。你获取到用户名后必须通知React更新视图，而触发组件重新渲染的唯一合法方式就是更新状态（或props）。如果不用useState，没有其他途径能让React感知到数据已就绪并重新渲染组件。

可选的优化写法 #

如果觉得重复编写useState+useEffect的逻辑繁琐，可以封装成自定义Hook来复用：

function useFetchSingle(url) {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url);
        const result = await res.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);

  return { data, loading, error };
}

// 组件中调用
export default function Profile() {
  const { data, loading, error } = useFetchSingle('/api/userprofiles?username=myuser');

  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error.message}</div>;

  return <div>{data.username}'s profile</div>;
}

这种封装不仅减少重复代码，还能统一处理加载、错误状态，让组件逻辑更清晰。

补充说明 #

• React 18+提供了实验性的use Hook，可直接在组件体中读取异步数据，但该API尚未稳定，不建议在生产环境使用。
• 若采用服务端渲染（SSR/SSG）架构，可在服务端提前获取数据并通过props传递给组件，这种场景下组件内无需使用useEffect，但这属于架构层面的优化，和客户端单次加载的场景逻辑不同。

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