Considerations for writing React Components — Part 02: Function vs. Class components
Table of contents
- Part 01: Introduction
- Part 02: Function vs. Class components (this article)
There are two ways for providing a “scaffold” for a React component: Class components and Function components.
Class components use the ES6 class syntax:
Whereas Function components are, as their name suggests, simple functions:
Class and Function components differ fundamentally in the way their state and lifecycle (i.e. rendering HTML or other components, prop and state updates, etc.) is managed. For instance, in Class components, you would override the componentDidUpdate() lifecycle method to react to changes of props and state. With Function components, you would use a useEffect() hook with the option to specify when the effect is run via a dependencies array.
So when to use which approach? Luckily, the answer is rather straightforward: If you’re using a sufficiently recent version of React (16.8 or later) prefer Function components over Class components.
Although Class components are still fully supported in the latest version of React (17.0.2 as of writing this article), there’s now rarely a need to use them at all. The two main use cases that come to my mind are needing to support a legacy API of a library or when writing an Error Boundary.
Before hooks were introduced in React 16.8, Function components were basically limited to accepting props and rendering — it wasn’t possible to use state inside them. Hooks allowed Function components to exist “on par” with Class components but they also provided additional benefits like making the reuse of logic that isn’t directly tied to rendering much more concise.
Many libraries have adapted their APIs to (also) provide hooks which often greatly simplifies their usage. Overall, the benefits hooks provide make a strong case for preferring Function components over Class components since they’re limited to the former.
Another advantage of Function components is that they’re generally less verbose. Compare the example Class component and the second example Function component from above. This simple component can be written in one line of code using an arrow function with an implicit return and prop destructuring. In addition, Function components require less boilerplate code since they don’t require the more boilerplatey lifecycle methods.
Note: We should always strive to find the proper balance between brevity and keeping our components (actually, all our code) as readable and easy to understand as possible.
If you’re used to Class components, Function components and hooks might require some getting used to. They might even require you to realign your mental model of React.
But from my own experience, it’s well worth it. Hooks have been around for quite some time now and common usage patterns have emerged. So unless you’re on a legacy codebase, embrace Function components! And if you’re just starting out with React, don’t sweat learning all the details about Class components in the beginning. It’s sufficient to know that they exist and chances are that you can cover most use cases with Function components alone.
Thank you for reading!
This blog post is published by Comsysto Reply GmbH.
Further reading
Dan Abramov provides an in-depth explanation of the difference between Function and Class components
