调用setState/useState后React重渲染是否会在当前函数执行完成前触发？

结论 #

四个选项中第1种是正确逻辑：调用setState后，React一定会先执行完当前函数的所有同步代码，清空当前调用栈后，才会启动重渲染流程。

示例代码执行顺序拆解 #

你举的代码不会出现看不到处理中状态的核心原因是fetch是异步API，请求的响应回调不会和create函数的同步代码同时执行，完整执行流如下：

1. 点击按钮触发create函数执行，进入同步执行上下文
2. 执行setProcessing(true)：React将该状态更新加入调度队列，不会立刻触发重渲染
3. 执行fetch调用：向服务端发起网络请求后立即返回，不会等待请求响应，then回调会被暂存到异步任务队列，等待后续执行
4. create函数的所有同步代码执行完毕，当前调用栈清空
5. React开始处理调度队列中的更新，触发组件重渲染，此时processing值为true，页面展示Currently processing
6. 待网络请求成功响应后，then回调被推入执行栈执行，调用setProcessing(false)，重复上述调度逻辑：回调内同步代码执行完毕后，React再次触发重渲染，页面切回提交按钮。

常见误区澄清 #

• setState的"异步"是指状态更新、重渲染的时机滞后于setState调用本身，并非setState内部是异步逻辑，React永远不会打断正在执行的同步用户代码去处理重渲染
• 即使是React 18的并发渲染模式，也不会改变这个执行顺序：并发渲染的任务只会在当前调用栈完全清空后才会启动，不会和用户的同步代码并行执行
• 你提到的另外3个选项均不成立：不会立刻重渲染再回来执行剩余代码、不会在函数执行中间随机插入重渲染、也不会在函数还没执行完时就启动并发渲染。

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