Solid: Re-rendering Child Components on State Change

[jcuenod]

I suspect this is just a problem with my understanding of how solid is working but suppose I have Image.tsx like:

const Image = ({src}) => <img src={src} />

And then I import it into App.tsx which (excerpted) looks like this:

const [state, setState] = createState({url: "someurl"})
return (
    <>
        <Image src={state.url} />
        <div>{state.url}</div>
    </>
)

If I update url, the div updates but the Image doesn't. I guess this is because I don't understand what causes rerenders on child components but I'm not sure how this effect is supposed to be achieved.

[mosheduminer]

I know the answer so I'm going to comment here, I hope the @ryansolid doesn't mind. This is explained here, and the issue is that you destructured the props. In solid, if you want reactivity, you'll need to write

const Image = (props) => <img src={props.src} />

To compare them:

const Unreactive = ({src}) => <div>{src}</div>
const Reactive = (props) => <div>{props.src}</div>

[ryansolid]

Thanks @mosheduminer, you are correct. Solid like Vue or MobX tracks reactivity on property access. Basically a function needs to be called when retrieving a value if it is reactive in order to track it. The biggest difference between Solid and the latter is that Vue and MobX+React wrap the whole component in a computed. Any change anywhere tells the reactive system to re-run this whole component. That is pretty wasteful and in the case of no VDOM very expensive. Instead with Solid each binding is its own island of reactivity and only that re-runs. But that means you cannot expect prop updates to track unless read inside the JSX or one of the reactive primitives. It's also in the FAQ: https://github.com/ryansolid/solid/blob/master/documentation/faq.md#4-why-does-destructuring-not-work-i-realized-i-can-fix-it-by-wrapping-my-whole-component-in-a-function

[jcuenod]

You know, I'd come across the claim that destructuring doesn't work with Solid and I just mentally dismissed it saying "obviously this person doesn't understand ES6", lol... Well, at least now the internet will preserve the fact that I'm the idiot :)

Thanks @mosheduminer and @ryansolid!

[ryansolid]

I mean destructuring does work so in itself from the ES6 standpoint you aren't incorrect, but you need to be in a tracking context so not sure if it is particularly helpful in many cases.

const formattedMoney = createMemo(() => {
  // this works fine
  const { value, currency } = props; // ie 500, USD
  return `${value} ${currencty}`
})

And Vue does hit the same issue a decent amount too. . https://composition-api.vuejs.org/api.html#setup

They came up with special helpers but that overhead seemed unnecessary when function rest parameters probably the main case isn't solveable: https://composition-api.vuejs.org/api.html#torefs