What are React functional components and hooks?

What are React functional components and how do they differ from class components?

React functional components are simpler and more concise than class components. They are JavaScript functions that return JSX. Unlike class components, they do not have lifecycle methods or state management built-in, but they can use hooks to manage state and side effects.

What are hooks in React and why are they useful?

Hooks are functions that let you use state and other React features in functional components. They allow for cleaner and more reusable code, enabling you to manage state and side effects without needing to convert to class components.

Can you give me an example of using the useState hook?

Sure! Here's a simple example:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

This code creates a counter that increments the count each time the button is clicked.

What are some common hooks besides useState?

Some common hooks include useEffect for managing side effects, useContext for accessing context, and useReducer for state management in more complex scenarios.