Use the useState hook to manage state in functional components. Prior to the introduction of hooks in React, state management was only possible in class components. However, with the useState hook, functional components can now also manage state. The useState hook is a function that takes an initial state value and returns an array with two elements: the current state value and a function to update the state value.

Using the useState hook is useful because it simplifies the code and makes it more readable. It also eliminates the need to convert functional components to class components just to manage state. Additionally, it allows for better performance because it avoids unnecessary re-renders of the component.

Here is an example of how to use the useState hook to manage state in a functional component:

import React, { useState } from 'react';

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

  function increment() {
    setCount(count + 1);
  }

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

In the above example, the useState hook is used to initialize the count state to 0. The setCount function is used to update the count state whenever the increment function is called. The count state is then displayed in the component using the curly braces syntax.