在useEffect内更新其依赖的state是否属于React不良开发实践？

结论先行 #

第一种在useEffect中更新自身依赖state的写法属于非常不推荐的不良实践，第二种拆分写法也不是最优解，有更简洁安全的实现方式。

第一种写法的核心问题 #

你给出的第一段代码存在明确的死循环风险：

• useEffect的依赖数组包含state，意味着每次state变更都会重新触发这个effect执行
• effect内部又调用setState修改state，如果updateState每次返回的值都不相等，就会直接触发无限重渲染，卡死页面
• 哪怕你能保证updateState第二次返回的值和第一次完全相同，React浅比较后不会触发重渲染，这种写法也极度不健壮，后续只要updateState逻辑调整，就会直接暴雷。

第二种写法的冗余问题 #

拆分两个useEffect的思路没问题，但第一个不带依赖数组的useEffect会在每一次组件重渲染后都执行，哪怕你的state已经不会再变化，也会无意义调用updateState和setState，平白增加运行开销，要是updateState本身带副作用，还会引发意料之外的问题。

最优实现方案 #

你明确提到这个state仅会在登录时变更一次，本质上只需要在触发条件满足时执行一次state更新即可，直接给修改state的useEffect加上对应的限定依赖就行：

const [state, setState] = useState(initialState);

// 仅在组件挂载/登录态变化时执行，按需更新state
useEffect(() => {
    const newState = updateState();
    setState(newState);
}, []); // 如果updateState依赖登录态变量，就把登录态变量放到这个数组里，比如[isLogin]

// 仅当state变更时执行对应操作，因为state只会变一次，所以只会触发一次
useEffect(() => {
    // 对更新后的state执行相关操作
}, [state]);

这种写法既没有死循环风险，也不会有多余的无意义执行，完全符合你的业务需求。

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