Read article Return to blog

Stop writing class components - Why class components are detrimental to your React app's scalability

Posted June 30, 2022

5 min read

As a React developer, you are given the architectural freedom to choose between writing your components as javascript class variables (referred to as "class components") or a simply functions ("functional/function components"). Logically speaking, both implementations can accomplish the same goal of providing users with proper interactability within your application. Nonetheless, just because they can achieve indisiguishable functionality on the front end does not mean they come with an equal performance toll on your application. Without getting to deep into the nitty-gritty, I'm here to tell you that if you are in the habit of writing class components rather than functional ones you are hurting the performance of your React application.

At a high level, there are several unique reasons why functional components are superior to class components. This post will focus on the first bullet in which I believe is the most important, but there are certainly several reasons beyond the minimization of your React app's bundle size to avoid class components.

Lets take a look at a simple demo functional component:

Now lets see the same implementation using a class component:

Look at that! We are able slash the total # of lines necessary by 26% (38 lines compared to 51). A more important comparison to make is the difference in bundle size of the component upon building the app (via create-react-app). Using webpack-bundle-analyzer, upon building the app the functional component has a total gzipped size of 538 B. On the other hand, the class component has a gzipped size of 961 B. The class component creates a 45% larger file size upon building. If we consider a large-scale react app with 100+ unique components, keeping them functional can have a significant impact on your total bundle size and allow your visitors to download pages much quicker.

If you have any insights, comments, or questions about debouncing feel free to reach out to me via the contact section below. Thanks for reading!

Contact me

Tucker Massad

Boston, MA