Destructuring with splitProps

Hi there, Are there any disadvantages of destructuring the local object compared to the second example?

const [{ cat, dog, elk }, rest] = splitProps(props, ['cat', 'dog', 'elk']);

<div>${cat}</div>

const [{ cat, dog, elk }, rest] = splitProps(props, ['cat', 'dog', 'elk']);

<div>${cat}</div>

const [local, rest] = splitProps(props, ['cat', 'dog', 'elk']);

<div>${local.cat}</div>

const [local, rest] = splitProps(props, ['cat', 'dog', 'elk']);

<div>${local.cat}</div>

8 Replies

Jasi 🖤🌈•2mo ago

yea, you lose reactivity you access all getters during destructuring the reason why you need to use splitProps in the first place is because we want to perserve reactivity.

tomahl•2mo ago

Ah, ok. Thanks 👍

Jasi 🖤🌈•2mo ago

https://www.solidjs.com/tutorial/props_split

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

Jasi 🖤🌈•2mo ago

here is a good tutorial that talks about exactly this

tomahl•2mo ago

So there is no way to destruct props then? A bit cleaner Imo to write <div>{foo}</div> than having to repeat "local", as <div>{local.foo}</div> everywhere.

Jasi 🖤🌈•2mo ago

The only thing you can do is put them in a function which makes sure that reactivity is perserved:

const foo = () => props.foo

return <div>{foo()}</div>

const foo = () => props.foo

return <div>{foo()}</div>

But you can't destruct props. This is the design Solid chose. They transform component props into getters. That's why you can write something like <Mycomp myProps={signal()} /> and even tho the signal accessor is called here, it'll still be reactive. because solid essentially does this in the background:

const props = {
  get myProps() {
    return signal()
  }
}

const props = {
  get myProps() {
    return signal()
  }
}

tomahl•2mo ago

Thanks for the detailed answer, I understand now 👍

Jasi 🖤🌈•2mo ago

You're welcome :zzz_flushedfroge: happy to help

Gaming

Programming

Destructuring with splitProps