S
SolidJS•2y ago
CIA

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

Did you find this page helpful?