Comparing Hooks and Class Components in React

What are the main differences between hooks and class components in React?

The main differences include state management, lifecycle methods, and syntax. Hooks allow functional components to manage state and side effects without needing classes.

Can you give me an example of a simple component using hooks?

Sure! Here's a simple counter component using hooks:

import React, { useState } from 'react';

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

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

This component uses the useState hook to manage the count state.

How do class components handle state differently?

Class components use this.state to manage state and require binding methods in the constructor. They also use lifecycle methods like componentDidMount for side effects.

Which approach is recommended for new React projects?

Hooks are generally recommended for new projects due to their simplicity and the ability to use state and lifecycle features in functional components.