Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[🐞] useTask$ blocks before UI reacts to a change in tracked signal #7416

Open
yanivhamo opened this issue Mar 12, 2025 · 0 comments
Open
Labels
STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working

Comments

@yanivhamo
Copy link
Contributor

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 yanivhamo added STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working labels Mar 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant