CODEWITHSUNDEEP
reactjs
Cerberus
Cerberus

Reputation: 35

Functional vs class components as container components

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?

Upvotes: 3

Views: 571

Answers (2)

athar ateeq
athar ateeq

Reputation: 1

Using containers in functional-based React components offers several advantages:

Clear Responsibilities Containers help keep things organized by separating the job of managing data (like fetching it from a server) from the job of showing that data to users. It's like having one person in charge of cooking (the container) and another person in charge of serving (the presentation component).

Easy Reuse Think of containers as reusable templates. Once you've set up a container for managing a particular type of data or behavior, you can use it in different parts of your app without rewriting everything. It's like having a recipe that you can use over and over again for different meals.

Faster Performance Containers can make your app run faster because they're smart about when things need to change. They know when to update parts of your app so that it feels smooth and responsive to users. It's like having a well-organized kitchen where everything is ready when you need it.

Testing Made Simple Containers make it easier to test your app because they handle the tricky parts behind the scenes. You can focus on making sure each piece works correctly without worrying about how they all fit together. It's like checking each ingredient before you start cooking to make sure everything is fresh and ready to go.

Keeps Things Organized As your app gets bigger and more complex, containers help you stay organized. They keep all the important stuff in one place, making it easier to add new features or fix problems without causing chaos. It's like having a well-planned kitchen where you can quickly find what you need, no matter how many dishes you're preparing.

Long story short, using containers in functional-based React components is about organizing your app logically, making it easier to build, maintain, and improve over time. It's a way of structuring your kitchen (or codebase) so that everything works smoothly together, just like a well-oiled machine.

Upvotes: 0

Yuan-Hao Chiang
Yuan-Hao Chiang

Reputation: 2603

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! :)

Upvotes: 4

Related Questions