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•2y 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•2y 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"])

baxuzOP•2y ago

Ah, so it's not a replacement for destructuring (ie flattening in my case), only splitting in different objects.

Gaming

Programming

splitProps instead of destructuring?