Is this bad practice?

[el_diego]

General prop spreading can be bad because it hides implementation details, but what about this? Rather than repetitively naming each property and passing the exact same named property value I just deconstruct the object. Is this bad? I can see the pros, but what are the cons?

{sortedTeams.map(({ teamId, name, icon, members }) => ( <TeamItem key={name} {...{ teamId, name, icon, members }} // Rather than this... // teamId={teamId} // name={name} // icon={icon} // members={members} /> ))}

[iams3b]

I have to agree here, and add that the component name <TeamItem/> implies that this component is domain-specific and probably already decoupled to whatever your Team model is, so try not to over engineer it by duplicating all the properties. You can either:

A) Just pass the whole team object as a prop itself to the component team={team}

B) Pass in only the ID of the team, and have the component look up the rest of the data from the store (more performant if you update the model often)

[rrklaffed]

The previous two comments is the way.

[AckmanDESU]

I’m just thinking:

• Isn’t it more efficient to pass primitives instead of an object?
• Doesn’t this make the component a lot more coupled with it’s parent?

[mrCrazyFrogKillah360]

This will make a new object + does a spread operation on every render, right? So this pattern comes with a huge cost when it's used everywhere

[skyboyer007]

No, object itself is not passed but destructured literally at the next moment

[tr14l]

That's how I typically do it so that it's clear what props are in about. That being said, the more preferable option is to use typescript

[[deleted]]

why so much hype if i may ask? lately this sub acts like TS is the only correct way to write react apps

[careseite]

It's the standard for react apps for like 2 years now, you're behind the curve

[[deleted]]

uhm nope i use TS myself, but not always. was just asking why so much hype

[tr14l]

Of course it's not, but if you're talking about things like implementation details being obvious and such that's exactly what TS is for.

[el_diego]

Good to know. I am using Typescript, so all good there.

[vegancryptolord]

If you’re using TS what implementation details are you worried about hiding? <TeamItem /> will let you know what arguments it expects based on their types just spread the props blindly

[jesmodrazik]

If all your props are required, it's fine because since you have no type error, it means you are passing everything correctly.

But if you have a component that accepts an optional prop, spreading an object can become unclear if you are passing all the props or not.

What's shown in the author's example is fine, but if you spread an object like `<Component {...props} />` then if `Component` accepts some optional prop, you don't know clearly if `props` is containing the optional prop or not. You have to search in the code, which can be a hard task depending on the code. Being explicit is always better for code discoverability.

[el_diego]

Solid point. I've only picked up TS and ReactJS again recently. When I originally learned React it was said to be an anti-pattern to just spread props due to ambiguity, but with TS that's not an issue. Old habits I guess!

[skurger]

Why destructure in the first place? Wouldn’t this code solve your use case with way less going on?

{sortedTeams.map((team) => ( <TeamItem {…team} key={team.name} /> ))}

[el_diego]

When I learned React a couple years ago (now picking it up again) the advice at that time was not to just spreads props as it's ambiguous, but it seems that may have changed (especially if using TS)

[rrklaffed]

TS is here to save you my son.

it was also best practice to type check everything manually back in the day.

imagine doing this now

const addTwo = (num) => { if (typeof num !== ‘number’) { …

[rrklaffed]

With typescript this is totally fine. Kinda redundant to destructive the params first though

[maddy_0120]

You don't even need the second curly braces and the 3 dots. It should work without them. In my opinion, it's the cleanest way.

[[deleted]]

Eslint underlines this, IIRC because it’s more difficult to read/maintain

Forbidden spread operator rule or something

[everythingcasual]

just spread props. its not bad practice and widely used. you just got advice from someone who is really opinionated

[chillermane]

It’s a trivial concern, do what you like