为何在useEffect中修改state未引发React组件无限重渲染？

先看你的代码：

import React, { useState, useEffect } from "react";
export default function Example() {
  const [count, setCount] = useState(0);
  const [tmp, setTmp] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
    setTmp(count);
    console.log(tmp);
  });
  return (
    <div>
      <p>
        You clicked {count} times and temp is {tmp}
      </p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

核心原因是React对状态更新做了浅比较优化：只有当新状态和当前状态的浅值不同时，才会触发组件重渲染。

具体流程拆解：

• 初始渲染：count=0，tmp=0。useEffect执行setTmp(0)，但此时tmp已经是0，React判定状态无变化，跳过重渲染，不会进入循环。
• 点击按钮：setCount(count+1)让count变成1，组件触发重渲染。此时tmp还是0，useEffect执行setTmp(1)，tmp从0变1，状态变化，触发第二次重渲染。
• 第二次重渲染后：count=1，tmp=1。useEffect再次执行setTmp(1)，新值和当前tmp的1完全一致，React跳过状态更新，不会再触发重渲染，循环终止。

简单说，每次useEffect里的setTmp(count)只有在count和tmp不一样时才会真的触发重渲染，两者相等时React会忽略这次更新，所以不会无限循环。

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