Functional Components Vs Class Components in React JS

In this article, you’ll learn about difference Functional Components and Class Components in React JS along with examples.

React is one of the most in-demand JavaScript libraries which helps in building single-page applications. React helps in complex state management, easy component composition, and performance optimization. While developing a single-page application using Vanilla stack, making changes in the DOM is very difficult and tedious, and solving this issue is component-based. Let’s see what is the actual difference between functional components vs class components in React JS.

Applications based on React can be built with two types of components: 

• Functional components 
• Class components

In this article, we’ll learn about differences between functional and class components and help you understand when to choose one over the other for your React projects.

What are Functional Components?

Functional components are a simple, fast, and easy way to design and develop a component in React. They are used to create components that return JSX and don’t have their state. 

Functional components take props as input and return a React element that describes what should be rendered on the screen. They are simpler to write and understand in comparison with class components. They are faster than class components as they do not have state and lifecycle methods. The functional component is also known as the stateless component as they do not handle states. 

However, functional components use React hooks i.e. useState() to provide state management and useEffect() to access the component’s various stages in its lifecycle.

Example of a functional component:

function MyComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

What are Class Components?

Class components are complex in comparison to functional components.

Class components also known as stateful components contain state and lifecycle methods and are written with JavaScript ES6 classes. A state is an object that contains data that can be updated and displayed in the component. Lifecycle methods are called at different stages of the component’s life cycle, such as when it is updated.

React component class extends the React.Component, a method called render() is created that returns JSX element. This method, Render in ReactJS is responsible for displaying content on the screen by converting the app’s state into a DOM node.

React now supports writing class components as functions using the new “hooks” API.

Here is an example of a class component:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

Functional Components vs Class Components

Now let us highlight and see the Class components vs Functional components differences.