Differences Between React Class Components Vs. Functional Components

Ashab Ahmed
Jan 12 · 4 min read
Image for post
Image for post

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:

Image for post
Image for post

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”.

Image for post
Image for post

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.

Image for post
Image for post

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!

Image for post
Image for post
Image for post
Image for post

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!

Resources

The Startup

Medium's largest active publication, followed by +773K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store