S
SolidJS•14mo ago
snickerzoo

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
bigmistqke•14mo ago
a possible usecase is a reference to an object that is a child of a <Show/>
snickerzoo
snickerzooOP•14mo ago
I see that means I can reference it in an effect that reruns, when the button node changes. Is that correct?
bigmistqke
bigmistqke•14mo 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
snickerzoo
snickerzooOP•14mo ago
That makes sense, thanks

Did you find this page helpful?