ESLint报错：React Hook可能多次执行——Next.js组件循环异常

运行ESLint或构建Next.js应用时，出现如下错误提示：
error React Hook "useState" may be executed more than once. Possibly because it is called in a loop. React Hooks must be called in the exact same order in every component render

复现代码 #

"use client"

import { useState } from "react"

export default function Test() {
    const [info, setInfo] = useState<number>(0)

    for (let c1 = 0; c1 < 5; c1++) {
        console.log(c1) // 有无此行都会触发错误
    }

    return <div>hello</div>
}

相关现象 #

• 移除for循环后，编译正常通过
• 将for循环替换为forEach写法后，编译也能正常通过：

[0,1,2,4,5].forEach(c1=>{
    console.log(c1)
})

错误原因 #

ESLint的react-hooks/rules-of-hooks规则在静态代码分析时，会把组件顶层的for循环判定为可能破坏Hooks执行顺序的风险代码。哪怕当前循环在Hooks之后且内部没有Hooks，ESLint的静态检测逻辑也会预判：如果后续在循环内添加Hooks，就会违反「Hooks必须在每次渲染中按相同顺序调用」的规则，因此抛出错误。

而forEach属于函数调用，ESLint规则会判定它不会直接干扰组件顶层的Hooks调用顺序，因此不会触发报错。

修复方案 #

有三种可行方式解决这个问题：

1. 将for循环放入useEffect中
   把循环逻辑放到副作用钩子内，彻底隔离循环与Hooks的静态检测上下文：

"use client"

import { useState, useEffect } from "react"

export default function Test() {
    const [info, setInfo] = useState<number>(0)

    useEffect(() => {
        for (let c1 = 0; c1 < 5; c1++) {
            console.log(c1)
        }
    }, [])

    return <div>hello</div>
}

2. 用立即执行函数（IIFE）包裹for循环
   通过IIFE隔离循环代码，避免ESLint误判：

"use client"

import { useState } from "react"

export default function Test() {
    const [info, setInfo] = useState<number>(0)

    (() => {
        for (let c1 = 0; c1 < 5; c1++) {
            console.log(c1)
        }
    })()

    return <div>hello</div>
}

3. 直接使用forEach替代for循环
   如果业务逻辑允许，保留forEach写法是最简便的解决方案。

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