Svelte: Best practice to combine $derived and $state

This content originally appeared on DEV Community and was authored by Max Core

First approximation:

let { data } = $props();
let posts = $derived.by(() => {
    let posts = $state(data.posts);
    return posts;
});

It is not documented, and me personally obtained it here:
https://discord.com/channels/457912077277855764/1406193849423888415/1406241130726690837
From mjadobson, approved by Patrick.

Others advice, for semantic and linters let better be const:

let posts = $derived.by(() => {
    const posts = $state(data.posts);
    return posts;
});

My personal discovery to make it one line:

let posts = $derived.by(() => { const _ = $state(data.posts); return _ });

And now, while copy-paste, there are 2 places left to change, not 4.

For sure, it COULD NOT be:

let posts = $derived.by(() => $state(data.posts));

Since:

$state(...) can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.

Probably it'll be nice to have $reactive rune one day, combining both or something

I've one have more elegant solution — please share
Thx

This content originally appeared on DEV Community and was authored by Max Core

Print Share Comment Cite Upload Translate Updates

APA

Max Core | Sciencx (2025-10-04T12:33:06+00:00) Svelte: Best practice to combine $derived and $state. Retrieved from https://www.scien.cx/2025/10/04/svelte-best-practice-to-combine-derived-and-state/

MLA

" » Svelte: Best practice to combine $derived and $state." Max Core | Sciencx - Saturday October 4, 2025, https://www.scien.cx/2025/10/04/svelte-best-practice-to-combine-derived-and-state/

HARVARD

Max Core | Sciencx Saturday October 4, 2025 » Svelte: Best practice to combine $derived and $state., viewed ,<https://www.scien.cx/2025/10/04/svelte-best-practice-to-combine-derived-and-state/>

VANCOUVER

Max Core | Sciencx - » Svelte: Best practice to combine $derived and $state. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/10/04/svelte-best-practice-to-combine-derived-and-state/

CHICAGO

" » Svelte: Best practice to combine $derived and $state." Max Core | Sciencx - Accessed . https://www.scien.cx/2025/10/04/svelte-best-practice-to-combine-derived-and-state/

IEEE

" » Svelte: Best practice to combine $derived and $state." Max Core | Sciencx [Online]. Available: https://www.scien.cx/2025/10/04/svelte-best-practice-to-combine-derived-and-state/. [Accessed: ]

rf:citation

» Svelte: Best practice to combine $derived and $state | Max Core | Sciencx | https://www.scien.cx/2025/10/04/svelte-best-practice-to-combine-derived-and-state/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.