$derived rune stops working but not if using $inspect()

[memestageceo]

Describe the bug

I'm creating a toggle button that toggles different menu into view.

The button stops toggling.

But when I use insect or log the derived rune, it works.

Reproduction

Go to the /posts route please. In the bottom left corner is the button which gets the error.

StackBlitz .

And here's the recording too:

Jam Dev

Logs

[Jam Dev](https://jam.dev/c/265036e8-85d5-4da5-9e62-69df83811597)

System Info

no output here

Severity

blocking an upgrade

[Serator]

I could be wrong, but it could be due to potential runtime reactivity issues.

[memestageceo]

I could be wrong, but it could be due to potential runtime reactivity issues.

I'm a hobby coder. Can you point me in the right direction if there's an article or post about this... And how to fix?

[Serator]

@aadtyaraj01 I am not a member of the core team. I would wait for an official response from one of the maintainers before giving advice.

[FoHoOV]

I guess this REPL is a simpler version of what is provided.

1. click on toggle menu
2. click on toggle first
3. click on toggle menu twice
4. click on toggle second
5. clicking on toggle menu doesnt matter now

Doing one of the following changes makes 1-5 work (doesn't matter which one):

1. uncomment console.log("isFirstOrSecondOpen effect", isFirstOrSecondOpen) in the effect rune
2. change isMenuOpen && !isFirstOrSecondOpen to !isFirstOrSecondOpen && isMenuOpen

[CaptainCodeman]

I've had something similar, but haven't been able to create a cut-down reproduction yet.

In my case a page refresh results in reactivity sometimes works and sometimes doesn't, same code, same data. Adding an inspect on a dependency of the derived that isn't updating makes it work consistently, so it looks like it's losing track of the dependency or change notification somewhere along the line.

It's also with things using $derived.by if that provides any clues.

Unless this is just a bug, remember when you do things like const result = isFirstOpen || isSecondOpen; the 2nd value may not be seen as a dependency if the first is true (sorry, haven't looked at it in enough detail yet, just thinking out loud).

[CaptainCodeman]

Here's what happens for me - there is a chain of $derived / $derived.by based on a few $state properties (underlying data, date, duration). If I render the final result ... it sometimes doesn't change when the inputs do (a page refresh might make it start working). If I add an $inspect on one of the intermediate $derived.by values, then it updates consistently (but breaks for a production build when it's stripped out).

$derived.by value not changing

after adding $inspect on an intermediate $derived.by

[memestageceo]

Does this mean it's fixed now? Hobby coder 😅

Also, I used a function to return the value instead of the derived rune. And it works fine.

function isTopicsOrTocOpen () { return isOpenTopics || isOpenToc }

[dummdidumm]

Yes it should be fixed, update to the latest version to see it in effect

[CaptainCodeman]

It's not published on npm yet