The place I’m doing work for is filled with engineers that are very junior and management is no exception. It has led to a lot of bad practices, but the one that’s been driving me nuts lately is destructuring the hell out of everything. They seem to do this for everything. Tables use grids. If a component needs a title, they will use grids. We get it, you want to use “new tech”. Using a table makes sense though… for tables and what’s wrong with margins? Fuck em? But the destructuring, oh the destructuring.

I many developers don’t understand a few things:

Context is important and local variables can be awkward

Let’s say you have: const myComponent = ({onChange}: Props) => { return <input onChange={onChange} /> }

What if I need to call some custom logic for each change, but hooking into it, now I have to come up with some new name, even though onChange is what makes most sense.

const myComponent = ({onChange}: Props) => { const onInternalChange = (e: Event) => { doSomething(e) onChange(e) } return <input onChange={onInternalChange} /> }

This is a short example, but what if there are a dozen props? When you’re on line 300 and you see onChange did it come from a prop? Well, maybe? Is it an “internal” function? Depends how I decided to name things. By using props.onChange, I always know where it came from, so I know the context. It essentially namespaces your props in this case for you. That’s not bad. You will live by typing props.onChange, it makes your code much more clear.

You’re copying primitives

Let’s say that component also takes value, title, and a bunch more. If you destructure it for no fucking reason at all, guess what? Now you have two copies of those primitives.

I for one think using memory over CPU cycles is generally favorable, but adding memory pressure for no reason makes no sense. Copy that variable! Garbage collect the old one! Copy that variable! Garbage collect the old one! Memory allocation isn’t free, fellers.

It’s actually more to maintain

This is pretty minor, but assuming you’re using types, every single time you add or remove a prop you have to add it to the type and the destructure. It’s just annoying? Why? Why do you want to do extra work?

You’re wasting all of my screen real estate

I actually had to take a screenshot of this recently to bring up in our of our engineering meetings. I’ve seen it a few times. There were so many arguments that between the type definition and the useless destructuring it took up my entire 4k 32” screen. WHY??!! Do you like scrolling around trying to find the line of code you’re looking for? Does any of that “code” actually add value?

In closing

If you’re the type, then using every new feature that comes out until you’re blue in the face. Think about what you’re doing. Does this make the code better? If the answer is no then I hate to break it ya: the “old” way might just be better.

Or you can double the size of your code base, waste all of your screen space, write awkward variables, lose context, and increase the memory footprint of your app because you can. The choice is yours.