Svelte 5: Can not reassign $derived variable

[Lucstay11]

Describe the bug

Can not reassign $derived variable

Reproduction

let tacheinput= $state(")
let title = $derived("Todo App:" +tacheinput)

title = "my new title" // not work

Logs

No response

System Info

not usefull

Severity

blocking all usage of svelte

[brunnerh]

That is intended behavior.
What real use case do you have for this?

(There are approaches that use $state + $effect, though that is generally discouraged as it can lead to issues.)

[MotionlessTrain]

Being able to assign to $derived variables could lead to ambiguous cases:

Would the original object be updated here, when you would be able to assign to prop?

const { obj } = $props()

let prop = $derived(obj.prop)

(Would seem logical behaviour to me, that it would)

But would a be updated here?

let a = $state(2)

let b = $derived(a * 2)

In this case, I would assume not.

The current case is the most non-ambiguous solution, to prevent this entirely

[Conduitry]

As mentioned, this is intended. If you want something that automatically updates based on changes to another value, but which also lets you update the value, you can use a pattern like that in #11982.

[Lucstay11]

wtf is that...

In svelte 4 you can reasign reactive variable:

let a = 1
$: b ="the value of a is: "+a
b = "a has no more value!" // this work !

In svelte 5 you can not do this:

let a = $state(1)
b = $derived("the value of a is: "+a)
b = "a has no more value!" // this not work -> error $derived() can not reasign value

I understand using runes to simplify code readability but you destroy responsiveness. You cannot declare a $derived as a const because you prevent yourself from changing the value of a variable which no longer makes sense.

I love svelte for its simplicity but react becomes more logical because it knows how to differentiate reactive from non-reactive variables itself.

[brunnerh]

Again, what is your actual use case?

This example in particular can probably be expressed in one derived statement along these lines:

let a = $state(1)
const b = $derived(
  a == null
    ? 'a has no value'
    : `the value of a is ${a}`
);

And as stated, you can use $state and $effect instead of a $derived; you just need to be aware of potential issues like infinite loops from reading and writing the same state.

[Lucstay11]

There is no concrete case, it is just a logical situation. Sometimes we will want to completely change the value of a $derived() . Which was possible in svelte4 and not anymore. I don't understand this change... Just why did you define $derived as an immutable variable? You still don't answer my question...

[brunnerh]

Having something that is both computed and writable at the same time is a recipe for bugs.
You change something, the dependencies are slightly affected and the computation triggers again, unexpectedly overwriting a manually set value.
It's just not a good idea.

If the value is only computed, it does functionally not matter how many times and when the computation happens, as long as it happens at least after any dependency change. The worst outcome is that you may have wasted some CPU cycles.

[Lucstay11]

Okay, I don't know the engineering behind Svelte so if you say that this was removed to maintain better performance I can imagine it. However, this put me off a little because we can do it with other frameworks like React, view...

[Xoffio]

I just encounter a similar issue. @brunnerh Here is a case:

I have a dashboard with a list of machines. I want to see a machine's information and if it is reachable.
I want to get this information in a modal. So when I click a machine row, the modal would open, show the information, and it will show if the machine is reachable (ping).
Since the status of the machine can change any time, I want to create a button that the user can click to ping the machine without having to close the modal or reloading the entire page.

Maybe I am doing it wrong, but this is what I am doing:

• I have a $store that changes when I select a machine. It opens a modal if it is true.
• I have a $derive that gets executed when the modal opens. This calls the ping function.
• There should be a button that executes the ping function when the user wants to get the latest status. I want to execute a function that updates the derived variable, but I can't change it because it is a derive variable...

[brunnerh]

It is a bit hard to visualize what exactly you are trying to do without concrete code, I also do not quite understand why you need a $derived in the first place. There probably is some event-based user interaction with the modal that could be used to trigger state changes without relying on $derived or $effect.

I.e. the status is stored in $state, you have a modal open event/callback and a button click event/callback, both of which update the status state.

Also, there would be this pattern for having a $derived that updates on $state change but has a modifiable value:

let value = $state(/* ... */);
let localValue = $derived.by(() => {
  let state = $state({ current: value });
  return state;
});

Here localValue.current can be changed and is reactive but the object will be replaced if value changes.

[ahardin]

I just did my first 4 -> 5 migration last night, so I'm totally fresh to this. I presume I'm misusing the new runes, but my concrete example is as follows.

An abbreviated pre/most migration diff:

 <script lang="ts">
-       export let data;
-       export let form;

+       let { data, form } = $props();

-       $: counties = form?.data?.counties as County[];
+       let counties = $derived(form?.data?.counties as County[]);
 </script>

data.counties on form is populated via a use:enhance form.

Then, later on something the user does needs to clear out the counties array, so I have something like:

<input
type="text"
name="zip"
oninput={() => (counties = [])}
/>

Which is not allowed (understandably so, in retrospect).

I fixed it by simply changing counties to a regular $state and then use an $effect to update it when form changes. But I don't know if that is the Svelte Way.

BTW - whatever the correct approach is, I like how the runes clean up the unwieldy $:. Very nice.

[lenabalakumar]

I have a usecase wherein I have to reassign my derived value. Could you please have a look and help me suggest a way forward

<script lang="ts">
    import { MediaQuery } from 'svelte/reactivity';

    const large = new MediaQuery("min-width: 500px")

    let currentYear = $state(new Date().getFullYear())

    const numberOfDaysInCurrentYear: number = $derived.by(() => {
        return ((currentYear % 4 === 0 && currentYear % 100 > 0) || currentYear %400 == 0) ? 366 : 365; 
    })
	
	let columnCount = $derived(numberOfDaysInCurrentYear / 52);
    let rowCount = $derived(numberOfDaysInCurrentYear / 10);

    $effect(() => {
        if(!large.current) {
            rowCount = 20
            columnCount = 20
        } else {
            rowCount = 7
            columnCount = 52
        }
    })

</script>

My rowcount and columncount depend on number_of_days_in_a_year. Also if the screen size changes, the rowcount and columncount needs to be updated accordingly.

[paoloricciuti]

I have a usecase wherein I have to reassign my derived value. Could you please have a look and help me suggest a way forward

<script lang="ts">
    import { MediaQuery } from 'svelte/reactivity';

    const large = new MediaQuery("min-width: 500px")

    let currentYear = $state(new Date().getFullYear())

    const numberOfDaysInCurrentYear: number = $derived.by(() => {
        return ((currentYear % 4 === 0 && currentYear % 100 > 0) || currentYear %400 == 0) ? 366 : 365; 
    })
	
	let columnCount = $derived(numberOfDaysInCurrentYear / 52);
    let rowCount = $derived(numberOfDaysInCurrentYear / 10);

    $effect(() => {
        if(!large.current) {
            rowCount = 20
            columnCount = 20
        } else {
            rowCount = 7
            columnCount = 52
        }
    })

</script>

My rowcount and columncount depend on number_of_days_in_a_year. Also if the screen size changes, the rowcount and columncount needs to be updated accordingly.

This is still derived state: instead of reassigning state in an effect (which you should never do) include the if in the derived so that that both column count and row count depends on large.current no?

[lenabalakumar]

I have a usecase wherein I have to reassign my derived value. Could you please have a look and help me suggest a way forward

<script lang="ts">
    import { MediaQuery } from 'svelte/reactivity';

    const large = new MediaQuery("min-width: 500px")

    let currentYear = $state(new Date().getFullYear())

    const numberOfDaysInCurrentYear: number = $derived.by(() => {
        return ((currentYear % 4 === 0 && currentYear % 100 > 0) || currentYear %400 == 0) ? 366 : 365; 
    })
	
	let columnCount = $derived(numberOfDaysInCurrentYear / 52);
    let rowCount = $derived(numberOfDaysInCurrentYear / 10);

    $effect(() => {
        if(!large.current) {
            rowCount = 20
            columnCount = 20
        } else {
            rowCount = 7
            columnCount = 52
        }
    })

</script>

My rowcount and columncount depend on number_of_days_in_a_year. Also if the screen size changes, the rowcount and columncount needs to be updated accordingly.

This is still derived state: instead of reassigning state in an effect (which you should never do) include the if in the derived so that that both column count and row count depends on large.current no?

Thanks for helping out.