Topics

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

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

Levi B.•7mo ago

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

bigmistqke 🌈•7mo 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.•7mo ago

That makes sense, thanks

Solid is a declarative reactive Javascript library for creating user interfaces.

11KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

Need help in solid-router## my development dependencies:<:ryan:978481377781645352> ```json { "@solidjs/router": "^0.10.5",`Request is not defined` when loading a page with the solid start (basic) dev serverI created a solid-start template with `bun create solid`, settings (basic, no SSR, yes TypeScript), SSG with `bun create solid`?When creating with `bun create solid`, do I have to say yes to SSR if I want SSG? I've picked the t Is there a way to grab a throwed error in "action" functionHello i have a question. I'm going more in depth into solid. But is there actually a way to grab the NPM Start Error + Beginner QuestionI'm new to SolidStart, and I've only been doing web dev with NPM for a few months. Typically, in a How Do I Turn On SSR?When I started my project, I enabled SSR. I thought that was all I had to do. But in Ryan's "The Sh ReferenceError: __filename is not defined in ES module scopeI've created an app using solid-start and sucessfuly hosting it on my windows PC with no issue. But Struggling to get FileRoutes workingTrying to get the FileRouter working in a fresh `pnpm create solid` https://github.com/metruzanca/so Move table columns around with drag & dropI've created a data table component where you can move around the order of the columns using the dra How to import solidjs core as external libraryI would like to delivery my code to browsers as 2 parts. The first part is solidjs core and the seco