infinite loop w/ async statements in afterUpdate

[Tormak9970]

Describe the bug

When using promise based functions (in my case, fetching data from Firebase) in the afterUpdate hook, an infinite update loop is triggered.

Reproduction

afterUpdate:

Bug: repl

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz  
    Memory: 23.21 GB / 31.92 GB
Binaries:
    Node: 14.17.3 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.71)
    Internet Explorer: 11.0.19041.1566
npmPackages:
    svelte: ^3.49.0 => 3.49.0

Severity

annoyance

[Prinzhorn]

I'm not sure I see the bug here and I don't think the behavior is related to Promises. In both cases your code both depends on imArr and also modifies it:

imgArr = [res.url]
console.log(imgArr)

After all you are modifying imgArr, which causes an update, which causes afterUpdate, which will again modify imgArr. Removing console.log(imgArr) also removes the endless async loop (I think? nvm it doesn't).

Moving it to it's own function removes console.log(imgArr) from Svelte's dependency tracking, so console.log(imgArr) won't cause another update to be scheduled.

Edit: I think my explanation is butchered but my point stands. What confused me is that your workaround doesn't actually prevent the loop for the afterUpdate case.

[Tormak9970]

Checked again, and your right, afterUpdate does not change with the second repl (I think that happened bc I ran into the issue, and in trying to solve it, switched to the reactive statement). Also, I updated both to log a plain string, and there is still an issue with the afterUpdate, but not the reactive statement.

So I guess the issue is not with the fact that it is async, but rather that it is modifying a value that in turn triggers an update