useEffect未传第二个参数或传null/undefined时的执行行为是什么？

useEffect的触发时机完全由第二个参数的传入值决定，不同传参的执行逻辑有明确区别：

• 完全省略第二个参数
  仅传入effect回调、不传递第二个参数时，effect会在组件每一次渲染提交到DOM后触发执行，覆盖首次挂载完成、后续所有state/props变更导致的重渲染完成场景。

  // 每次渲染完成后都会执行
  useEffect(() => {
    console.log('组件完成一次渲染')
  })
  

• 第二个参数传入null或undefined
  React内部会先校验第二个参数的类型，只有当参数是数组类型时才会启动依赖对比逻辑。传入null、undefined这类非数组值时，逻辑和完全省略第二个参数完全一致，effect会在每次渲染完成后触发。

  // 以下两种写法效果等同于省略第二个参数，每次渲染后执行
  useEffect(() => {
    console.log('依赖项传null，每次渲染触发')
  }, null)
  
  useEffect(() => {
    console.log('依赖项传undefined，每次渲染触发')
  }, undefined)
  

  提示：这类非数组类型的依赖传法不符合React官方编码规范，实际开发中不要故意使用，会增加代码维护的理解成本。

• 第二个参数传入数组类型值
  此时React会在每次渲染时对比数组内所有依赖项和上一次渲染时的值，根据对比结果决定是否触发effect：
  • 传入空数组[]：数组内无任何依赖项，不存在值变化的可能，effect仅会在组件首次挂载完成后执行1次，后续重渲染不会触发，对应类组件componentDidMount生命周期的执行时机。
  • 数组内包含state、props、上下文值等响应式依赖：只有当数组中任意一个依赖项和上一次渲染时的值/引用不相等时，effect才会在本次渲染完成后触发。

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