React中useEffect第二次渲染不触发的问题该如何解决？

• 先确认组件是否真实发生重渲染
  在组件顶层加入console.log('组件渲染')验证二次渲染是否实际执行，大部分场景下并不是useEffect失效，而是父组件条件渲染、组件绑定的key未变化导致组件根本没有触发重渲染。
  额外注意：React.StrictMode开发模式下，组件挂载阶段会执行两次「effect执行→销毁→再执行」的逻辑，和生产模式表现不一致，不要把这个特性当成异常。
• 排查依赖项引用是否稳定
  如果你的依赖项是引用类型（对象、数组、函数），React只会做浅比较（即判断内存地址是否一致），不会对比内部内容：
  • 组件内定义的对象/数组每次渲染都会生成新引用，需要用useMemo包裹固定引用，示例：

    // 错误写法：每次渲染生成新的query对象
    const query = {id: userId}
    // 正确写法：仅当userId变化时才生成新的query对象
    const query = useMemo(() => ({id: userId}), [userId])
    

  • 组件内定义的函数每次渲染都会生成新引用，需要用useCallback包裹固定引用。
• 检查依赖数组书写是否正确
  不要手动屏蔽eslint的react-hooks/exhaustive-deps检查规则，避免出现依赖拼写错误、漏加依赖的问题；也不要在依赖数组中加入effect内部未使用的变量。
• 排查effect内部逻辑问题
  先在effect第一行加入console.log('effect触发')确认是否真的未触发，很多时候是effect内部有提前return的逻辑、或者异步逻辑遇到闭包陷阱捕获了旧的变量值，导致开发者误以为effect没有执行。
• 特殊场景适配
  如果你用的是空依赖数组[]，useEffect本身的设计就是仅在组件挂载时执行一次，后续重渲染不会触发，如果期望它在某个状态变化时执行，需要把对应状态加到依赖数组中。
  如果是路由复用组件、状态管理库取值的场景，要确保对应状态（路由参数、全局状态）被正确加入依赖，且状态变化时能触发组件重渲染。

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