React中为何仅使用回调更新状态才能正确生效？

这是典型的React闭包陷阱问题，结合你的代码场景具体解释：

核心原因 #

你的chat_message事件回调是在useEffect中创建的，而useEffect的依赖只有isFocused。这意味着：

• 当组件首次渲染（或isFocused状态变化）时，会创建Socket连接并绑定事件回调，此时回调会捕获当前时刻的messages状态值（也就是初始空数组，或者recent_messages返回的历史消息数组）。
• 后续收到新消息时，直接用setMessages([...messages, data])更新状态，这里的messages始终是回调绑定时刻的旧值——因为useEffect没有重新执行，回调也不会更新，所以每次都是基于旧的数组添加新消息，看起来就像旧消息被清空，只剩最新的一条。

而使用函数式更新setMessages(messages => [...messages, data])时，React会自动传入当前最新的状态值，不管回调是何时绑定的，都能拿到最新的消息数组，因此能正确追加新消息。

为什么之前其他场景能正常工作？ #

你之前不用函数式更新也没问题，大概率是那些场景中：状态更新后组件会立即重新渲染，相关的回调（比如按钮点击事件）会重新创建，自然能捕获到最新的状态值。但这次的Socket回调是在useEffect中创建的，只有isFocused变化时才会重新绑定，所以一直持有旧的messages闭包。

解决方案和注意事项 #

• 当状态更新依赖于前一次状态，且更新逻辑处于闭包环境（比如Socket监听、定时器）时，必须使用函数式更新，确保拿到最新状态。
• 不要把messages加入useEffect的依赖数组，否则每次消息更新都会触发useEffect重新执行，导致Socket连接频繁断开重连，引发新的问题。

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