react 19 useOptimistic 竞争更新乐观值时阻塞

react 19 刚刚出,我在官网上调试这个 useOptimistic api 时,发现了一个竞争调用时的阻塞状态。当连续多次调用 updateFn 参数,且每次更新时间较长时,乐观状态的更新被阻塞了。

前往官网 useOptimistic 一节,修改末尾 demo 中 actions.js 代码如下:

js 复制代码
let i = 0;
const time = [10_000,6_000,10_000];
export async function deliverMessage(message) {
  await new Promise((res) => setTimeout(res, time[i++] ?? 1000));
  return message;
}

此时前三次的更新时间变为 10s、6s、10s,当我连续依次输入 1、2、3 后,触发三次乐观更新,视图在某个时间点出现如下的结果:

实际上,第二次和第一次更新已经完成,第三次更新还在进行中。可是乐观更新的结果没办法进行 diff 区分,乐观值被更慢的更新严重阻塞。

新 api 还是慎用

相关推荐
年年测试6 分钟前
Playwright web爬虫与AI智能体
前端·人工智能·爬虫
yi碗汤园19 分钟前
【一文了解】C#的StringComparison枚举
开发语言·前端·c#
光影少年29 分钟前
Promise.all实现其中有一个接口失败其他结果正常返回,如何实现?
前端·promise·掘金·金石计划
DokiDoki之父42 分钟前
web核心—Tomcat的下载/配置/mavenweb项目创建/通过mavenweb插件运行web项目
java·前端·tomcat
我的div丢了肿么办1 小时前
echarts4升级为echarts5的常见问题
前端·javascript·echarts
ZoeLandia1 小时前
Vue 项目 JSON 在线编辑、校验如何选?
前端·vue.js·json
派大星_分星1 小时前
nuxt fetch $fetch useFetch 等使用方式区别
前端
快手技术1 小时前
兼顾效率和性能!快手低代码平台在大型活动中的技术实践!
前端
WebInfra2 小时前
📱开源 AI 工具驱动 iOS 自动化 、接入全新 Qwen 模型 - Midscene v0.29 发布
前端·ios·测试
豆豆豆大王2 小时前
HTML 与 JavaScript 结合 “点击按钮弹出提示” 的交互功能
javascript·html·交互