Are large components an anti-pattern?
When converting an old application to using React, you can end up in a situation where you have copy/pasted large chunks of HTML to the render function of some of your newly created React components.
Now you have a large React component with many lines of code. It works, but it doesn’t feel right.
This is not what is taught in React tutorials or case studies. In tutorials, the React components are small and clean.
Are we missing out on the real benefits of React when using large components?
Why are small components encouraged?
These are the advantages to using smaller components:
-
Enable code reuse.
-
Make it easier to understand and reason about the code.
-
Enable optimizations with shouldComponentUpdate
The strongest reason for using smaller components for a majority of applications is code reuse and that the application gets easier to understand.
Small components that are specialized on doing one thing can more easily be reused than large multi-purpose components.
And it’s more simple to understand what your components are doing when they do one thing.
Also, it’s easier to do performance optimizations with shouldComponentUpdate when using smaller components.
So is it an anti-pattern to use large components?
A general advice is to use smaller components because of the reasons listed above.
But does that mean you should never write large components? I would say no. These are some circumstances where large components are fine:
Static components
Is your large component mostly static with not much state and/or logic? If it is then it’s totally fine to use one large component. Splitting that type of component up might even make the code more difficult to follow.
An example could be the footer in a larger web application. It usually consists of links and some CSS styling, but it can be quite many lines of HTML anyway. It makes sense to put it in one component to keep it simple.
If you need to reuse parts of the static data, then it makes sense to split it up though.
Developing new features
In the early phases of development, things change a lot. You experiment and try new things out. The business requirements changes.
It can be difficult to know in advance what is the best way to split your components.
Accept that your component can be a bit too large at some point in the development process. Programming is an iterative process, where you come back and improve continuously.
Conclusion
Deciding how large a React component is a very similar process as deciding how large a regular function should be. The truth is there are no right or wrong here. The perfect size does not exist.
You need to make your own judgment on a case by case basis. As you gain more experience as a programmer, you will improve your judgment for sizing components and functions.
Remember you will never reach perfection. Just do the best you can!