solid-eslint warning about event handlers

So, I get the eslintsolid/reactivity warning when I use reactive props in event handlers:

This function should be passed to a tracked scope (like createEffect) or an event handler because it contains reactivity, or else changes will be ignored.

  createEffect(() => {
    const wS = waveSurfer();

    if (wS) {
      wS.on('play', () => {
        if (props.currentArticle)
          trackStartPlayback(props.currentArticle);
      }

  createEffect(() => {
    const wS = waveSurfer();

    if (wS) {
      wS.on('play', () => {
        if (props.currentArticle)
          trackStartPlayback(props.currentArticle);
      }

How else would you all handle this?

12 Replies

Tommypop•2y ago

If you're ok with props.currentArticle not tracking, then that approach is fine The linter reports a lot of false positives just in case it wasn't intentional

BersaelorOP•2y ago

yeah, I mean, the player reports when something happens, I just need to make sure the event is then fired with the current item. You mean by props.currentArticle not tracking that it would not be the current article but the article from the time the event-handler was created?

Tommypop•2y ago

The effect won't re-execute when props.currentArticle changes The state should always be up to date when the handler runs

BersaelorOP•2y ago

yeah thats fine, it's not supposed to

Tommypop•2y ago

Yeah, I think the linter just reports these cases in case it's unintentional, so could cause people hours of seemingly unsolvable issues

BersaelorOP•2y ago

i think, I even should make that explicit, that the createEffect should only fire when waveSurfer() changes. Is there a way of giving it my intended dependency list?

Tommypop•2y ago

Yeah, there's the on function So you can just do createEffect(on(waveSurfer, (wS) => {})) Where wS in the closure will just be the data within the waveSurfer signal

BersaelorOP•2y ago

nice alright

Tommypop•2y ago

Here's the docs link if you want: https://docs.solidjs.com/references/api-reference/reactive-utilities/on You can also defer the effect if you don't want it to immediately execute

BersaelorOP•2y ago

I really like the new docs

Tommypop•2y ago

Awesome lol :) They're being updated again relatively soon afaik

BersaelorOP•2y ago

ah sorry, I forgot to import on and for some reason my IDE wasn't complaining about that but instead gave me more reactivity warnings

Gaming

Programming

solid-eslint warning about event handlers