When to use ES6 class based React components vs. functional ES6 React components?

user_4996204 0
Viewed 109899

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

redux reactjs ecmascript-6 javascript
6 Answers

As of React 17 the term Stateless Functional components is misleading and should be avoided (React.SFC deprecated, Dan Abramov on React.SFC), they can have a state, they can have hooks (that act as the lifecycle methods) as well, they more or less overlap with class components

Class based components

Functional components:

Why i prefer Funtional components

  • React provide the useEffect hook which is a very clear and concise way to combine the componentDidMount, componentDidUpdate and componentWillUnmount lifecycle methods
  • With hooks you can extract logic that can be easily shared across components and testable
  • less confusion about the scoping

React motivation on why using hooks (i.e. functional components).

user_64397990

I have used functional components for heavily used application which is in production. There is only one time I used class components for "Error Boundaries" because there is no alternative "Error Boundaries" in functional components.

I used "class component" literally only one time.

user_136161140

Forms are easier with functional, because you can reuse form input fields and you can break them apart with React display conditionals.

Classes are one big component that can't be broken down or reused. They are better for function-heavy components, like a component that performs an algorithm in a pop-up module or something.

Best practice is reusability with functional components and then use small functional components to assemble complete sections, ex.- form input fields imported into a file for a React form.

Another best practice is to not nest components in the process of doing this.

user_111006670
Related