Only update a `$derived` if a condition is met

[Tyler-Petrov]

Describe the problem

I have a form in my app (as one does), and I'm using Convex. The form initial data is updated automatically when the db data changes, but only when the form isn't tainted. I implemented this functionality with $effect, but I was so close to being able to just use $derived (let ... = $derived(...) is one of my favorite niche features of Svelte). The only reason I couldn't use $derived was there's no way to tell Svelte to only derive the value if a condition is met.

Describe the proposed solution

I'm not sure what the API or the implementation would look like, so I'll leave that to smarter folks than me.

Importance

nice to have

[Ocean-OS]

I'm not entirely sure what you mean without an example, but you could try something like this:

let last;
let value = $derived(condition ? (last = new_value) : last);

[Tyler-Petrov]

That's great! I wouldn't have thought of setting a non-reactive variable to accomplish that. That seems like it's worth a mention in the docs under the optimistic updates section of $derived. What do you think?

[elliott-with-the-longest-name-on-github]

I'm not sure if we want to document it as a recommended pattern as it's technically "against the rules" -- derived values are not supposed to produce side effects, and setting last is a side effect. So long as usage of last is well-constrained and doesn't tie into the state system, it's probably safe, but it's one of those "use at your own risk" tricks for very specific use cases.

[Tyler-Petrov]

Yeah, I agree it's not a first class solution by any means, but it's an extremely useful paradigm for sure. Since last isn't in the state system (and can't be or else $derived errors), it seems like an okay example. I would love to see a first class implementation personally, but that's not a hill I'm going to die on.