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

embedded/2025/2/12 18:30:44/

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/embedded/161659.html

相关文章

PyCharm 批量替换

选择替换的内容 1. 打开全局替换窗口 有两种方式可以打开全局替换窗口: 快捷键方式: 在 Windows 或 Linux 系统下,按下 Ctrl Shift R。在 Mac 系统下,按下 Command Shift R。菜单操作方式:点击菜单栏中的 Edit&…

hi3516cv610用海思arm-v01c02-linux-musleabi-strip工具,对库进行瘦身

hi3516cv610用海思arm-v01c02-linux-musleabi-strip工具,对库进行瘦身 执行 arm-v01c02-linux-musleabi-strip libcrypto.so.1.1 应用该工具,对程序裁剪很实用

PC端自动化测试实战教程-5-pywinauto 操作PC端应用程序窗口 - 下篇(详细教程)

1.简介 上一篇宏哥主要讲解和介绍了如何获取PC端应用程序窗口信息和如何连接窗口对其进行操作的常用的几种方法。今天宏哥接着讲解和分享一下窗口的基本操作:最大化、最小化、恢复正常、关闭窗口、获取窗口状态和获取窗口坐标。以及窗口的其他打开方法和选择方法。…

服务器有多少线程?发起一个请求调用第三方服务,是新增加一个请求吗?如果服务器线程使用完了怎么办?

目录 1. 服务器有多少线程? (1)服务器类型 (2)配置参数 (3)硬件资源 2. 发起一个请求调用第三方服务,是新增加一个线程吗? (1)同步调用 (2)异步调用 (3)HTTP 客户端 3. 如果服务器线程使用完了怎么办? (1)请求被拒绝 (2)性能下降 (3)解决方案…

HTML5--网页前端编程(下)

HTML5–网页前端编程(下) 9.常用标签下 (1)表格标签 用来展示数据,显示数据,规整条理,可读性好 基本语法 <table><tr> <td>单元格内的文字</td> <td>单元格内的文字</td>… </tr> <tr> <td>单元格内的文字&l…

关于JVM

本文分为两部分&#xff0c;一部分对JVM进行大致总结&#xff0c;第二部分为对周志明的JVM进行梳理 一&#xff1a;大致总结 首先利用上面这张图来大致说一下JVM&#xff1a;首先把一个.java文件编译为一个.class文件&#xff08;我们可以认为.java是用java写的&#xff0c;.c…

数据结构--八大排序算法

1. 直接插入排序 当插入第 i(i>1) 个元素时&#xff0c;前面的 array[0],array[1],…,array[i-1] 已经排好序&#xff0c;此用 array[i] 的排序码与 array[i-1],array[i-2],… 的排序码顺序进行比较&#xff0c;找到插入位置即将 array[i] 插入&#xff0c;原来位置上的元素…

HTTP/3与QUIC的关系是什么?

HTTP/3 和 QUIC 之间的关系非常密切。以下是两者的定义及其相互关系的详细说明: 一、QUIC 协议 QUIC(Quick UDP Internet Connections)是一种基于 UDP 的传输层协议,由 Google 开发。QUIC 的主要目标是通过减少延迟、提高连接的可靠性和安全性来改善互联网协议的性能。QUI…