Why does ESLint falsely warn about hooks being executed more than once in a for loop?

This is a known false positive with the react-hooks ESLint rule. In your code the hook is in the correct place (at the top level of the component), but the rule mistakenly thinks that having a plain for loop might conditionally run code that affects hook order.

The rule is designed to catch cases where a hook is placed inside a loop or conditional (which can lead to different hook order between renders). However, since your for loop doesn’t call any hooks, the warning is spurious. Using an array method like .forEach avoids triggering the false positive because the rule doesn’t misinterpret that pattern.

Options to Resolve

• Ignore the Warning:
  If you’re confident the hooks are used correctly, you can suppress this specific ESLint warning.

• Refactor the Loop:
  Use an array iterator (like .forEach) if it fits your logic. This not only avoids the warning but can make your intent clearer.

Example of Suppressing the Warning

If you want to disable the rule for this particular line or file, you can add an ESLint comment:

TYPESCRIPTCopied
"use client"

import { useState } from "react"

export default function Test() {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [info, setInfo] = useState<number>(0)

    // eslint-disable-next-line react-hooks/rules-of-hooks
    for (let c1 = 0; c1 < 5; c1++) {
        console.log(c1)
    }

    return <div>hello</div>
}

Alternatively, you might disable the rule for the whole file if it’s a known quirk:

TYPESCRIPTCopied
/* eslint react-hooks/rules-of-hooks: "off" */

Use this approach with caution—only when you’re sure there’s no risk of the hook order actually changing.

Conclusion

The error is a false positive and not an indication that your hook is being misused. It results from the ESLint rule misinterpreting a basic for loop. Either refactoring your loop or curbing the ESLint warning locally should work.