React中指定依赖的useEffect为何组件加载时就触发？

问题解答 #

是的，useEffect 回调默认会在组件首次挂载完成后执行一次，后续才会在依赖数组项变更时触发，这是React的官方设计规则，并非异常行为。

触发逻辑拆解 #

你遇到的执行顺序完全符合预期：

1. 组件初始化阶段，numberOfPages 状态值为设定的初始值null
2. 首次渲染完成后，所有声明的useEffect都会按书写顺序执行第一次：
   • 先执行空依赖的useEffect，计算出页数后调用setNumberOfPages更新状态
   • 同时依赖numberOfPages的useEffect也会执行第一次，此时读取到的还是初始的null
3. setNumberOfPages触发状态更新，组件重渲染后，框架检测到numberOfPages和上一次渲染的值不同，才会第二次执行这个useEffect，拿到计算后的正确数值

方案说明 #

你添加非空判断的处理是非常通用且推荐的写法，可读性高也能完美解决问题。如果确实有场景需要完全跳过首次执行，也可以通过useRef加首屏标记实现：

const isFirstMount = useRef(true);

useEffect(() => {
  if (isFirstMount.current) {
    isFirstMount.current = false;
    return;
  }
  // 这里的逻辑只会在依赖变更后触发，不会执行首次
  const newArr = splitArray(issues, numberOfPages);
  console.log('new arr', newArr);
}, [numberOfPages]);

不过这种写法实际开发中很少用到，你当前的非空判断方案就足够合理。

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