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

ops/2025/2/12 1:58:56/

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

前往官网 useOptimistic 一节,修改末尾 demo 中 actions.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 还是慎用


http://www.ppmy.cn/ops/157666.html

相关文章

新数据结构(1)冒泡排序和堆排序

冒泡排序 前后两两对比进行交换,每轮至少一个数组变得有序(未排序的最大数值找到正确位置) 代码: package Test20250206;public class BubbleSort {public static void main(String[] args) {// TODO Auto-generated method stu…

F - Building Roads S

Description Farmer John had just acquired several new farms! He wants to connect the farms with roads so that he can travel from any farm to any other farm via a sequence of roads; roads already connect some of the farms. Each of the N (1 ≤ N ≤ 1,000) …

FastReport 加载Load(Stream) 模板内包含换行符不能展示

如下代码 当以FastReport 载入streams时 当模板内包含换行符时会导致不能正常生成pdf System.Xml.XmlDocument newFrxXml new System.Xml.XmlDocument(); newFrxXml.Load(fileName);FastReport.Report report new FastReport.Report();using (var memStream new MemoryStre…

String bean配置-基础笔记

前言:在哔哩哔哩上找的黑马课程做的笔记,课程地址是Spring-06-bean基础配置_哔哩哔哩_bilibili bean基础配置 bean别名配置: bean的作用范围: spring给我们创建的对象默认的是单例的,在bean里面配置scope,可创建多个…

Lisp语言的字符串处理

Lisp语言的字符串处理 Lisp(LISt Processing)是一种历史悠久的编程语言,因其独特的表现形式和强大的符号处理能力而受到广泛关注。在Lisp中,字符串处理是一个重要的领域,涉及到许多操作和技巧。本篇文章将深入探讨Lis…

DeepSeek元学习(Meta-Learning)基础与实践

元学习(Meta-Learning),也称为“学会学习”(Learning to Learn),是一种让模型快速适应新任务的技术。与传统机器学习不同,元学习的目标是通过少量数据或少量训练步骤,使模型能够在新任务上快速学习并表现良好。DeepSeek提供了强大的工具和API,帮助我们高效地构建和训练…

Linux Windows macOS如何安装Ollama

安装Ollama 安装Ollama的步骤相对简单,以下是基本的安装指南: 访问官方网站:打开浏览器,访问Ollama的官方网站。 下载安装包:根据你的操作系统,选择相应的安装包进行下载。 运行安装程序:下载完…

使用Python和`moviepy`库从输入的图片、动图和音频生成幻灯片式视频的示例代码

下面是一个使用Python和moviepy库从输入的图片、动图和音频生成幻灯片式视频的示例代码。在这个示例中,我们将依次展示每张图片或动图,同时播放音频。 from moviepy.editor import ImageClip, VideoFileClip, AudioFileClip, concatenate_videoclipsdef…