React useEffect遇数组重复元素时停止执行的原因咨询

在学习React Hooks时做了个练习，发现数组里出现重复名称时，useEffect的执行就停了。按道理不该跳过重复项继续执行后续内容吗？是不是我的代码有问题？

代码如下：

let users = ['Oliver', 'Thomas', 'George', 'George', 'William']
export default function App() {
  const [index, setIndex] = useState(0);
  console.log('RENDER');
  useEffect(() => {
    setTimeout(() => setIndex(index => index + 1), 1000)
    console.log('Hello ' + users[index]);
    console.log('Side Effect RUNS!');
    if (index === users.length - 1) {
      return
    }
  }, [users[index]])
}

问题出在哪？ #

你的useEffect依赖项写的是users[index]，当数组里连续两个元素都是George时，前后两次渲染的依赖值完全没变化——都是George，所以React直接跳过了这次useEffect的执行。

React的useEffect触发规则是：只有当依赖数组里的值发生实际变化（值类型看内容，引用类型看地址）时，才会重新运行副作用函数。这里第三个元素是George，第四个也是George，当index从2变到3时，users[index]的值还是George，依赖没变化，useEffect就不会跑，里面的setTimeout自然不会触发，index就停在3，没法继续走到最后一个元素William了。

怎么改？ #

把useEffect的依赖项换成index就行：

let users = ['Oliver', 'Thomas', 'George', 'George', 'William']
export default function App() {
  const [index, setIndex] = useState(0);
  console.log('RENDER');
  useEffect(() => {
    // 提前判断，避免index超出数组长度后继续执行
    if (index >= users.length - 1) return;
    setTimeout(() => setIndex(index => index + 1), 1000)
    console.log('Hello ' + users[index]);
    console.log('Side Effect RUNS!');
  }, [index]) // 这里改成依赖index
}

这样每次index变化时，不管对应的users元素重不重复，useEffect都会触发，setTimeout也能正常执行，直到index走到数组末尾。

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