React中是否应在useEffect内调用API？求开发者建议

1. 开发模式下useEffect执行两次的真实原因 #

React 18+的Strict Mode会在开发环境中刻意重复执行挂载阶段的副作用（包括useEffect的回调），这和你是否在里面调用API完全无关。这个机制的目的是帮你提前排查未正确清理的副作用（比如未取消的订阅、残留的定时器），生产环境不会触发这个重复执行的逻辑。

如果只是想临时验证效果，可以暂时关闭Strict Mode，但不建议长期这么做——它能帮你提前发现很多潜在问题。

2. useEffect调用API是不是“非最佳实践”？ #

在绝大多数业务场景里，这是完全合理且常规的做法，比如组件挂载时获取初始数据、依赖项变化时重新请求数据。只要注意以下几点，就不会有问题：

• 一定要设置正确的依赖数组：比如依赖userId，当userId变化时自动触发重新请求，避免遗漏依赖导致的脏数据
• 处理请求取消：组件卸载前如果请求还未完成，要用AbortController取消请求，避免内存泄漏
• 避免无限循环：不要在依赖里放每次渲染都会生成新引用的对象（比如直接写{}），可以用useMemo缓存或者剔除不必要的依赖

示例代码：

import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    async function fetchUser() {
      try {
        const res = await fetch(`/api/users/${userId}`, { signal });
        const data = await res.json();
        setUser(data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          console.error('请求失败:', err);
        }
      } finally {
        setLoading(false);
      }
    }

    fetchUser();

    return () => controller.abort(); // 组件卸载时取消请求
  }, [userId]); // 依赖userId，变化时重新请求

  if (loading) return <div>加载中...</div>;
  if (!user) return <div>用户不存在</div>;
  return <div>用户名：{user.name}</div>;
}

3. 不用useEffect的替代方案 #

如果想脱离useEffect处理数据请求，有几种成熟的选择：

- 使用React Query/SWR等数据请求库 #

这类库封装了数据缓存、自动重请求、背景刷新、错误重试等逻辑，不需要手动写useEffect，还能大幅减少重复代码。
示例（React Query）：

import { useQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  const { data: user, isLoading, error } = useQuery({
    queryKey: ['user', userId], // 缓存键，userId变化时自动重新请求
    queryFn: async () => {
      const res = await fetch(`/api/users/${userId}`);
      return res.json();
    },
  });

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>请求出错</div>;
  return <div>用户名：{user.name}</div>;
}

- 服务器组件（React 18+） #

如果你用Next.js等支持React Server Components的框架，可以直接在服务器组件里写异步请求，数据在服务器端获取后直接传递给客户端组件渲染，完全不需要客户端副作用钩子。
示例：

// 服务器组件（文件后缀为.js/.ts，非.jsx/.tsx）
async function UserProfile({ userId }) {
  const res = await fetch(`/api/users/${userId}`);
  const user = await res.json();

  return <ClientUserProfile user={user} />;
}

// 客户端组件（文件后缀为.jsx/.tsx）
function ClientUserProfile({ user }) {
  // 直接渲染服务器端获取的数据
  return <div>用户名：{user.name}</div>;
}

- 自定义请求钩子 #

如果不想引入第三方库，可以自己封装一个自定义钩子，把请求逻辑抽离出来，让组件代码更简洁：

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    async function fetchData() {
      try {
        const res = await fetch(url, { signal });
        const result = await res.json();
        setData(result);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err);
        }
      } finally {
        setLoading(false);
      }
    }

    fetchData();

    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

// 组件中使用
function UserProfile({ userId }) {
  const { data: user, loading, error } = useFetch(`/api/users/${userId}`);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>请求出错</div>;
  return <div>用户名：{user.name}</div>;
}

总结：useEffect调用API本身是常规做法，开发模式的两次执行是Strict Mode的机制；如果想优化开发体验，可以用数据请求库、服务器组件或者自定义钩子来简化逻辑。

内容的提问来源于stack exchange，提问作者Abdullah Ibrâhim