如何在带有其他依赖的useEffect中区分首次挂载与后续更新执行？

实现该需求最简洁稳定的方案是借助useRef存储首次执行标记，具体实现如下：

import { useEffect, useRef } from 'react';

// 在组件内部定义首次挂载标记
const isFirstMount = useRef(true);

useEffect(() => {
  // 首次挂载触发时仅更新标记，不执行业务逻辑
  if (isFirstMount.current) {
    isFirstMount.current = false;
    return;
  }
  // 此处放置仅在依赖更新后需要执行的业务逻辑
  // your operations
}, [props.inputs, props.inputLabels]);

方案原理说明 #

• useRef返回的对象会在组件整个生命周期内保持引用不变，修改其.current属性不会触发组件重渲染，也不会干扰useEffect的触发规则，比用useState存储标记的性能更优
• 首次组件挂载触发useEffect时只会更新标记值，后续依赖项props.inputs、props.inputLabels变更触发的useEffect执行都会正常运行业务逻辑
• 该方案不需要修改原有useEffect的依赖数组，完全保留原有触发逻辑

额外注意事项 #

如果你的useEffect需要写组件卸载的清理逻辑，直接在useEffect内返回清理函数即可，和上述标记逻辑互不影响，示例如下：

useEffect(() => {
  if (isFirstMount.current) {
    isFirstMount.current = false;
    return;
  }
  // 业务逻辑示例
  const handler = () => {}
  window.addEventListener('resize', handler)

  // 清理逻辑正常编写即可
  return () => {
    window.removeEventListener('resize', handler)
  }
}, [props.inputs, props.inputLabels])

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