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 后,触发三次乐观更新,视图在某个时间点出现如下的结果:
![](https://i-blog.csdnimg.cn/direct/83a92d81b2354cc0bd61580eabb4fc9e.png)
实际上,第二次和第一次更新已经完成,第三次更新还在进行中。可是乐观更新的结果没办法进行 diff 区分,乐观值被更慢的更新严重阻塞。
新 api 还是慎用