向服务端发请求时如何正确使用useEffect避免首次加载触发调用

问题原因 #

React的useEffect默认会在组件首次挂载完成后执行一次回调，和依赖项是否变化无关，这就是页面加载时就自动触发服务端请求的原因。

解决方案 #

通过useRef创建一个首次渲染标记，跳过第一次的执行逻辑即可，完整实现如下：

// 首先引入useRef
import { useRef, useEffect } from 'react';

// 组件内部代码
// 创建首次渲染标记，初始值为true
const isFirstRender = useRef(true);

useEffect(() => {
  // 首次渲染时直接修改标记后返回，不执行请求
  if (isFirstRender.current) {
    isFirstRender.current = false;
    return;
  }
  // 后续只有prevRating更新时才执行服务端提交
  updateServer();
}, [companyClone.prevRating]);

补充说明 #

你当前更新prevRating的逻辑是创建全新数组而非修改原数组，所以useEffect的依赖项变化检测是准确的，只会在prevRating实际修改时触发后续的请求逻辑。

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