How do I use the useState hook in React?

How do I use the useState hook in React?

The useState hook is a way to add state to functional components in React. You can import it from 'react' and use it like this: const [state, setState] = useState(initialValue).

Can you give me an example of how to use it?

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 creates a counter that increments when you click the button.

What happens if I want to use multiple states?

You can call useState multiple times in the same component. For example:

const [count, setCount] = useState(0);
const [name, setName] = useState('');

This allows you to manage different pieces of state independently.

Are there any performance considerations I should be aware of?

Yes, while useState is efficient, excessive state updates can lead to performance issues. It's best to batch updates and minimize re-renders when possible.