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.
Less Code. Functional components require significantly less code. Less code = smaller bundle size = users can access your web app quicker. Google research shows that the chance of a bounce increased by 32% when a page load time went from one to three seconds. Functional component implementations require roughly 2/3 the amount of code on average compared to a matching class component implementation. As your application's component library grows, keeping your components functional will keep your bundle size smaller. This matters.
Less Messy. Class components are confusing/cluttered. Logic is spread across several different lifecycle methods (componentDidMount(), componentDidUpdate(), componentWillUnmount(), etc.) on top of the requirement of explicit constructor() and render() definitions within the class. Additionally, the use of the this keyword as well as the need to bind functions to component instances in the constructor() method is cumbersome - functional components handle this under the hood by default. Functional components are also much more human-readable.
Promotes Best Practices. Using hooks is standard practice in modern React development. Hooks promote the seperation of data manipulation functions and your app's presentational components. Hooks are not new to the world of React and they should be embraced, not avoided. Hooks can only be used in functional 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!
Tucker Massad
Boston, MA
tuckermassad@gmail.com
