简单React组件触发无限循环报错Too many re-renders原因咨询

该报错的本质是代码逻辑在组件渲染周期内同步触发了状态更新，状态更新又会触发组件重新渲染，新一轮渲染再次触发状态更新，形成永不终止的循环，React为了避免页面卡死会主动中断并抛出该错误。

结合你做的计数器业务场景，90%以上都是以下几种错误写法导致的：

• 事件回调没有包成函数，渲染时直接执行了状态更新逻辑
  比如给减少按钮绑定点击事件时写成了 onClick={setCount(count - 1)}，而不是正确的 onClick={() => setCount(count - 1)}。前者会在组件每次渲染时直接执行setCount触发重渲染，而非点击时才触发执行。
• 直接在组件顶层渲染逻辑中写了状态更新代码
  为了避免计数器出现负数，你可能直接在组件主逻辑中写了 if (count < 0) setCount(0) 这类代码，这段代码每次组件渲染都会执行，一旦count满足判断条件就会触发setCount，进而触发新一轮渲染，再次执行该判断逻辑形成死循环。正确的做法是把边界判断放到点击事件回调中处理，不要直接写在组件顶层。
• useEffect依赖配置错误
  如果你用useEffect来处理计数器边界判断，同时把count加入了useEffect的依赖数组，且useEffect内部又修改了count的值，就会导致useEffect每次count变化都触发执行，修改count后又再次触发useEffect形成循环。

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