Functional Components are Better

But Only by a Little

Matthew Tyson
Feb 9 · 4 min read
Me and Photopea.com

It’s become pretty clear that straight-function components in React offer a simplicity edge on class-based components.

I did not arrive at this conclusion without some mental anguish. I like to observe software trends with an intransigent detachment. The ongoing FP vs. OOP hoopla gives all the signs of a reactionary cat fight.

It’s always useful to stand outside the debate and hold it as it were at arms length, to get a good look at the thing before participating.

But the funny thing about programmers is they can get all whipped into a frenzy about the essence of coding and what is better as though it were an ethical matter.

Or even an matter. Sometimes, programmers are driven by emotion because they love their art like a musician loves music.

And sometimes we really arrive at better technique through that process.

In the case of functional components, we are on to something.


Mentally, as React developers, I believe we are at the crossroads where we can simply learn functional UI composition (along with hooks) and forget about class-based components entirely, except as we need to interact with them for legacy purposes.

This is not because functional components + hooks are much superior. Functional has an edge, but it’s not extraordinary.

But as I say: mentally, we don’t really need to keep class-based React in our heads. That means less mental noise.

That means more simplicity.

And more simplicity means more creative capacity.

So let me say this very directly: I am no partisan. I love coding because it is itself a thing of beauty. I have seen many instances of astoundingly awesome object oriented code.

The essence of why I find functional components superior is this: you can ramp complexity incrementally.

The simple is very simple, indeed.


Here’s the simplest possible functional app:

<div id="app /> function WisdomComponent() {
return <p>The good that ought to be the object of our earnest pursuit, is to be found only within ourselves.</p>;
}
ReactDOM.render(<WisdomComponent />, document.querySelector("#app"))

So the point I am going to make here is this: this is literally the simplest expression of the mechanics desire. Here’s the name of the component and here is the output.

Here’s the class version:

class WisdomComponent extends React.Component {
render() {
return <p></p>;
}
}
ReactDOM.render(<WisdomComponent />, document.querySelector(“#app”))

The class-based version is not in any way grotesquely complex. But… I couldn’t just type it out without looking it up. It has added a layer of interaction with the baseclass that stands between the absolutely essential elements.


In essence, a function allows for the cleanest connection between the where and the what.

In the case of the functional component, I pretty much could. I might have to look up the ReactDOM.render call, but otherwise we are just dealing with a JavaScript function and JSX (really just HTML in this case).

I don’t know about you, but I’ve written about a billion JavaScript functions. At least a billion, maybe more. So this style in a way just rolls off the tongue. It’s frictionless.

Even a tiny bit of friction adds up in the complexity of software.

So we can say goodbye to class-based components.


As I said, though, the more profound reason to fully abandon class-components is to avoid the unnecessary mental overhead. Even if we had two completely equal approaches to building components, we should prefer to abandon one over time, just to avoid keeping extra information in the already-over-burdened mind-space.

Caveat #1: there’s nothing wrong with building class-components if that’s what you know. Not at all. I’d say you probably need to learn functional style pretty soon.

Caveat #2: There is an enormous codebase out there built on class components. There is no urgency to refactor them. There is no imperative to start shaking up the in-place processes by forcing functional style.

Caveat #3: Stability and smoothness with process, organization and people always must be weighed into the scales.


And finally, I leave you with this:

No, that wasn’t it, this is what I want to leave you with:

Yeah, that is pretty good.


Come Visit

JavaScript in Plain English

Learn the web's most important programming language.

Matthew Tyson

Written by

www.wholisticsoftware.com

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade