React: when to use ES6 class based components vs.

Question

After spending some time learning React I understand the difference between the two main paradigms of creating components

My question is when should I use which one and why? what are the benefits/tradeoffs of one over the other?

ES6/7 classes:

---

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

Functional:

---

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

I'm thinking functional whenever there is no state to be manipulated by that component...but is that it?

I'm guessing if I use any life cycle methods, it might be best to go with a class based component.

Answer 1

Always try to use stateless functions (functional components) whenever possible. There are scenarios where you'll need to use a regular React class:

• The component needs to maintain state
• The component is re-rendering too much and you need to control that via shouldComponentUpdate
• You need a container component

UPDATE

There's now a React class called PureComponent that you can extend (instead of Component) which implements its own shouldComponentUpdate that takes care of shallow props comparison for you. Read more

Answer 2

You have the right idea. Go with functional if your component doesn't do much more than take in some props and render. You can think of these as pure functions because they will always render and behave the same, given the same props. Also, they don't care about lifecycle methods or have their own internal state.

Because they're lightweight, writing these simple components as functional components is pretty standard.

If your components need more functionality, like keeping state, use classes instead.

More info: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

Answer 3

Functional components aren't any more lightweight than class based components, "they perform exactly as classes." - https://github.com/facebook/react/issues/5677

The above link is a little dated, but React 16.7.0's documentation says that functional and class components:

"are equivalent from React’s point of view." - https://reactjs.org/docs/components-and-props.html#stateless-functions

There is essentially no difference between a functional component and a class component that just implements the render method, other than the syntax.

If you're on the fence, then consistency is the way to go. I often use class based components for the "additional features" such as state, but also prefer to use them for my "functional components" as well, just to keep things consistent.

In the future (quoting the above link) "we [React] might add such optimizations" but for now my team has found consistency the best option (especially for the inevitable new developer that comes in and is confused about where this.props went or accidentally names props something else in a functional component).

UPDATE Jan 2019

With the introduction of React hooks, it seems as though the React teams wants us to use functional components whenever possible (which better follows JavaScript's functional nature). This helps you write simpler components, reuse stateful logic, and get rid of all the ickyness around classes (like this).