在JSX外部使用useState钩子，是否必须每次用useEffect包裹？

核心结论 #

不是必须，但你当前直接在渲染流程里调用setState的写法违反React的渲染规则，虽然现在看起来正常，但存在潜在隐患，不推荐这么写。

为什么你的写法暂时没出错？ #

你当前的代码里，初始state是undefined，第一次渲染时触发setState，组件重新渲染后state已经有值，if条件不再满足，所以不会无限循环。但这只是侥幸——React的组件函数被设计为纯函数，在渲染过程中不能修改状态，否则在React的并发渲染模式（比如Suspense、异步渲染）下，组件函数可能被多次调用，你的setState会被重复触发，导致意外的重渲染甚至逻辑bug。

正确的替代方案 #

根据你的场景，优先选择更简洁安全的方式：

1. 直接初始化state
   如果初始值是固定的，直接在useState里设置即可，这是最优解：

   const [state, setState] = useState([1, 2, 3, 4, 5]);
   

   如果初始值需要复杂计算（比如从本地存储读取），可以传一个初始化函数给useState，它只会在组件首次渲染时执行一次：

   const [state, setState] = useState(() => {
     // 这里写复杂初始化逻辑，比如读取localStorage
     return [1, 2, 3, 4, 5];
   });
   

2. 仅在动态依赖时使用useEffect
   只有当初始化值依赖其他动态数据（比如props、其他state）时，才需要用useEffect包裹setState，同时要注意设置正确的依赖项避免无限循环：

   useEffect(() => {
     if (someProp === undefined) {
       setState([1, 2, 3, 4, 5]);
     }
   }, [someProp]); // 依赖项是触发初始化的条件
   

3. 事件处理或副作用中修改状态
   如果是用户交互（比如点击按钮）或者其他副作用场景（比如定时器、网络请求），修改状态可以放在事件处理函数或者useEffect里，这是完全符合规则的。

对比你的两种写法 #

• 第一种（直接在if里调用setState）：违反React渲染规则，属于不安全写法，未来可能出问题。
• 第二种（useEffect包裹）：符合规则，但在你的示例场景里没必要，因为可以直接用useState初始化。

总结 #

在组件顶层（JSX外部）修改状态时，绝对不能在渲染流程中（比如if判断、循环里）直接调用setState，必须放在副作用（useEffect）、事件处理函数、或者useReducer的dispatch操作中。优先使用useState直接初始化，只有当依赖动态数据时才考虑useEffect。

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