Nested updates are not picked up by each blocks

[nmathew98]

Describe the bug

In an array of objects stored in a store, if a field in the object is updated and the array reference changes, each blocks do not rerender

Reproduction

• Create a thread
• View the thread
• Share a thought (Result: list updates correctly)
• Reply to a thought
• Result: 'View whole thread' button does not show if the current thread store is not passed as a prop

see: https://github.com/nmathew98/qwery/blob/dev/packages/example-svelte/src/Thread.svelte#L256

Logs

Logging the derived store using reactive expressions show that the store is updating correctly, just the each block is not being rerendered

Tried implementations with reactive assignments too

System Info

tested on safari, macOS Sonoma

see: https://github.com/nmathew98/qwery/blob/dev/packages/example-svelte/src/Thread.svelte#L256

Severity

blocking all usage of svelte

[dummdidumm]

Please provide a proper minimum reproduction, the link has way too much side stuff going on.

[nmathew98]

alright will get a stackblitz going

[nmathew98]

hey so it looks like its because the updates were done inside of async functions (both reactive assignments and store updates break)?

if I were to make the functions themselves sync but perform the updates within a promise I get the same result but if the functions are sync (just commenting out the call to sleep but leaving depthOne and depthTwo marked as async) then no issues

adapting the stackblitz:

and the result is:

• things break after depthOne:

stackblitz: https://stackblitz.com/edit/svelte-bugs-10829-10828-10827?file=src%2FApp.svelte

[7nik]

The only error I see is that when both depthOne and depthTwo have sleep the $data.children is null during rendering, and you get the very clear error message: Error: {#each} only works with iterable values..
Also, when both sleep periods are equal, depthTwo can fire before depthOne and crash with Uncaught (in promise) TypeError: $data.children is null.

[7nik]

And I struggle to comprehend how I must see three different bugs (this, #10828 and #10829) with the same example.

Could you add reproduction steps, observed (wrong) result and expected result?

[nmathew98]

The only error I see is that when both depthOne and depthTwo have sleep the $data.children is null during rendering, and you get the very clear error message: Error: {#each} only works with iterable values.. Also, when both sleep periods are equal, depthTwo can fire before depthOne and crash with Uncaught (in promise) TypeError: $data.children is null.

i mean is it expected behaviour that store updates and reactive assignments do not work when things are async?
also have updated the stackblitz so that the timeout for the second one is higher than the first, same issue

so in the stackblitz:

• depthOne runs with L15 commented out, result updates so that children is not null and content updates to Depth 1
• depthTwo runs with L34 not commented out, result does not update

And I struggle to comprehend how I must see three different bugs (this, #10828 and #10829) with the same example.

Could you add reproduction steps, observed (wrong) result and expected result?

yea sorry, when it first came up in the test project and when I was creating the stackblitz i thought it was 3 different issues but it could just be because of async

[7nik]

Another error that I didn't mention because I thought it was obvious, especially after looking at the browser's console and seeing there ReferenceError: can't access lexical declaration 'sleep' before initialization, - sleep must be defined before depthOne. I'm even not sure why this code works on the server.

[nmathew98]

if you're calling a function within a function, it doesn't matter the order of declarations. the declarations are loaded first and later when the fn is invoked it looks up the declaration and invokes.

[7nik]

your example isn't equal to the project's code. The correct example is

const x = () => { hello(); }; x(); const hello = () => console.log("hi!!");

The const and let variables even have special terminology for the state before initialization - Temporal Dead Zone.

---

I'm even not sure why this code works on the server.

It's not SvelteKit, so the code isn't running on the server.

So, just raise the definition of sleep.

And for your information, if an error is thrown during the lifecycle (component initiation, rendering, processing the reactivity and so on), the entire Svelte app just stops because the app may have an impossible/out-of-sync state and it's unclear what to do in this case and still no API to resolve such cases.

[nmathew98]

that's my bad oops, sorry for being so haphazard, things are working now but I have no idea why the same is not happening in the application

will close the issues ive opened and dig into the issue more