SolidJS•17mo ago

I keep seeing this pattern in some solid code where dom refs are kept in signals.

function Button(props){
  const [button, setButton] = createSignal();

  return <button ref={setButton}>{props.children}</button>
}

function Button(props){
  const [button, setButton] = createSignal();

  return <button ref={setButton}>{props.children}</button>
}

Is there any advantage to doing it like this?

4 Replies

bigmistqke•17mo ago

a possible usecase is a reference to an object that is a child of a <Show/>

chimpanzini bananiniOP•17mo ago

I see that means I can reference it in an effect that reruns, when the button node changes. Is that correct?

bigmistqke•17mo ago

exactly some people prefer to use it in general, because of this and some other tiny edge cases p.ex

let ref;
<Parent refToChild={ref}>
  <Child ref={ref}/>
</Parent>

let ref;
<Parent refToChild={ref}>
  <Child ref={ref}/>
</Parent>

refToChild would be undefined because it is not defined, and because it's not a reactive value it will not properly update an extra signal, but in turn a bit less mental overhead

chimpanzini bananiniOP•17mo ago

That makes sense, thanks

Gaming

Programming

I keep seeing this pattern in some solid code where dom refs are kept in signals.

Did you find this page helpful?