如何让useEffect仅在prop更新后执行，避免首次渲染触发

为什么会出现这个问题 #

React的useEffect默认行为就是会在组件首次挂载完成后执行一次，后续才会根据依赖数组的变化触发执行，因此哪怕你把props放到依赖数组里，首次挂载的执行是内置逻辑，没有官方的配置项可以直接跳过。

方案1：通过ref标记跳过首次渲染（适用简单场景） #

你可以用useRef存储一个首次渲染的标记位，首次执行时仅更新标记位不执行业务逻辑，后续依赖变化时再执行请求：

import { useState, useEffect, useRef } from 'react';

function GetData(props) {
  const isFirstMount = useRef(true);
  const [propsState, propsSetState] = useState('');

  useEffect(() => {
    if (isFirstMount.current) {
      isFirstMount.current = false;
      return;
    }
    // 此处写API调用逻辑
  }, [props])
}

useRef的值变更不会触发组件重渲染，不会引入额外的渲染开销，适配绝大多数只需要跳过首次执行的场景。

方案2：新增请求触发标记（更符合你的业务场景） #

如果你要求仅在表单提交后才触发请求，更稳妥的方案是不要直接依赖业务prop的变化，而是单独传一个请求触发的标识，避免prop因为其他非提交场景更新时误触发请求：

父组件示例

function Parent() {
  const [formData, setFormData] = useState('');
  // 用时间戳作为触发标记，保证每次提交都会生成新值触发子组件effect
  const [fetchTrigger, setFetchTrigger] = useState(0);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 其他表单校验逻辑
    setFetchTrigger(Date.now());
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input value={formData} onChange={e => setFormData(e.target.value)} />
        <button type="submit">提交</button>
      </form>
      <GetData requestParam={formData} fetchTrigger={fetchTrigger} />
    </div>
  )
}

子组件示例

function GetData({ requestParam, fetchTrigger }) {
  useEffect(() => {
    // 初始状态的trigger为0，直接跳过不执行
    if (fetchTrigger === 0) return;
    // 执行API调用，使用requestParam作为请求参数
  }, [fetchTrigger, requestParam])
}

这个方案逻辑更可控，完全不会出现误触发的情况，更贴合表单提交后才请求的业务需求。

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