React Hooks能否在嵌套函数中调用？useState在普通函数运行未报错疑问

一、React Hooks 是否允许在嵌套函数内部调用？ #

根据React官方的Hooks规则，Hooks只能在React函数组件的顶层作用域调用，或者在自定义Hook的顶层作用域调用，绝对不能在嵌套函数、条件判断、循环语句、异步回调这类非顶层逻辑里调用。

核心原因是React依赖Hooks的调用顺序来维护每个Hook对应的状态，一旦调用顺序不稳定（比如条件导致某次渲染跳过某个Hook），就会引发状态与Hook的匹配错乱，进而产生各种难以排查的Bug。

二、为什么示例中的useState在regfunc里没报错？ #

你给出的代码里，regfunc虽然是嵌套函数，但它的执行时机非常特殊：

• 每次App组件渲染时，regfunc会被重新定义，然后立即在组件的顶层作用域同步执行。
• 这相当于把useState的调用直接写在App组件的顶层，调用顺序完全固定：每次渲染都会执行一次regfunc，里面的useState也只会被调用一次，没有任何条件分支或异步逻辑干扰调用顺序。

React的Hook校验机制（ESLint的eslint-plugin-react-hooks）主要检测可能导致调用顺序不稳定的场景，比如在条件、循环、异步里调用Hook。而你的代码中，regfunc的调用是同步且固定的，暂时没有触发校验的危险条件，所以没抛出错误。

注意：这是不安全的写法！ #

虽然当前代码没报错，但这种写法严重违反Hooks的设计规范，属于高危实践：

• 一旦后续修改代码，比如把regfunc()的调用放到if条件里，或者改成异步执行，立刻就会触发Hook调用顺序紊乱，导致报错或状态异常。
• 这种写法也会降低代码的可读性和可维护性，其他开发者很难快速识别Hook的调用位置和顺序。

正确的做法是直接把useState写在组件的顶层，或者封装成自定义Hook（自定义Hook本身就是顶层调用Hooks的函数）。

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