Should You Use Functional or Class Components?

What’s a Functional Component?

Unlike Class Components (which utilize the ES6 class that acts as “special function” to simulate the classes in OO programming), Functional Components are just plain old functions and can be written two different ways.

function Meow(props) {
   return (
      <div>
         {props.cat} says, "Meow"
      </div>
   )
}
//or, using the arrow functions introduced in ES6
const Meow = (props) => {
   return (
      <div>
         {props.cat} says, "Meow"
      </div>
   )
}

Functional components are easier to read and test because they are just plain JavaScript functions without state or lifecycle-methods. We cannot call setState inside of them but can use hooks, like useState and useEffect instead. They are also known as stateless components (and can also be a pure component, but that’s kinda another blog post altogether.)

If you’re ever confused if your Class Components needs to be a Functional Component, remember that if your Class Component only contains a render method, it should be changed to a Functional Component instead.

Here’s the same functional component from above, written as a class component for comparison:

class Meow extends Component {
   constructor(props){
      super(props)
   }
   render() {
      return (
         <div>
            {props.cat} says, "Meow"
         </div>
      )
   }
}

And before you say anything, you’re right! My Class Component example doesn’t follow the advice I gave you above, but I’m trying to keep it simple for you. Think of it as a beautiful example of what not to do.

Why Should You Use a Functional Component?

They’re Easy to Understand

If you’re working on a project with someone else or trying to debug some code you haven’t seen in a while, eliminating what functional components can’t do (such as lifecycle methods or modifying state) can cut your testing and debugging time in half!

They Can/Will Have Better Performance

While Functional and Class Components are identical internally, Functional Components will eventually have performance optimizations, according to the React 0.14 release notes. Until then, this blog post explains how to directly call components instead of mounting, improving speed by ~45%!

They’re Easy to Debug

Functional components render things based on the props they’re given, which makes them really, really easy to debug. As long as you know what’s being passed in, you can accurately trace your bug to the root of the issue.

They’re Easier to Reuse

Since you just render things in the component based off of whatever you’re passing in, it should be easier to reuse components. Whether it’s a button, a check box, a container of some sort, or something else entirely, Functional Components are generally easier to repurpose.

When You Shouldn’t Use a Functional Component

In practice, I always start with a Functional Component unless I know right off the bat I’ll need to manage state or use a lifecycle method. It’s so easy to refactor your code into a Class Component that I don’t even think twice about it anymore!

Really, the only time you should not be using Functional Components is when you either need to manage state or use a lifecycle method.

But, if you’re still on the fence about it, the release notes state:

“In idiomatic React code, most of the components you write will be stateless, simply composing other components.”