React中在Effect外获取数据的方式是否合理？会存在哪些问题？

这种写法完全不合理，会带来以下几个关键问题：

• 重复发起请求：你以为数据返回后不会再触发，但实际组件可能因父组件更新、自身其他状态变化等原因重渲染。如果API请求还没完成（此时data仍为undefined），每次重渲染都会再次调用fetchDataAPI，导致同一接口被多次请求，浪费服务器资源。

• 违反React渲染规则：函数组件的渲染阶段应该是纯计算逻辑，不能包含数据请求这类副作用操作。直接在渲染流程里调用API，会导致React无法追踪副作用的执行时机，引发不可预测的渲染行为——比如在严格模式下，React会刻意重复渲染组件，这时候会直接触发多次API调用。

• 内存泄漏风险：如果组件在API请求完成前被卸载（比如用户跳转页面），setData会尝试更新一个已卸载组件的状态，触发React警告，甚至可能因回调持有组件引用导致内存泄漏。

正确的写法应该用useEffect处理副作用： #

const Component = () => {
  const [data, setData] = useState(undefined)
  
  useEffect(() => {
    let isMounted = true;
    // 请求数据，仅在组件挂载时执行一次
    fetchDataAPI('api/mock-data', (responseData) => {
      // 确保组件仍挂载时再更新状态，避免内存泄漏
      if (isMounted) {
        setData(responseData);
      }
    });
    
    // 组件卸载时清理标记
    return () => {
      isMounted = false;
    };
  }, []); // 空依赖数组：仅在组件挂载/卸载时执行
}

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