Svelte 5: component not updated correctly

[dispatchqueue]

Describe the bug

When you open the REPL below and click the Next button to proceed to Question B, the number displayed is 1, which is correct. I expect the number to increase each time the Next button is clicked. However, when you click the Next button, the number does not increase.

To make it work correctly, I need to make one of the following changes:

1. Swap the if and else statements from this:

{#if currentQuestion.type === 'B'}
    <QuestionB bind:question={currentQuestion} />
{:else if currentQuestion.type === 'A'}
    <QuestionA bind:question={currentQuestion} />
{/if}

To this:

{#if currentQuestion.type === 'A'}
    <QuestionA bind:question={currentQuestion} />
{:else if currentQuestion.type === 'B'}
    <QuestionB bind:question={currentQuestion} />
{/if}

2. Or in QuestionB.svelte, instead of rendering the title using $derived like this:

<script>
  const { question = $bindable() } = $props()
  const title = $derived(`Question B - ${question.option}`)
</script>

<h1>{title}</h1>

<div>Number: {question.number}</div>

Removing $derived and rendering the title directly in the HTML will make it work:

<script>
  const { question = $bindable() } = $props()
</script>

<h1>{`Question B - ${question.option}`}</h1>

<div>Number: {question.number}</div>

Another behavior is that if you remove the question A from the array, the number will be updated correctly:

function newTest() {
    return {
        questions: [
-           newQuestionA(),
            newQuestionB(1, 'Option 1'),
            newQuestionB(2, 'Option 1'),
            newQuestionB(3, 'Option 1'),
            newQuestionB(4, 'Option 1'),
            newQuestionB(5, 'Option 1'),
            newQuestionB(6, 'Option 1')
        ]
    }
  }

Here is the same REPL using Svelte 4, which works well: REPL

Reproduction

REPL

Logs

No response

System Info

N/A

Severity

annoyance

[MotionlessTrain]

Making currentQuestion a $derived rather than updating via an $effect seems to work too
And if a new derived is made in QuestionB for number, instead of using question.number in the template directly, it also seems to work

[gterras]

I don't known if this should work but it seems a bit far stretched, from the docs:

In general, $effect is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently. In particular, avoid using it to synchronise state. Instead [use $derived].

In addition the bindings don't seem to do anything?

[dispatchqueue]

I don't known if this should work but it seems a bit far stretched, from the docs:

In general, $effect is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently. In particular, avoid using it to synchronise state. Instead [use $derived].

In addition the bindings don't seem to do anything?

I removed $effect as suggested in the docs, but it still doesn't work: REPL