SolidJS•17mo ago

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•17mo 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•17mo 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•17mo ago

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

BersaelorOP•17mo ago

yeah thats fine, it's not supposed to

Tommypop•17mo 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•17mo 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•17mo 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•17mo ago

nice alright

Tommypop•17mo 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•17mo ago

I really like the new docs

Tommypop•17mo ago

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

BersaelorOP•17mo 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