Why doesn't this assignment cause an infinite loop in $effect()?

[frederikhors]

I have this Svelte 5 component:

<script lang="ts">
    type Props = {
        player: Player;
        messages: string[];
    };

    let { player = $bindable(), messages = $bindable() }: Props = $props();

    $effect(() => {
        const selected: string[] = [];

        if (player.skills?.some((s) => s.one)) selected.push('One');
        if (player.skills?.some((s) => s.two)) selected.push('Two');
        if (player.skills?.some((s) => s.three)) selected.push('Three');

        messages.push(`Please verify: ${selected.join(', ')}`);
    });
</script>

{#each player.skills || [] as skill, i (skill.id)}
    <Skill bind:skill={player.skills[i]} />
{/each}

but when I check a skill.one/two and so on (boolean values) in one of the <Skill> the app crashes because of an infinite loop triggered by the $effect.

If I use the below code instead it works.

$effect(() => {
    // The same as before
    
    messages = selected.length ? [`Please verify: ${selected.join(', ')}`] : [];
});

Why doesn't assignment cause an infinite loop?

[brunnerh]

messages.push is a read operation on messages and push also reads the length while at the same time modifying the length. The combination of reading and writing causes the loop.

The assignment on the other hand does not perform any reads, thus not creating a dependency on messages.

(You can use $inspect.trace() inside an effect to check the dependencies. This will show messages.length in your looping code.)

[frederikhors]

So the problem is that messages is an $effect dependency because of the length prop, right?

[brunnerh]

Yes, it is read and changed, leading to the effect being triggered again.