Uso del hook 'useState' en React

React es una biblioteca JavaScript para construir interfaces de usuario. Es conocida por su eficiencia y flexibilidad, parte de la cual proviene de los ganchos o "hooks" que proporciona. En particular, el hook useState es esencial para la gestión del estado en los componentes funcionales.

El estado en React

En React, el "estado" es una característica que permite a los componentes almacenar información que puede cambiar con el tiempo y durante el ciclo de vida de un componente. Este estado puede influir en el comportamiento del componente y la representación de la interfaz de usuario.

Originalmente, sólo los componentes de clase en React podían tener un estado, lo que a menudo conducía a códigos más pesados y confusos. Sin embargo, desde la versión 16.8, React introdujo los 'hooks' que permiten a los componentes funcionales tener un estado, dando como resultado un código más limpio y fácil de entender.

¿Qué es useState?

El useState es un hook que permite a los componentes funcionales tener acceso a las características de estado. Este hook devuelve un par de valores: el estado actual y una función que permite actualizar este estado.

La sintaxis básica de useState es la siguiente:

const [estado, setEstado] = useState(valorInicial);

Donde valorInicial es el valor inicial de nuestro estado.

La razón por la que obtenemos dos variables es que useState devuelve un par de valores en un array. El primer valor es el estado actual, y el segundo es una función que nos permite actualizar este estado. Esto es análogo al 'this.state' y 'this.setState' en los componentes de clase.

Ejemplo de Uso

Un ejemplo sencillo de cómo usar useState sería en un contador:

import React, { useState } from 'react';

function Contador() {
  const [cuenta, setCuenta] = useState(0);

  return (
    <div>
      <p>Has hecho click {cuenta} veces</p>
      <button onClick={() => setCuenta(cuenta + 1)}>
        Haz click aquí
      </button>
    </div>
  );
}

export default Contador;

En el ejemplo anterior, definimos un estado llamado 'cuenta' que tiene un valor inicial de 0. También tenemos una función 'setCuenta' que utilizamos para incrementar la cuenta cuando el usuario hace clic en el botón.

Conclusión

El hook useState es una herramienta esencial en el desarrollo con React, ya que permite a los componentes funcionales utilizar y manejar el estado. Esto no sólo hace que el código sea más fácil de entender, sino que también permite una mayor flexibilidad en el diseño de componentes.