如何让useEffect仅在满足条件时执行 点击按钮重复触发原因求解

问题原因 #

• React 的 useEffect 对引用类型的依赖项执行的是浅比较，即只会对比内存引用地址，不会递归对比对象/数组的内部内容。你每次点击按钮调用doSomething()时，都会返回一个全新创建的数组，哪怕数组内部的内容和之前完全一致，引用地址也已经发生了变化，因此React会判定tableData依赖更新，触发useEffect执行。
• 你看到状态值始终没有更新，是因为doSomething的返回值是固定写死的，每次调用返回的数组内容完全相同，虽然引用变了，但实际内容没有任何变化。

解决办法 #

根据你的需求可以选择以下方案：

1. 将依赖替换为基础类型值：如果你的数组内容可以用某个基础类型字段作为变更标识（比如示例里的id），可以把useEffect的依赖改成这个基础类型字段，只有当字段实际变更时才会触发副作用：

useEffect(()=> {
  if (Object.keys(tableData[0]).length > 0) {
    console.log("something changed")
  }
// 依赖改成item的id，基础类型会直接对比值
}, [tableData[0]?.id])  

2. 状态更新前做内容对比：如果内容相同的情况下不需要更新状态，可以在调用setTableData前先做深对比，内容一致就不执行更新，避免多余的重渲染和副作用触发：

// 简单的深对比示例，复杂结构可以用自定义的深对比函数
const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b)

// 点击事件里先对比再更新
<button type="button" onClick={(e)=> {
  const newData = doSomething()
  if(!isEqual(newData, tableData)) {
    setTableData(newData)
  }
}}>display</button>

3. 使用深对比的useEffect：如果需要监听整个数组的内容变化，可以使用自定义的深对比useEffect，会自动递归对比依赖的内容，只有内容实际变更时才触发副作用。

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