S
SolidJS•3y ago
baxuz

splitProps instead of destructuring?

How does splitProps work exactly? 
export const ResultDisplay: Component<{ result: Result }> = (props) => {
  const [res] = splitProps(props, ["result"]);
export const ResultDisplay: Component<{ result: Result }> = (props) => {
  const [res] = splitProps(props, ["result"]);
In this case it's absolutely the same if I write splitProps(props, ["result"]); or splitProps(props, []);. I just get props. I know I can use: 
const result = () => props.result;
const result = () => props.result;
But I'm not sure how splitProps works.
3 Replies
foolswisdom
foolswisdom•3y ago
Is the question about the difference between the two? 
// `local` has a property `result`, while `other` has the rest of the properties of `props`
const [local, other] = splitProps(props, ["result"]);
// `local` will has not properties, `other` will have all properties of `props`
const [local, other] = splitProps(props, []);
// `local` has a property `result`, while `other` has the rest of the properties of `props`
const [local, other] = splitProps(props, ["result"]);
// `local` will has not properties, `other` will have all properties of `props`
const [local, other] = splitProps(props, []);
mdynnl
mdynnl•3y ago
i think the main use case for splitProps was jsx spread <div {...rest} /> where you'd know the keys in advance while preserving fine-grained updates (it's just separating prop access) it also allows you to split multiple const [a,b,rest] = splitProps(props, ["a"], ["b"])
baxuz
baxuzOP•3y ago
Ah, so it's not a replacement for destructuring (ie flattening in my case), only splitting in different objects.

Did you find this page helpful?