How do I convert a class component to a functional component in React?

How do I convert a class component to a functional component in React?

To convert a class component to a functional component, you can follow these steps: 1. Remove the class declaration and extend from React.Component. 2. Replace the render method with a return statement. 3. Use hooks like useState and useEffect for state and lifecycle methods.

Can you show me an example of a class component and its functional equivalent?

Sure! Here's a simple example:

Class Component:

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

  componentDidMount() {
    console.log('Component mounted');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

Functional Component:

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Component mounted');
  }, []);

  return <div>{count}</div>;
};

What are the benefits of using functional components over class components?

Functional components are generally easier to read and test. They also allow for the use of hooks, which can simplify state management and side effects.