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

相关推荐
aini_lovee9 分钟前
C# 实现邮件发送源码(支持附件)
开发语言·javascript·c#
GISer_Jing19 分钟前
ReAct规划原理实战指南
前端·react.js·ai·aigc
SoaringHeart21 分钟前
Flutter组件封装:翻转组件 NFlipCard
前端·flutter
LlNingyu43 分钟前
文艺复兴,什么是XSS,常见形式(一)
前端·安全·web安全·xss
英俊潇洒美少年1 小时前
js 进程与线程的讲解
javascript
dleei2 小时前
彻底淘汰老旧 SVG 插件:unplugin-icons 与 Tailwind CSS v4 自定义图标最佳实践
前端·程序员·前端框架
LlNingyu2 小时前
文艺复兴,什么是XSS,常见形式(二)
前端·安全·xss
汉堡大王95273 小时前
# AI 终于能"干活"了——Function Calling 完全指南
javascript·人工智能·机器学习
明君879973 小时前
说说我为什么放弃使用 GetX,转而使用 flutter_bloc + GetIt
前端·flutter
Jingyou3 小时前
用 Astro 搭建个人博客:从零到上线的完整实践
前端