Are React class components still useful?
This is going to be a short article and an opinionated one. React team introduced hooks in release 16.8. Now, even after 2+ years, the main documentation still is primarily class based, with Hooks are tucked away as an advanced topic. I wonder why.
We’ve been developing several large React applications within our team at HPE for the past two years. The number of class based components in all? Precisely one — an error boundary component. There has not been a need to create another class component.
IMO, class based container components are harder to design when you have to address several concerns. With hooks it is very easy to separate and reuse complex logic — it keeps the code clean. They are also easy to unit test by wrapping inside simple tester components.
The only overhead to using React hooks is to understand the dependencies array in useEffect, useMemo, useCallback etc., it can make your head scratch sometimes with its overloaded semantics. I really wish there was a better way of doing it but, it is what it is. If you have several hours to spend, you can read and follow Dan Abramov’s deep dive here trying to understand useEffect.
Here is a tip. If you are starting a new project, abandon classes completely and for good measure, switch to using arrow functions as much as possible. Surprisingly, you now don’t have to deal with constructor, extends, new and this keywords. You’ve also chopped off a significant amount of learning curve in TypeScript. Class based OOP also brings unwarranted discussions of the famous design patterns from Java land. TBH I am still haunted by the Proxy vs Adapter vs Facade vs Decorator discussions from my Java days. If you really need OOP patterns, there are many ways of achieving it without using classes even though TypeScript might drive you crazy while you are at it. :-).
If you are already in an actively maintained class oriented React project, evaluate your options — I prefer an idiomatic codebase. Old components stays class based, new components use hooks is not a great argument. It is best to unify the team with a single style. Mixing class and functional components in the same application can lead to confusion among devs, involve higher learning curve, end up adopting different testing patterns and will create less than ideal code review sessions. You can consider using a monorepo such as yarn packages, split your application into a collection of isolated features and then start off new features with hook based components. Again, this will need a slightly different architecture.
TLDR; Use hooks based React components if you are starting fresh.
