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 还是慎用

相关推荐
万少5 分钟前
万少用9个AI工具,帮朋友完成了一个"不可能"的项目
前端
小小小小宇7 分钟前
Vue `import` 为什么可以异步加载
前端
WMYeah12 分钟前
【无标题】
前端·rust·抽奖程序·跨平台抽奖程序
Unbelievabletobe13 分钟前
免费外汇api的响应时间在不同时段下的波动分析
大数据·开发语言·前端·python
大哥,带带弟弟22 分钟前
Grafana 前端嵌入与 JWT 鉴权实战
前端·grafana
小小小小宇23 分钟前
前端 V8 引擎垃圾回收机制与内存问题排查
前端
前端老石人34 分钟前
CSS 值定义语法
前端·css
sheeta19981 小时前
Vue 前端基础笔记
前端·vue.js·笔记
小小小小宇1 小时前
GitLab + GitLab Runner + Qiankun 微前端 + Nginx + Node 中间件 前端开发机从零搭建 CI/CD 全流程
前端
前端那点事1 小时前
别再写垃圾组件!Vue3 如何设计「真正可复用」的高质量通用组件
前端·vue.js