What is difference between functional and class component?

In React, there are two types of components: functional and class components. The main difference between them is that functional components are just plain JavaScript functions that return JSX, while class components are ES6 classes that extend the React.Component class and have a render method that returns JSX.

Functional components are simpler and easier to read and write. They are also more performant than class components because they don't have the overhead of creating and managing a class instance. Functional components are ideal for simple components that don't need state or lifecycle methods. Here is an example of a functional component:

function MyComponent(props) {
  return (
    <div>
      <p>Hello, {props.name}!</p>
    </div>
  );
}

Class components, on the other hand, are more powerful and flexible than functional components. They can have state and lifecycle methods, which allow them to handle more complex logic and interactions. Class components are ideal for components that need to manage state or have complex lifecycle methods. Here is an example of a class component:

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

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times.</p>
        <button onClick={() => this.handleClick()}>
          Click me
        </button>
      </div>
    );
  }
}

In summary, functional components are simpler and more performant, while class components are more powerful and flexible. The choice between them depends on the specific needs of the component and the application as a whole.