SolidJS•3mo ago

solid/reactivity in mapArray

I have a component like this: https://playground.solidjs.com/anonymous/99d5bc2a-4411-43f2-af85-47515937c622 eslint-plugin-solid is giving me this warning (twice):

The reactive variable 'props.columns' should be wrapped in a function for reactivity. This includes event handler bindings on native elements, which are not reactive like other JSX props.
eslint(solid/reactivity)

The reactive variable 'props.columns' should be wrapped in a function for reactivity. This includes event handler bindings on native elements, which are not reactive like other JSX props.
eslint(solid/reactivity)

Is this a false positive? Or am I using mapArray incorrectly?

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

13 Replies

zulu•3mo ago

not too sure, I guess it is similar to the other issue you opened technically you wrapped it in a function, but If you wrap the mapArray the warning is gone

  const navigationNodes = createMemo(()=>  // <-----
    mapArray(indexes, (index) => {
      const row = Math.floor(index / props.columns);
      const col = index % props.columns;

      return createNavigationNode(row, col);
    }),
  );

  const navigationNodes = createMemo(()=>  // <-----
    mapArray(indexes, (index) => {
      const row = Math.floor(index / props.columns);
      const col = index % props.columns;

      return createNavigationNode(row, col);
    }),
  );

SilenZOP•3mo ago

I tried that but then I have to do

navigationNodes()()[index]

navigationNodes()()[index]

to use it and that seems wrong

zulu•3mo ago

does this fix it ?

  const navigationNodes = createMemo(()=>
    mapArray(indexes, (index) => { // <----
      const row = Math.floor(index / props.columns);
      const col = index % props.columns;

      return createNavigationNode(row, col);
    })(), // <--- HERE
  );

  const navigationNodes = createMemo(()=>
    mapArray(indexes, (index) => { // <----
      const row = Math.floor(index / props.columns);
      const col = index % props.columns;

      return createNavigationNode(row, col);
    })(), // <--- HERE
  );

SilenZOP•3mo ago

It does, but is that correct? And is it better than just disabling the rule for this case? Again I'm interested if this is something that should be part of the eslint rule.

zulu•3mo ago

if you need it in a memo, this this is correct because you don't want to do double ()() if mapArray already return a memo, maybe you don't need the extract createMemo as to the eslint rule, all I can say is I don't know why it warning you when the access was inside a function, and the warning is you need to wrap it in a function .

SilenZOP•3mo ago

I was looking at <For> implementation to understand how to use mapArray: https://github.com/solidjs/solid/blob/main/packages/solid/src/render/flow.ts#L34 and also testing with console.log() to check that I'm not executing unnecessarily

GitHub

solid/packages/solid/src/render/flow.ts at main · solidjs/solid

A declarative, efficient, and flexible JavaScript library for building user interfaces. - solidjs/solid

zulu•3mo ago

so does it return a memo, is the extra createMemo needed?

SilenZOP•3mo ago

Not sure. I checked again without it and it looks like nothing is executing more that it should. But removing createMemo has no effect on the warning.

zulu•3mo ago

yeah,

as to the eslint rule, all I can say is I don't know why it warning you when the access was inside a function, and the warning is you need to wrap it in a function .

SilenZOP•3mo ago

anyway, thank you for taking the time and consulting this with me @zulu ❤️

mdynnl•3mo ago

mapArray, indexArray powers For, Index respectively and the first param takes a signal that returns a list and the second param takes a setup function akin to a component, hence the warning is very much relevant and both return a function that you can directly pass to createMemo, createEffect, For, Index are simply wrappers that does just that Although it might be tempting to fix the warning to indicate that the callback is a setup function rather than a tracking context, mapArray, indexArray are in advance area so, not really sure tbh but this does show that there is room for improvement here.

SilenZOP•3mo ago

oh you are right: "The map function itself is not tracking." https://docs.solidjs.com/reference/reactive-utilities/map-array So the warning is correct and if props.columns in my example changes mapArray is not going to rerun. Fortunately in my real app props.columns is already tracked by a memo in the first parameter. I'm surprised I haven't hit any issues with not tracking things in For

mapArray - Solid Docs

Documentation for SolidJS, the signals-powered UI framework

SilenZOP•3mo ago

I feel like this: https://playground.solidjs.com/anonymous/f9d53c42-a647-488e-8cb4-f5418065a22f should also trigger the warning then

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Gaming

Programming

solid/reactivity in mapArray

Did you find this page helpful?