React Functional vs. Class Components

Anna Azzam
Jan 21 · 4 min read
Image for post
Image for post

React gives us two ways of writing our components — functional components, and class components. In this blog, we will take a deep dive into the differences between the two, and the pros and cons of each.

First, what is a React Component?

React components are a way of defining a piece of UI into a reusable piece of code. A component is like a function, accepting inputs (called props) and returning a React element, which describes what should be rendered to the DOM.

The Syntax Differences

Let’s take a look at the syntax of functional and class components — how to write each style of component, the different ways of using React state, and how to write lifecycle methods.

Example of Functional and Class Components

Below is an example of a functional component. This is simply a JavaScript function that accepts props as input, and returns the JSX to be rendered.

Now, here’s the equivalent component as a class component. This is simply an ES6 class that has a render method which returns the JSX to be rendered.

Using State

In React, state refers to an object inside a component that is used to store property values that belong to that component. When this state object changes, the component re-renders.

State in Functional Components:

In a functional component, we can use the useState hook to initialize state. If you are unfamiliar with React Hooks, I recommend taking a look at the docs here. React 16.8.0 is the first release version to support Hooks.

In the below example, we have added state to our Profile example, where the state stores a single bio property.

useState accepts the initial value of the state property, and returns:

  • bio — the current state
  • setBio— a setter function that updates the state

State in Class Components:

In a class component, the state object is initialized in the constructor, and can be used anywhere in the component using this.state.propertyName. In the below example, once again we have added state with bio to our Profile functional component example. We render this in the render method using this.state.bio.

Lifecycle Methods

Now let’s take a look at how to define lifecycle methods in each type of component. If you are unfamiliar with lifecycle components, check out the official documentation on State and Lifecycle.

Lifecycle methods in Class Components:

You may be familiar with componentDidMount, componentDidUpdate, and componentWillUnmount in React. As the names of these methods suggest:

  • componentDidMount is called once when the component is mounted, after the first render.
  • componentDidUpdate is invoked immediately after the component updates on re-renders. It is not called for the initial render
  • componentWillUnmount is invoked immediately before a component is unmounted and destroyed

In the below example, you can see how we can simply add these methods to a class component:

Lifecycle methods in Functional Components:

In functional components, we cannot simply add componentDidMount, componentDidUpdate and componentWillUnmount methods, as it is just a JavaScript function. However, the React.useEffect hook allows us to achieve the same effect as these lifecycle methods:

  • The React.useEffect hook accepts a callback, and an array of dependencies. The callback will only re-run if one of these dependencies change, so using React.useEffect with the second argument of [] will only run once, and behaves the same as componentDidMount.
  • You can use React.useEffect with no dependencies provided, which will run on every re-render. This behaves the same ascomponentDidUpdate, however will run after every render including the first render.
  • You can return a function from React.useEffect which will run when unmounting. This behaves the same as componentWillUnmount.

You can see these implemented in the below example:

Conclusion

We’ve taken a look at both functional and class components, and seen the differences between them. Both have their pros and cons, however functional components have been increasingly popular for a few reasons:

  1. In the past, functional components were limited as you couldn’t use lifecycle methods or state. Since the introduction of hooks, you can achieve anything using a functional component that you can with a class component.
  2. The React team has mentioned that there may be future performance optimizations for functional components.
  3. Functional components are often cleaner and more concise, which leads to more readable and testable code.

All this being said, the React Team has no plans to remove class components from React. Both styles are valid and you can use whichever you prefer!

Hope this helped!

The Startup

Medium's largest active publication, followed by +775K 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