Components are the building blocks of the UI. They are reusable, self-contained pieces of code like function but its return HTML code.

There are two main types of components in React-

• Class components
• Functional components

Class Components

Class components are ES6 classes that extend React.Component and  must have a render method that returns React elements

Class components can manage local state, handle lifecycle methods, and render UI elements

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Greeting;

Holding and Managing Local State –

Class components manage local state by using the this.state object. The state is initialized in the constructor, and the setState method is used to update the state.

Handling Lifecycle Methods –

We can use life cycle methods to run code at specific points in a component’s lifecycle. Like componentDidMount, componentDidUpdate, and componentWillUnmount.

Rendering UI Elements –

The render method is required in class components. Its return the JSX code

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    // Initialize state
    this.state = {
      count: 0,
      timerRunning: false
    };
  }

  // Lifecycle method: Called after the component is mounted
  componentDidMount() {
    console.log('Component did mount');
  }

  // Lifecycle method: Called before the component is unmounted
  componentWillUnmount() {
    console.log('Component will unmount');
  }

  // Method to start the timer
  startTimer = () => {
    if (!this.state.timerRunning) {
      this.timer = setInterval(() => {
        this.setState({ count: this.state.count + 1 });
      }, 1000);
      this.setState({ timerRunning: true });
    }
  };

  // Method to stop the timer
  stopTimer = () => {
    if (this.state.timerRunning) {
      clearInterval(this.timer);
      this.setState({ timerRunning: false });
    }
  };

  render() {
    return (
      <div>
        <h1>Timer: {this.state.count}</h1>
        <button onClick={this.startTimer}>Start</button>
        <button onClick={this.stopTimer}>Stop</button>
      </div>
    );
  }
}

export default App;

Limitations of Class Components

Verbosity

Class components seems like more verbose compared to functional components, which can make the code harder to read and write.

This syntax requires more boilerplate code, such as constructors and this bindings.

‘This’ keyword

This keyword can be more confusing for beginner and its refers to the instance of the component.

Performance

Class components can be a bit slower compared to functional components

Functional Components

Functional component is a JavaScript function that returns a React element. It is one of the simplest ways to define a component. Functional components are typically used for rendering UI elements and handling stateless logic.

function App() {
  return <h1>Hello</h1>;
}

Simplicity and Readability:

Functional components are easier to read and write, making them ideal for simple UI elements that do not require complex state management or lifecycle methods.

Performance:

Functional components can be more performant because they are typically lighter and do not involve the overhead of class components. They are simply functions that take props and return JSX.

Encouraging Best Practices:

Using functional components encourages the use of pure functions and a more functional programming style, which can lead to more predictable and maintainable code.

Differences between Functional Components and Class Components:

	Functional Components	Class Components
Syntax and Structure	Functional Components are plain JavaScript functions that take props as an argument and return JSX.	Use class syntax, extending React.Component. They have a constructor, render method, and can have state and lifecycle methods.
State Management	Initially could not manage state internally but now can use useState and other Hooks for state management.	Manage state internally using this.state and this.setState().
Lifecycle Methods	They did not have lifecycle methods initially. With Hooks like useEffect, they can now perform side effects similar to lifecycle methods in class components.	They Have built-in lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount
Use of this Keyword	Do not use this, leading to fewer potential bugs and simpler syntax.	Often require the use of the this keyword to access props, state, and methods.