SolidJS•12mo 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•12mo ago

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

Levi B.OP•12mo ago

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

bigmistqke•12mo 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

Levi B.OP•12mo ago

That makes sense, thanks

Gaming

Programming

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