在React的useEffect中直接修改状态对象是否安全？

1. 直接修改state对象属性会引发哪些不良后果？ #

这种写法看似能正常运行，但绝对不能用于生产环境，会带来诸多潜在问题：

• 违反React状态更新机制：React通过状态的引用变化来识别状态更新、触发重渲染。直接修改state对象的属性，没有改变x的引用，React的状态管理系统无法主动感知到这次变更，完全依赖其他状态更新“顺带”触发重渲染才能显示变化。
• 重渲染行为不可控：示例中DOM能更新，只是因为点击按钮触发了y的状态更新，带动组件重渲染，React此时才读取到x的最新属性值。如果没有y的更新，x.test的修改永远不会在页面上显示。
• 调试难度飙升：React DevTools无法追踪这种直接修改的状态变更，你没法通过工具回溯状态变化的过程，排查问题时会陷入被动。
• 并发模式下的风险：在React并发模式中，这种直接修改可变对象的操作可能导致状态不一致。React可能中断或重启渲染流程，此时修改的状态可能处于中间状态，引发难以复现的bug。

2. 为什么useEffect里修改能生效，直接在onClick里修改不行？ #

核心差异在于组件重渲染的触发逻辑：

• useEffect场景：点击按钮调用setY(y+1)后，y的状态更新会触发组件重渲染。由于useEffect依赖y，重渲染后useEffect会执行，直接修改x的属性。而这次由y触发的重渲染会读取x的最新值并更新DOM——本质上，DOM更新是y的变化带来的，x的修改只是刚好在重渲染前完成，被React“顺带”读取到了。
• onClick直接修改场景：点击按钮直接修改x.test，但这个操作没有调用任何状态setter函数，React没有收到“需要重渲染”的信号，因此不会更新组件和DOM。哪怕你修改了x对象的属性，页面也不会有任何变化，因为组件根本没重新渲染。

正确的状态更新方式 #

对于对象类型的state，必须通过setter函数并创建新对象来更新，比如：

setX(prev => ({ ...prev, test: prev.test + 1 }))

这样既遵循了React的状态更新规则，又能稳定触发重渲染，避免上述所有问题。

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