为何在HOC中使用useState会触发无效Hook调用错误？

错误原因与技术细节 #

你遇到的Invalid hook call错误，核心原因是WithCounter是一个创建HOC的普通高阶函数，并非React函数组件，直接在它内部调用useState时，这个调用时机不在React的组件渲染周期内。

React的Hook依赖组件渲染流程维护状态上下文：当React渲染函数组件时，会在组件执行的顶层追踪Hook调用顺序，将Hook状态与当前组件实例绑定。而WithCounter这类HOC创建函数，是在组件外部执行的（比如你写const Enhanced = WithCounter(MyComponent)时），这个阶段React并未处理组件渲染，无法将useState的状态绑定到任何组件实例，因此抛出错误。

把useState移到Render函数内部后，Render是标准的React函数组件，当它被React渲染时，useState的调用处于组件顶层，符合React的Hook追踪逻辑，所以能正常运行。

违反的Hook规则 #

你的写法直接违反了React Hook的两条核心规则：

• 只能在React函数组件的顶层调用Hook：不能在普通JavaScript函数（包括HOC创建函数、嵌套函数、循环/条件判断内）调用Hook，必须放在函数组件最外层。
• 只能在React的渲染流程中调用Hook：Hook调用必须发生在React正在渲染组件的阶段，不能在组件渲染之外的时机（比如HOC创建时、事件回调、定时器内）调用。

修正后的代码示例 #

import { useState } from 'react'

const WithCounter = (EnhancedCounter) => {
    // 此处为普通函数，不可调用Hook
    const Render = () => {
        // Render是函数组件，顶层调用Hook符合规则
        const [count, setCount] = useState({
            number: 0,
            name: 'charitha'
        });

        const handleClick = () => {
            setCount((prev) => ({
                number: prev.number + 1,
                name: 'sanjana'
            }))
            console.log(count.number, count.name)
        }

        return (
            <EnhancedCounter handleClick={handleClick} count={count.number} name={count.name} />
        )
    }

    return Render
}

export default WithCounter

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