Functional vs class components as container components

Question

I can't seem to find any material on the pros/cons of using a functional component as a container component, now that state isn't an issue.

Edit: This is given that most, if not all container components I've come across are class components. Rephrasing this in the form of a question, given the context of container components, would it be beneficial to use functional components as opposed to container components?

Answer 1

First of all, React Hooks and useState are a very new feature to React (class components were the norm for the last 3 or 4 years, as opposed to a few months for hooks), so most documentation and examples are naturally written using class components.

Second, in my personal experience and as it is written in the official docs, there is really no hurry whatsoever to run away from class container components, especially since a well-written, bug-free code is more important than the most optimized, up-to-date code.

The devs in our company are used to class components for containers (we have a 300,000 LOC React application and 100 million users, so changes are not to come just because yes -- if something breaks we are usually in deep trouble).

And, for now, Class Components allow us to easily answer these questions quickly:

1. Where is this container checking for changes? Check ComponentDidUpdate()
2. Are there any memory leaks or unhandled events? Check ComponentWillUnmount()
3. What are the state variables used in this container? Check the constructor()

I have slowly adopted hooks for personal projects and I really like them, but even after playing with them for a few months, many times I can't come up with a "best practice" way of doing and this has been documented in the docs too: best practices can only come with time.

Performance-wise

As for performane, container components are almost never created more than once per page or at most a few times, so I can't possibly think that they would be less performant, provided the code is well written.

Also, benchmarks are mostly just a numbers game (same as CPU cycles and camera mega-pixels), and as posted here by Dan Abramov, seems like benchmarks show similar numbers.

I understand people get obsessed with numbers (when I was really into cameras, I was seriously obsessed with mega-pixels and lens apertures, and funny enough that faded away as my photography skills got better and better).

To sum it up:

Benefits of Class Containers:

1. More solidified best practices and a lot of good solid information out there.
2. Tried and tested by many big companies and vouched by developers.
3. If you like class syntax (I do) in Javascript, class containers make the code more legible.

Benefits of Functional Containers (with hooks):

1. Cleaner code (no more if props.fetched !== prevProps.fetched halleluyah!)
2. Better integration with libraries such as Redux's useReducer and dispatch (the reduction in boiler-plate code, as well as HOCs which I quite dislike is very welcome).
3. Less error-prone to race conditions and I suspect easier to debug, as they follow a very clear functional paradigm.

Again, this is not by any means the de facto standard or anything, just my personal opinion based on experience. Take what you find useful and leave what you don't. Hope this helps! :)