Svelte 5: Runes $effect does not allow async function about svelte HOT 7 CLOSED

This is intentional, tracking of dependencies does not work as maybe expected with async code.
(Anything after the first await will not be tracked.)

Duplicate of:

• #10498

from svelte.

This seems also be the case when I use then semantic?

    let error : any = $state(null);

  $effect(() => {
        fetch(location.href, {
            method: 'POST',
            headers: {
                'content-type': 'application/json'
            },
            body: JSON.stringify({action: 'validatemail', email})
        }).then(res => res.json()).then(data => {
            error = data;
        });
    });

    $effect(() => {
        console.log(error);
    })

the console.log(error) isnt triggered

from svelte.

True, but there isn't anything Svelte can do about this.
Anything outside the range of types is a documentation issue.

from svelte.

Assignment should still trigger reactivity.
Only dependencies are not tracked in async code.

Can you create a standalone reproduction in the REPL?

from svelte.

NVM - its working - my mistake

so to have something async and make it reactive i have to inline the async function and do some magic with my dependencies manually?

    $effect(() => {
        dep1 && dep 2 && dep3;
        (async () => {
            //do magic here
        })();
    });

would it make sense to overload the functions to manually add additional dependencies to the $effect function?

$effect(myFn, [dep1, dep2, dep3]);

from svelte.

Evaluating the dependencies beforehand would be a good approach, though you should not use && since that will potentially skip latter dependencies. You can use dep1, dep2, dep3; instead.

Regarding the argument for listing dependencies, there is an existing issue:

• #9248

from svelte.

Okay thanks for your feedback - im closing this issue on this point.

from svelte.