Window hangs when ref is assigned to a promise that was just created

[florian-g2]

Vue version

3.5.12

Link to minimal reproduction

https://play.vuejs.org/#eNqNVU1T2zAQ/StbHxp7SBPoxyUNoUDDlE5LmZAOh7rDGGdtBLbskWRDJs1/70qyTWKStMlF0r7dfftWKy+c4zzvlQU6A2coQ8FyBRJVkUMS8PjQd5T0nZHPWZpnQsECBEZdmGAES4hElkKHfDs+93mYcakgSFiJ53zGwkBlAg413t33Pvo8KnioWMYtxPVg4XNo4XtlkBS4t0dw0DSmLMWsUK5BdeHth33P50udrQpCQPu32X9eXE+OL28m47Obs/Pxt8+U/2qe3maJQap5jnBJpJnE8ZNCPsPZcDoiUHWoN68tr1/tUL+PBrrs4RT+QEGeEeM4G1FUQ6cpruCPIsgpkJvbmIMNGb1NoWxeABZB7fuSRKWa/Qnqk+CwFWxUBDAE9cJqZBnqDprmtFgYoTR4a1Rya0IY+VfQPXWH3C3hcPSMsT0lr9LrUZPDO/dms70hUVOo6lvNti52KDBQ+H1eKVzfqcaT42OtvusKT6cVbuc6E8nsVcfTaUw8q4tUgWJhBSc6/3auPZVgcYziNJB4UN34KEgkaswa4qSI23afD/t27GjIaKMwzRMqinYAx/qSQzMdA1gs2gO2pAoAhreib/z1slCKtPkUJix80AO8zk6JAs1Ea52m1gbaCAfGvW/9DaBhA+UbFrViNUG+YJJkR5qb7ZS7pqRXU+yvlPafnK1eGxmTqUV3F2GN3kr3xS3aSHlt43TpXaTWRizu3cuM0+Npbp7vhFmaswTFj1zfUHo7qWk2r+8ElPjxqznTNXXr8/AOw4cN5/fySZ/5zqVAiaIkFRqbCkSMyprHVxf4ROvGmGazIiH0DuMEZZYUmqOFndD0Ee0VnGF7bp59xuOpNO+XrIsyTSHk0uB9h74CpztKf6b7rvfe+NHsOcu/J74vbw==

Steps to reproduce

1. See the alive indicator steadily incrementing.
2. Click on "Trigger Case 1". See that the code works as intended.
3. Click on "Trigger Bug". See that the browser window hangs.

What is expected?

Works just as case 1.

What is actually happening?

Window hangs.

System Info

MS Edge 130.0.2849.68

Any additional comments?

Thank you for developing such a good open-source framework! 😊

[florian-g2]

I think the critical difference between case 1 and the bug case is when the reactivity is triggered.

Case 1:

• Promise is created and event loop is empty.
• Microtask for promise is called and resolves.
• unwrap() is called.
  • unwrapRef is created
  • promise.then is called and resolves instantly
  • unwrapRef is set to "World!"
  • unwrapRef is returned
• Vue displays the ref

Bug Case:

• Promise is created and JS runtime is busy
• unwrap() is called.
  • unwrapRef is created
  • promise.then is called and does NOT resolve instantly
  • unwrapRef is returned
• event loop is empty
• Microtask for promise is called and resolves.
• unwrapRef is set to "World!" (triggers reactivity)
• ??? something loops and the window hangs

[jh-leong]

This behavior is expected.

In the "Bug Case," each render creates a new promise, which updates the ref on the next tick, causing a new render and resulting in a dead loop.