SolidJS•3mo ago

Are component props reactive?

Hi, I've used solid for some time now, and just need some clarification on how props are handled in regards to the reactivity graph. My question can be boiled down to: If a give a prop the value of some Accessor (propName={accessor()}) - will the sub component always update based on where and how that prop is used in the sub component? Similarly, if I give a prop, which changes state, but isn't given as a signal accessed through the Accessor, will this update the sub component? Also, what is the convention for passing props? As signals, or as actual values, which may or may not come from a signal?

9 Replies

Madaxen86•3mo ago

"If a give a prop the value of some Accessor (propName={accessor()}) - will the sub component always update based on where and how that prop is used in the sub component?" Yes. If you don't destructure the prop in the component, etc.

Alex Lohr•3mo ago

Component props, unless static (or marked with /*@once*/ and thus declared static by babel-plugin-solid/dom-expressions), are represented as getters in the props object. So when their evaluation tracks reactive access, they are reactive.

FexelitcheOP•3mo ago

Not quite sure I follow. Type if props.xxxxx is not a getter unless explicitly given as such? Say I go (also not completely valid generic syntax, but its just for the example)

const Parent: Component<any> = (props) => {
  const [signal, setSignal] = createSignal<T>();
  return (
    <Child propName={signal()} />
  )
}
const Child: Component<{propName: T}> = (props) => {
  //Type of propName is T, not (Accessor<T> | () => T) ?
}

const Parent: Component<any> = (props) => {
  const [signal, setSignal] = createSignal<T>();
  return (
    <Child propName={signal()} />
  )
}
const Child: Component<{propName: T}> = (props) => {
  //Type of propName is T, not (Accessor<T> | () => T) ?
}

Alex Lohr•3mo ago

if you use <Child prop="static">, Child will receive { prop: "static" }. If you use <Child prop={reactive()}>, Child will get { get prop() { return reactive() } }.

FexelitcheOP•3mo ago

That I've yet to see. Also, looks to me like some generative, extra behaviour - in any other case

const SomeParent = () => {
  const [signal...] = ...
  return (
    <Child prop={signal()} />
  )
}
vs
const SomeParent = () => {
  return (
    <Child prop={"value"} />
  )
}

const SomeParent = () => {
  const [signal...] = ...
  return (
    <Child prop={signal()} />
  )
}
vs
const SomeParent = () => {
  return (
    <Child prop={"value"} />
  )
}

Should be functionally identical. Is it something Solid Start does maybe? I've yet to delve into that.

Alex Lohr•3mo ago

That's what the babel transpiler in dom-expressions (in ryans personal github) does. You can see the output tab in the playground.

FexelitcheOP•3mo ago

Alright, so, in solidjs only props not decomposed in the sub-component are reactive. And if you have that babel transpiler, any signal passed by its value to a prop, will get passed as the signal?

Alex Lohr•3mo ago

Exactly. Otherwise, you'll have to take care of making attributes reactive yourself.

FexelitcheOP•3mo ago

Sweet. Thanks

Gaming

Programming

Are component props reactive?