React Functional vs Class Components

What are Functional Components?

There are two main types of components in React. Class Components and Functional Components. Class components are ES6 classes and Functional Components are functions. The only constraint for a functional component is to accept props as an argument and return valid JSX.

function Hello(props){
   return <div>Hello {props.name}</div>
}

The key thing that makes this type of component different from a class component is the lack of state and lifecycle methods. This is why functional components are also commonly referred to as stateless components.

Here’s the same component, but written as a class component:

class Hello extends Component{
   render(){
      return <div>Hello {this.props.name}</div>
   }
}

This snippet is a contradiction to the most basic rule. If you ever have a class component with only a render method — you should always make it a functional component.

Why use Functional Components?

So if functional components remove some functionality, why use them at all?

Let’s get into it. Here are the key reasons to start using functional components:

Functional components are easy to read

One of the main benefits of functional components is that they make your code easier to read and understand. If you’re working on a project by yourself, you might not think this is a big deal. But a-lot of times you are not working alone.

“The ratio of time spent reading versus writing (code) is well over 10 to 1 … making it easy to read makes it easier to write.”

Functional Components are easier to read in large part because you already know all of the things they can’t do, such as have hidden inputs or modify a hidden state. Especially with the use of prop destructuring, it’s very clear what’s going in and coming out of a functional component.

Functional components are easy to test

It’s easier to test functional components because you don’t have to worry about hidden state or side effects. For every input (props), functional components have exactly one output.

Given certain props, I can assert exactly what the HTML output will be. This means you don’t have to rely on any mocking, state manipulation, or crazy testing libraries.

Functional components can potentially have a better performance

Since functional components offer no state or lifecycle methods, you would think that this would allow the internals of React to avoid unnecessary overhead such as lifecycle events. Unfortunately, this is currently not the case.

Functional components are easy to debug

Functional components depend only on the props they are given to produce an output which in turn makes debugging easier. There is no need to continuously log the state of the component to understand what is going on.

If you know the props being passed in, it’s easy to trace the path of your code and figure out what is taking place.

When NOT to use Functional Components

If functional components are a hammer, it’s important to remember that not every problem is a nail. Class components are included in React for a reason.

An easy way to start is to always start with a functional component. If you find out you need lifecycle methods or it makes sense to have a small piece component level state, it’s trivial to refactor to a class component.

When should you NOT use functional components? When you have no other option.

Summary

• A Functional component is a function that takes props and returns JSX
• They do not have state or lifecycle methods.
• Functional components are easier to read, debug, and test. They offer performance benefits, decreased coupling, and greater reusability.
• They have a few downsides … but I think the benefits outweigh these. Use them whenever you can.
• Functional components are built into React. You can get started adding them to your existing projects right away!