React代码未修改state值却触发无限循环的原因

问题核心原因 #

你遇到的无限重循环，本质是在组件渲染阶段直接调用setState导致的：

• 组件每次渲染时，函数体中的所有代码都会执行，包括setState((prev)=>7)。
• 第一次渲染时，state初始值为0，调用setState后将其改为7，触发重渲染。
• 第二次渲染时，state已经是7，此时调用setState返回的新值还是7，看似和旧值相同，但因为是在渲染阶段触发的状态更新，React会安排下一次渲染；而新的渲染又会再次执行setState，形成无限循环。

对React状态更新逻辑的误解 #

你以为“state值不变就不会触发重渲染”，这个认知有前提：状态更新的触发时机不能在渲染阶段。

• 当在事件回调、useEffect等非渲染阶段调用setState时，React会浅比较新旧值，若相等则跳过更新和重渲染。
• 但在渲染阶段调用setState时，React无法同步判断新值是否和旧值相等，它会先触发重渲染，等到渲染完成后再检查值是否变化——但此时下一次渲染已经再次执行了setState，循环无法终止。

解决方案 #

将setState移到非渲染阶段执行，比如用useEffect并设置空依赖数组，让它只在组件挂载时执行一次：

import React, { useState, useEffect } from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
    const [state, setState] = useState(0)
    console.log(state)

    useEffect(() => {
        // 仅在组件挂载时执行一次setState
        setState((prev) => 7)
    }, [])

    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.jsx</code> and save to reload!
                </p>
                <span className="App-link">Hello from codedamn :)</span>
            </header>
        </div>
    )
}

export default App

这样修改后，setState只会执行一次，将state改为7后不再触发后续的状态更新，组件也就不会无限重渲染了。

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