Ejemplo de uso del hook useState en React

En React, el hook useState se utiliza para agregar estado a los componentes funcionales. Este hook devuelve un array con dos elementos: el estado actual y una función para actualizar ese estado. La función de actualización puede recibir un nuevo valor o una función que calcula el nuevo valor basándose en el estado anterior.

Ejemplo de cómo usar useState en un componente funcional de React:

function Contador() {
  const [contador, setContador] = useState(0);

  const incrementarContador = () => {
    setContador(contador + 1);
  };

  return (
    <div>
      <h1>Contador: {contador}</h1>
      <button onClick={incrementarContador}>Incrementar</button>
    </div>
  );
}

export default Contador;

1. Importamos useState desde React.

2. Luego, en el componente Contador, usamos useState(0) para inicializar el estado del contador en 0. contador es el estado actual y setContador es la función que usaremos para actualizar ese estado.

3. Creamos una función incrementarContador que utiliza setContador para aumentar el valor del contador en 1 cada vez que se hace clic en el botón.

4. Finalmente, renderizamos el estado actual del contador y un botón que, al hacer clic, llamará a la función incrementarContador.

Cuando el botón se presiona, React actualizará automáticamente el componente y reflejará el nuevo valor del contador en la interfaz de usuario.