Differences Between React Class Components Vs. Functional Components
When I first started learning about React Components, other than the obvious differences, I didn’t know exactly when to use a class component over a functional component. Thus, I figured I should learn more about the two and write about them! This article we will go over the pros and cons of each component, the syntax for each, and in which cases should utilize which component type.
Obvious differences
The obvious differences are in the syntax and hints are derived from their names in how they will be written. They both render JSX (which is React’s way of writing HTML and JavaScript), however for the class component you define a class that extends the React.Component library. Additionally, the class component utilizes a render() method. Here’s an example:
The class component extends React.Component in order for it to render anything (note that ES6 destructuring is used to extend React.Component by using { Component } in the first import React line). The functional component however, is exactly how it sounds, a plain old Javascript function!
Another obvious syntaxical difference is the class component uses the “this” keyword, whereas the functional component does utilize “this”.
Again we use ES6 arrow functions to write out this function and you can clearly see the differences in syntax when comparing the two pictures. No need to extend React.Component and no need for the render() method. It’s just how you would write a regular javascript function (except the first letter being capital in the name to let React know that’s a component and not JSX)
Props
One major way these two component types differ is how props are passed down. Passing down props can become a convoluted task for sure, especially as your application grows in complexity and size. Let’s explore how they are used in both class and functional components. For the functional component, you have to pass down props as an argument in the function explicitly.
The class component doesn’t have to explicitly pass props as an argument, it already has access to it. See the first screenshot showing that in the h1 tag it’s using {this.props.header}, header is a prop passed down to it from App.js component!
These pictures show the app rendering the names of a Person passed down as props to a Person component from People component and the header is a prop passed to People from App. Clearly see the differences here.
State and Lifecycle Methods
Next we will discuss how each component handles state. At one point in time, this was quite simple, only class components could handle state! Functional components couldn’t handle state and LifeCycle methods. However, recently from React 16.8, React Hooks can be used to allow programmers to use state in functional components as well. A little bit more on this in the end.
Additionally, the same concept is applied for the Lifecycle Methods of React (ie: componentDidMount, componentWillUnmount, etc.). Only class components utilized the lifecycle methods but with React Hooks functional components can apply Lifecycle Methods as well.
Conclusion
To conclude, developers should use functional components as much as possible. As functional components are easier to read, test, and have less code (this is because they are JavaScript functions without state, lifecycle methods, and all other methods that come with state.) Thus, functional components are often referred to as presentational components. Ideally, you only use class components for when you need to use state and lifecycle methods. That being said, let it be noted that with the use of React Hooks functional components are becoming more popular. Typically, newer React apps are using functional components since they can do the same thing as class components with hooks. Older React apps will either transition over or keep the style that I mentioned here. I didn’t want to delve into React hooks because I felt that deserved it’s own article and I want to learn more about hooks myself. Hope this helps anyone understand their React programming better!
