React中调用setState更新数据的预期耗时通常是多少？

setState本身的同步调用耗时极短，通常只有几微秒到几十微秒，它本质只是将更新请求加入队列、标记对应组件需要重渲染，不会立刻执行完整的更新流程。完整更新周期（从调用setState到DOM渲染完成、流程结束）的耗时没有固定值，受组件复杂度、设备性能、React版本等多因素影响，常见场景的耗时范围如下：

• 简单单组件更新场景：如果仅更新单个组件，且组件render逻辑简单、无大量计算或深层未优化的子组件，完整更新周期耗时通常在1ms ~ 16ms以内，不会超过60Hz刷新率下的单帧时长（16.6ms），用户完全无感知。
  举个常见示例：

  // 组件仅渲染count数值，无其他复杂逻辑
  const [count, setCount] = useState(0);
  // 调用setState更新count
  setCount(prev => prev + 1);
  

  这个场景下完整更新流程耗时通常仅为2~5ms。
• 复杂组件更新场景：如果更新涉及的组件树层级深、组件render包含大量计算、且未做memo等性能优化，完整更新周期耗时可能达到几十ms到上百ms，如果耗时超过100ms，用户会感知到明显的操作卡顿。

另外React的批处理机制也会影响总耗时：

• React18之前，在事件回调、生命周期等React内部上下文中调用的多个setState会被合并为一次更新，总耗时为单次更新的耗时，不会叠加；在setTimeout、fetch响应等异步回调中调用的setState不会走批处理，多次调用会触发多次更新，总耗时为多次更新耗时的叠加。
• React18及以上版本默认全场景开启自动批处理，无论在什么上下文调用多个setState，都会合并为一次更新执行，总耗时仅为单次更新的耗时。

注：以上耗时均基于主流中高端设备测试，低端老旧设备上的耗时可能是上述数值的3~5倍。

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