Stale read from <Show> under a transition

[deluksic]

Describe the bug

I'm encountering Stale read from <Show> while a transition is happening. I'm not sure exactly what the problem is, but I created a simple reproduction. I'm not reading the signal in a callback or in async code, which is why it is confusing to me.

Your Example Website or App

https://playground.solidjs.com/anonymous/bdbea778-bc1d-4508-963f-6683c38de3d5

Steps to Reproduce the Bug or Issue

1. Click the counter and move the mouse at the same time

Expected behavior

I expect to see the tooltip instead (some text and coordinates). You can see it by holding the mouse still after click.

Workaround

Write the code without using the callback form of <Show>

[ryansolid]

Yeah.. I see it.. interestingly only when the browser console is open but that suggests there is a timing issue here. Or more likely the internals of Show that do the check aren't concurrent safe. Thanks for reporting.

[deluksic]

Can similar issues happen even if we don't use the callback form? I use this form a lot:

<Show when={condition()}>
  <Component prop={condition()!.something} />
</Show>

In this case, I assumed that <Component> would be unmounted before it had a chance to read from condition() and failing the .something. Reading the implementation of <Show>, I don't see much difference between callback vs non-cb forms, except for the arrow fn wrap and throw. I will try to create a test when I find time.

[ryansolid]

You won't get the error because we don't do the checks. The reason we do is because someone could try to access the Signal inside like a timeout where it was no longer defined with a value which would mean TS lied. https://github.com/solidjs/solid/blob/main/packages/solid/src/render/flow.ts#L130C36-L130C45

Hmm.. interestingly it doesn't look like it is what expected. Reproducing this one will probably require me to run it in replay.

[mdynnl]

more controllable repro https://playground.solidjs.com/anonymous/e5a35370-6712-46cb-af2b-78d7eca848c0

edit:

1. uncomment line 82
2. click true under transition
3. click inc: under foreground
4. the same bug as this issue happens

the repro meant to show the interaction between the main reactivity system and the transition one in a controllable manner

[deluksic]

more controllable repro https://playground.solidjs.com/anonymous/e5a35370-6712-46cb-af2b-78d7eca848c0

Can you please add steps for reproduction? I'm not sure what I am looking at. 😅 (edits added, thanks!)

[emansom]

This seems to happen when events trigger DOM changes too fast, and the internal state in Solid does not match the real DOM anymore.

Workaround that worked for me, was limiting the amount of changes that could possibly happen at a single moment by disabling buttons that triggered a lot of DOM changes for a few seconds.

e.g. next page button gets greyed out (opacity: 0.5), click events on the button ignored and no mouse pointer on the button for a second.

[jpdutoit]

I kept running into this issue while using TanStack Start + TanStack DB. Attempted a fix in #2617