props传入状态更新后useEffect回调未触发问题排查

useEffect是否执行回调的判定规则非常明确：组件完成渲染提交后，依赖数组中的值和上一次渲染的对应值通过Object.is浅比较结果为false时，才会执行回调。你遇到组件顶层能打印新props值、但effect内部逻辑不执行的问题，按以下优先级排查即可：

• 优先检查Hook注册是否被提前返回截断
  这是和你描述的现象匹配度最高的原因：如果useEffect声明之前存在条件判断的提前返回逻辑（比如加载态直接返回占位组件、权限不足返回空节点等），当resource更新后的那次渲染命中了提前返回条件，useEffect根本不会完成注册，自然不会触发回调。而你写在组件最顶层、提前返回逻辑之前的console.log(resource)不受影响，依然会正常打印新值。
  错误写法示例：

  const MyComponent = ({resource}) => {
    console.log(resource) // 无论是否提前返回都会执行
    if (loading) return <LoadingPlaceholder /> // 命中时直接中断渲染
    // 下面的useEffect在loading为true时根本不会被注册
    useEffect(() => {
      console.log(resource) // 不会触发
      setLoading(true)
      setVariable(setDefaultValue())
    }, [resource])
  }
  

  修复方式非常简单：严格遵守React Hook的调用规则，所有Hook（useState、useEffect、useRef等）全部声明在组件最顶层，所有条件判断、提前返回、业务渲染逻辑都放到Hook声明之后。
  修复后的正确结构：

  const MyComponent = ({resource}) => {
    // 1. 先声明所有状态和Hook
    const [loading, setLoading] = useState(false)
    const [variable, setVariable] = useState()
  
    useEffect(() => {
      setLoading(true)
      console.log(resource)
      setVariable(setDefaultValue())
    }, [resource])
  
    // 2. 再写普通逻辑、打印、事件处理等
    console.log(resource)
  
    // 3. 最后写条件返回、渲染逻辑
    if (loading) return <LoadingPlaceholder />
    return resource === 'option1' ? <Option1Panel /> : <Option2Panel />
  }
  

• 排查是否存在“假更新”问题
  如果调整Hook位置后问题依然存在，先验证两次渲染的resource值是否真的发生了变化，在组件中加以下校验代码即可：

  const prevResourceRef = useRef(resource)
  useEffect(() => {
    console.log('新旧值是否相等：', Object.is(prevResourceRef.current, resource))
    prevResourceRef.current = resource
  })
  

  如果打印结果为true，说明你以为的“值更新”实际没有发生，最常见的原因是事件对象池化导致的取值错误：部分UI组件库、React旧版本的合成事件会复用事件对象，如果你没有在事件触发的同步逻辑里提前取出e.target.value，会出现取值和预期不符的问题。修复父组件的事件回调即可：

  const handleChange = (e) => {
    const newValue = e.target.value // 同步阶段提前存值，避免事件对象复用导致取值异常
    setResource(newValue)
  }
  

• 低概率问题排查
  • 检查MyComponent是否被React.memo包裹，且自定义的props对比函数漏了resource字段的校验，错误返回true导致组件跳过更新；
  • 检查开发环境是否开启了React 18+严格模式，双执行逻辑导致依赖值被意外回滚，可临时关闭严格模式验证。

内容的提问来源于stack exchange，提问作者Dylan L.