Saturday, 12 September, 2020 UTC


Summary

Use only as directed.
One of the big issues I ran into while building Frontend Armory was that right after launching the site, after spending months developing the original course, the React team released a completely new API which was largely incompatible with the previous API.
Now naturally, the React team doesn’t like to sell it that way. Hooks are “backwards compatible”. But right now, I’ve been off the Twitter treadmill for a few months, and I’ve just refunded almost a year of subscription fees to my Frontend Armory customers (oh and made all content completely free), so I’m in a state of mind where I’m quite happy to say it how it is. Tell me I’m wrong. I don’t give a fuck.
React with Hooks is not React. It’s a different framework with the same name and not even the courtesy of a major version change.
Here’s the thing: you can’t use hooks with class components. Trying to build an app with hooks and class components is like writing half of your app with Haskell, and the other half with Java. It’s actually possible. And Facebook engineers can take a part-time job at the 7-11 too.
But in a more literal sense, you really-actually-can’t use hooks in class component code. The API forbids it. So basically, if you write any custom hooks, then any components you want to use those hooks in will be hook-based too. And what you’ll soon find is that in practice, once you start writing custom hooks, you can’t write class components anymore. Not unless you want to re-implement all your hook-based helper logic in the process.
Tangent: hooks should have been called mixins. But I guess someone on the React team wanted to give us a discrete warning that they’ll hook into your codebase and then you can’t get them out.
Okay but back to my rant, the upshot of all this is that you can’t use any of those shiny new custom hooks you’ve written in your legacy code — in your existing class components. Don’t want to duplicate functionality? I guess you’re going to have to rewrite all those class components with hooks. Just like the React manual suggests you don’t.
And just to add to the cognitive dissonance, the Error Boundaries API still only works with class components. So if you’re a new React developer who wants to do something out of the ordinary like, oh, I don’t know, handle errors, then you’ll need to learn this big old class-based API that you’ll probably never see again in your life.
But don’t get me wrong – I actually like the hooks API. I use it daily. I’d be a confused wreck if the powers that be took it away and told me to go back to class components. But it’s just, I guess, I think… hooks (and Suspense) are not the React that I spent many months writing about. They’re not “just JavaScript”. They’re not the V in MVC. Hell, did you know that Modern React actually monkey-patches the console to make things “less confusing”?
Modern React is technically impressive, but I don’t feel like I could build it myself, not in a weekend, and not in 50. I don’t understand how it works, and I don’t feel like I can contribute. I don’t wan’t to contribute. It’s just not fun anymore. And fuck Mark Zuckerberg. It’s all his fault, somehow. But seriously, the fact that Facebook owns React certainly doesn’t make it easier to support.
But I digress. There’s one thing that Modern React can do, and that’s render class components! If you install an extra package or two! And Modern Macs can run DOS games if you install DOSBox! Hey what do you know, it turns out that everything’s technically backwards compatible.
The post React: it’s technically backwards compatible! appeared first on James K Nelson.