Aprende a usar el hook useState en React.js

actualizado: 20 / 02 / 2023

Si estas empezando en el desarrollo frontend con react, es probable que hayas oído hablar del hook useState. Este hook es una de sus características más importantes y es utilizado en casi todas las aplicaciones de React.

En este artículo, te explicaré qué es el hook useState, cómo funciona y cómo puedes utilizarlo en tus proyectos.

¿Qué es el hook useState?

El hook useState es una función que te permite añadir estado a tus componentes de React. En lugar de tener que usar componentes de clase para poder trabajar con estados en tu apliación, gracias a este hook puedes tener estado dentro de un componente funcional.

En esencia, el hook useState es una forma de almacenar datos en un componente de función y mantener ese estado a través de múltiples renderizaciones.

¿Cómo funciona el hook useState?

Este gancho esta compuesto de dos partes: la primera es el estado en sí mismo, y la segunda es una función que te permite actualizar dicho estado. Para utilizar el hook useState, debes importarlo desde la biblioteca de React.

Una vez que hayas importado el hook, puedes utilizarlo en tu componente de función de la siguiente manera:

jsximport React, { useState } from "react";

function Ejemplo() {
  const [estado, setEstado] = useState("Inicial");
  return (
    <div>
      <p>El estado actual es: {estado}</p>
      <button onClick={() => setEstado("Actualizado")}>
        Actualizar estado
      </button>
    </div>
  );
}

En el código anterior, estamos definiendo un estado llamado estado y un método setEstado que nos permite actualizar el valor del estado.

Luego, en el return del componente utilizamos el estado para mostrar su valor en un elemento p, y usamos el método setEstado para actualizarlo cuando el botón es presionado.

Ejemplos de uso del hook useState

Ahora que sabemos qué es y cómo funciona el hook useState, podemos ver algunos ejemplos de cómo puedes utilizarlo.

Contador simple

El primer ejemplo que veremos es un contador simple. En este ejemplo, usaremos el hook useState para mantener un valor de contador y actualizarlo cada vez que el botón de incremento o decremento es presionado.

jsximport React, { useState } from "react";

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

  return (
    <div>
      <p>El valor actual del contador es: {contador}</p>
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
      <button onClick={() => setContador(contador - 1)}>Decrementar</button>
    </div>
  );
}

Manejar estado de un formulario de contacto con react

En este ejemplo, utilizaremos el hook useState para mantener los valores de entrada de un formulario de contacto. Cada vez que se ingresa un valor en un campo de entrada, actualizaremos el estado correspondiente utilizando el método setEstado.

jsximport React, { useState } from "react";

function FormularioContacto() {
  const [nombre, setNombre] = useState("");
  const [email, setEmail] = useState("");
  const [mensaje, setMensaje] = useState("");

  const enviarFormulario = () => {
    // Aquí se puede agregar la lógica para enviar el formulario
  };

  return (
    <form>
      <label>
        Nombre:
        <input
          type="text"
          value={nombre}
          onChange={e => setNombre(e.target.value)}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={e => setEmail(e.target.value)}
        />
      </label>
      <label>
        Mensaje:
        <textarea value={mensaje} onChange={e => setMensaje(e.target.value)} />
      </label>
      <button onClick={enviarFormulario}>Enviar</button>
    </form>
  );
}

Recuerda que puedes utilizar el hook useState en combinación con otros hooks y características de React para crear aplicaciones más avanzadas y eficientes. En futuros artículos, exploraremos más características de React y cómo puedes utilizarlas para mejorar tus proyectos.

¡Sigue aprendiendo y divirtiéndote programando!