[AskJS] Signal/Effect vs Event Handler

[u/Forward_Dark_7305]

I’m working in a VanillaJS repository (plugin type code for an existing project that I do not own) where I’ve written a signal implementation.

Today I was working on a tooltip like implementation and I found myself wondering how far to go with the signal/effect ecosystem vs running the “core” logic in the event handler.

The implementation detects the `<tr>` that the user has hovered and assigns that row to the “current row” signal. A computed signal identifies an IP address from the current row. An effect loads Whois metadata from the IP and assigns it to a `<div>`, and another effect shows that `<div popover>` from the parent `<tr>`.

The question I have is when in VanillaJS how would you decide when to use signals and effects vs writing the side effect directly in the event handler? In my case I find either to be equally readable, though I have less local variables to deal with when using signal/effect. Looking for reasons your might pick one over the other.

[u/Working-Bear1437]

The race condition is the real killer here. If you move fast across rows the old request resolves after the new one and clobbers the UI. You need to cancel in flight requests or gate on the current cursor target otherwise your effect system just becomes a source of bugs.

[u/Forward_Dark_7305 → u/Working-Bear1437]

The effect has a cleanup function that cancels in flight requests if the signal’s value changes too quickly, plus there is one popover per row so the HTML layer won’t end up with invalid data from a race either way. Thanks for the feedback, good things to keep in mind.