Functional Components Vs Class Components in React JS

Introduction

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 will take a closer look at the 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 that we have seen what functional and class components are, let’s look at some differences between them.

	Functional Components	Class Components
Syntax	Functional components are written as a JavaScript function.	Class components are written as a JavaScript class.
State and Lifecycle Methods	Functional components do not have a state or lifecycle methods.	Class components have a state and can implement lifecycle methods like componentDidMount and componentDidUpdate.
Performance	Faster as they do not have state and lifecycle, react needs to do less work to render these components.	Slower as they have state and lifecycle, react needs to do comparatively more work to render these components.
Code Length	Functional components tend to be shorter and more concise	Class components require the boilerplate code, such as a constructor method and the use of “this” to access props and state.
Usage of “this”	Functional components do not use “this” at all, which makes them easier to understand for beginners.	Class components use the “this” keyword is used to refer to the current instance of the component which can be confusing for new developers.

When to use Functional Components?

Functional components should be used when you have simple components that do not require state or lifecycle methods. They are also ideal when you want to keep your code simple and easy to understand. Functional components are a great choice for building small and simple components like buttons, input fields, and labels. Functional components are recommended for building presentational components.

When to use Class Components?

Class components should be used when you have complex components that require state or lifecycle methods. They are also ideal when you want to build reusable components that can be used in multiple parts of your application. Class components are a great choice for building large and complex components like forms, tables, and modals. Class components are recommended for building container components.

Conclusion

Functional components are simpler and faster, on the other hand, class components are more feature-rich and reusable. Both can be used for building high-quality front-ends and depending on the requirements both can be used. Developers can make informed decisions based on their differences. 

FAQs

• 
  Top 9 Interview Questions and Answers for Freshers Success
• 
  How To Introduce Yourself In Interview?: A Winning Guide To First Impressions
• 
  How To Answer The ‘Tell Me About Yourself’
• 
  How To Craft A Winning Data Analyst Resume As A Fresher?
• 
  Top 25 OOPs Interview Questions and Answers (2023)