Functional vs Class Component in React: Key Differences and Usage

In React, functional components are simple JavaScript functions that use hooks for state and side effects, while class components are ES6 classes that manage state and lifecycle with methods. Functional components are now preferred for their simplicity and modern features like hooks.

Quick Comparison

This table summarizes the main differences between functional and class components in React.

Aspect	Functional Component	Class Component
Syntax	JavaScript function	ES6 class extending React.Component
State Management	Uses useState hook	Uses this.state and this.setState
Lifecycle Methods	Uses useEffect hook	Uses methods like componentDidMount
This Keyword	No this keyword	Requires this context
Performance	Generally faster and simpler	Slightly heavier due to class overhead
Introduced	React 16.8 (with hooks)	Since early React versions

Key Differences

Functional components are plain JavaScript functions that return React elements. They became more powerful with React 16.8 introducing hooks like useState and useEffect, allowing them to manage state and side effects without classes. This makes the code easier to read and test.

Class components are ES6 classes that extend React.Component. They manage state with this.state and update it using this.setState. Lifecycle events like mounting and updating are handled with methods such as componentDidMount and componentDidUpdate. They require careful handling of the this keyword, which can be confusing for beginners.

Functional components avoid this binding issues and encourage simpler, more reusable code. They also align better with React's future direction, focusing on hooks and functional programming patterns.

Code Comparison

Here is a simple React component that shows a counter with a button to increase the count using a functional component with hooks.

javascript

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

Output

A webpage showing "Count: 0" and a button labeled "Increase" that increments the count when clicked.

Class Component Equivalent

This is the same counter implemented as a class component using state and lifecycle methods.

javascript

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.increase = this.increase.bind(this);
  }

  increase() {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increase}>Increase</button>
      </div>
    );
  }
}

export default Counter;

Output

A webpage showing "Count: 0" and a button labeled "Increase" that increments the count when clicked.

When to Use Which

Choose functional components for most new React development because they are simpler, easier to read, and support hooks for state and side effects. They align with modern React best practices and future updates.

Use class components only if you maintain older codebases that rely on lifecycle methods or patterns not yet migrated to hooks. For new projects, functional components are the recommended standard.

Key Takeaways

Functional components use hooks and are simpler and more modern than class components.

Class components require managing this and lifecycle methods explicitly.

Functional components avoid this confusion and encourage cleaner code.

Use functional components for new React projects and class components only for legacy code.

Hooks like useState and useEffect enable functional components to handle state and side effects.