Race condition

[pkorzeniewski]

Hello,

With this JS:

Alpine.store('data', { x: 1, y: 1 });

setTimeout(() => {
	Alpine.store('data').x = 0;
	Alpine.store('data', { x: 2, y: 2 });
}, 3000);

and this HTML:

<div x-effect="data = $store.data" x-data="{ data: $store.data }">
	<span x-text="data.x"></span> <span x-text="data.y"></span>
</div>

Alpine first correctly renders 1 1, but once the timeout is executed, it renders 0 2 instead of 2 2. If I delay execution of Alpine.store('data', { x: 2, y: 2 }); with setTimeout it works fine, but the delay after which it works is variable - setTimeout(..., 0) doesn't always work.

[ekwoka]

This mainly has to do with how the value changes are tracked and other things to prevent running the same effects many times, or worse, circularly.

Conceptually this one should work, but the issue fromes from the data.x queuing and it runs before the data = $store.data, but since data.x already evanulated in that chain, it isn't requeued.