为何useSyncExternalStore示例在store更新时调用getSnapshot达6次？

为什么getSnapshot会被调用6次？ #

React使用useSyncExternalStore时，getSnapshot的调用次数由其渲染机制决定，主要原因包括：

• 初始校验与渲染：组件挂载时，React会调用getSnapshot获取初始状态，同时额外调用一次做一致性校验，防止快照突变。
• 状态更新触发的多轮校验：点击"Add Todo"触发外部store状态变更后，React会在渲染前后多次调用getSnapshot，确认状态稳定，避免因外部store突变导致渲染不一致。
• 严格模式的重复调用：如果代码运行在React严格模式下，开发环境中React会刻意重复调用getSnapshot、渲染函数等，用于检测潜在副作用。你的复现代码开启了严格模式，这直接让调用次数翻倍。

优化建议 #

• 忽略开发环境的严格模式调用：严格模式的重复调用仅存在于开发环境，生产环境会自动移除，所以开发时的6次调用无需过度担忧。
• 保证getSnapshot为纯函数：只要getSnapshot没有副作用（调试日志可在正式代码中移除），多次调用不会影响业务逻辑——React设计上允许这种情况，纯函数重复调用无不良影响。
• 校验订阅逻辑：确认外部store的订阅机制仅在状态真正变更时触发更新，避免不必要的重渲染触发getSnapshot调用。比如确保发布订阅只在状态值改变时通知订阅者，而非频繁触发。

补充说明 #

React官方文档中的useSyncExternalStore示例，在严格模式的开发环境下同样会出现getSnapshot多次调用的情况，这是React的预期行为，用于提前发现潜在问题，生产环境会恢复正常调用次数。

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