useEffect未触发重渲染咨询：为何仅打印count=10？

你的代码出现这种情况，核心是React的渲染流程和useEffect的执行时机导致的：

1. 组件初始渲染时，count值为0，此时同步执行if(count<10)分支，调用setCount(count+1)触发组件重新渲染。
2. 注意：useEffect是在组件渲染完成（DOM更新后）才会执行的钩子。而当前渲染周期里，你在渲染阶段就直接触发了重新渲染，导致本次渲染的useEffect根本没机会执行。
3. 这个过程会重复：每次渲染时count从0到9，都会立刻调用setCount触发下一次渲染，直到count变成10，此时if条件不满足，不再触发重新渲染。这次渲染完成后，useEffect才终于执行，打印出count=10。

如果想打印每一次count的变化，需要把递增逻辑放到useEffect中，让每次count更新后先执行日志打印，再决定是否继续递增：

const [count, setCount] = useState(0);

useEffect(() => {
  console.log("count inside hook is ", count);
  // 用函数式更新避免闭包问题
  if (count < 10) {
    setCount(prevCount => prevCount + 1);
  }
}, [count]);

这样每次count变化后，useEffect会先打印当前值，再触发下一次更新，控制台就能依次输出0到10的日志。

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