QwikDev
[🐞] [v2] useTask$ blocks before UI reacts to a change in tracked signal
Which component is affected?
Qwik Runtime
Describe the bug
When tracking a signal inside useTask$, e.g.:
export default component$(() => {
const text = useSignal('');
useTask$(async ({track}) => {
track(() => text.value);
...
});
...
}
I would expect that when the signal is assigned a new value, the UI refreshes before useTask$ blocks. That is, when we do:
text.value = "new value";
I'd expect UI elements that use text.value to be updated before track() makes useTask$ run and blocks rendering.
Otherwise, it is almost as if the assignment itself is blocked until useTask$ returns, while the expectation is that the assignment takes place first, and only then, because a new value was already assigned, does track() wake up and runs useTask$.
Reproduction
https://qwik.dev/playground/#f=7VZNi8IwEL37K0JZaBaCFJZFdpfsX%2FDiXQQrFkQF66nkv%2FveTPPhx82TYC4N6TSTTt689wrQzGY%2Fj0DjsvrKVHjtaSSNdSF2UZeUwdY1zpVeo08p5HcBjEjSreRiB1HjkDMY1ecxKTNN0bPnVhOYUSqExex30zRxXZNqLFLnD%2BU9gY7H1f0Z8Uix8ugOIasedgYatl3hFFDh0y87JQV1YlEOe7EqH36wS2faXXl6jm5j251mn4487r03XwrbNEqnUy1u8jrqdk%2FzlX%2FF9AdTVy7u7UxVww6saXioQowFHS94O5uuhfJBvqFz%2BEqtQhWLpaPY2OMvinLpCHEaQoakFErvf8gbhKsqHf%2FnEQJDeS9FlBpTzologmMyUfSoQKHrKLxS2cIXWAthlcXsargETmL059%2BbzV6PzS4
Steps to reproduce
In the playground I set up, type 3 characters into the text box. When 3 characters are typed, we assign them to text.value. At this point, we'd expect <p>Text = {text.value}</p> to be updated, and useTask$ to run (because it is tracking text.value). But instead, useTask$ is called and blocks (for 5 seconds in my example), and only then the UI reacts to the change in text.value.
System Info
System:
OS: Linux 5.10 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
CPU: (4) x64 Intel(R) Core(TM) i5-10400H CPU @ 2.60GHz
Memory: 13.92 GB / 15.63 GB
Container: Yes
Shell: 6.21.00 - /bin/tcsh
Binaries:
Node: 21.2.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 10.6.2 - /usr/local/bin/pnpm
npmPackages:
@builder.io/qwik: ^1.12.1 => 1.12.1
@builder.io/qwik-city: ^1.12.1 => 1.12.1
typescript: 5.4.5 => 5.4.5
undici: ^7.4.0 => 7.4.0
vite: 5.3.5 => 5.3.5
Additional Information
No response
@yanivhamo nice find!
Sadly this happens in v2 as well: https://qwikdev-build-v2.qwik-8nx.pages.dev/playground/#f=7VZNi8IwEL37K0JZaBaCFJZF2CX7F%2FbiXQQrFkQF66nkv%2FveTPNR9eZJMJeWdJpJJm%2FeewVoFouHVsRl9ZVX4bWnkTTWhdhFXVIGW9fYV%2FqMPqWQ3wUwIkm3kosdRI1DzmBUn8ekzDRHz15aTWBGqRAWs99N08R5TaqxSJ1%2FlO8EOh6T%2B5tYLHaHkFUPOwMN262xC6jw%2BYedkoI6sSjHg1iVDz%2FYlTPtvtw9R7e17V6zz0ce996bL4VtGqXTqZY3eR11u6f5ykcx%2FdHUlYtrO1PVsAMbGh6qEGNBx0vezrZroXyQb%2Bgc%2FlKrUMVi6SgW9jhFUS4dIb6GkCEphdL7H%2FICYVKl099%2FhMBQ3ksRlUyrIJrgmM0UPSpQ6DoKr1S28AXWQlhlMrsaToGTGP35%2B2az12OzKw
But in v2 we should be better equipped to handle it. I'm going to assign this as a v2 bug. Probably we can tweak the scheduler a bit to make this work.
