Urian Viera Full Stack Developer autodidacta
Urian Viera

08 Febrero 2024 : 11:02 p.m

El Poder del Hook useState en ReactJS

Descubre su Propósito, Aprende Cuándo y Cómo Usarlo para Impulsar tus Proyectos al Siguiente Nivel

El hook useState, es una herramienta fundamental que todo desarrollador debería dominar. ¿Te preguntas qué es y cómo puede mejorar tu experiencia de desarrollo? ¡Has llegado al lugar indicado! En este post, exploraremos a fondo el hook useState, desde su definición hasta ejemplos prácticos, para que puedas integrarlo sin problemas en tus proyectos de React.

Urian Viera Full Stack Developer autodidacta

¿Qué es el hook useState?

useState es un Hook de ReactJS que te permite agregar una variable de estado a tu componente, es decir nos permite agregarle un estado local a un componente funcional y cambiar ese estado.

El hook useState es una de las herramientas más fundamentales en React para manejar el estado en una aplicación. Es una forma sencilla de crear y actualizar variables de estado en un componente de React sin tener que escribir una clase completa.

Para comprender el funcionamiento de useState, es fundamental entender que en React, los componentes pueden manejar dos tipos de datos: props y estado. Las props,son valores que un componente recibe de su componente padre, mientras que el estado representa la información gestionada internamente por el componente.

¿Qué devuelve useState?

Devuelve una pareja de valores: el estado actual y una función que permite actualizarlo.

¿Por qué usar useState?

La razón principal para utilizar el hook useState radica en su simplicidad y eficacia. Al utilizar useState, puedes añadir fácilmente estado a tus componentes funcionales, lo que los hace más legibles y fáciles de mantener.

¿Cuándo usar useState?

El hook useState es ideal en situaciones donde necesitas gestionar el estado local de un componente funcional.

El hook useState nos permite definir variables de estado en nuestros componentes funcionales. Este hook se importa desde la librería 'react' y se implementa dentro del cuerpo del componente. Para ilustrar su uso, consideremos un ejemplo donde empleamos useState para crear un contador en un componente:

#1 Crear un contador
jsx
import { useState } from 'react';

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

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

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

En este ejemplo, useState nos permite crear una variable de estado llamada 'contador' con un valor inicial de 0 y la función 'setContador' para actualizar dicho valor. Cada vez que el botón "Incrementar" es presionado, invocamos la función 'incrementarContador', la cual actualiza el estado del contador, reflejando dinámicamente el cambio en la interfaz de usuario.

Nota:

Al declarar el hook useState, como vimos anteriormente:

jsx
const [contador, setContador] = useState(0);
debemos considerar que la parte izquierda es una desestructuración de la función useState, (recordemos que un hook es una función).
#2 Cambiar el color de un elemento
jsx
import { useState } from 'react';

export default function CambiarColor() {
  const [color, setColor] = useState('blue');

  const cambiarColor = () => {
    const nuevoColor = color === 'blue' ? 'red' : 'blue';
    setColor(nuevoColor);
  };

  return (
    <div style={{ backgroundColor: color, padding: '20px' }}>
      <button onClick={cambiarColor}>Cambiar color</button>
    </div>
  );
}

El componente CambiarColor usa el hook useState de React para alternar dinámicamente entre los colores azul y rojo al hacer clic en un botón. Mediante el estado color, controla el color de fondo de un <div> y la función cambiarColor actualiza este estado en respuesta al evento del botón "Cambiar color".

#3 Manejar la entrada de texto
jsx
import { useState } from 'react';

const InputTexto = () => {
  const [texto, setTexto] = useState('');

  const manejarCambioTexto = (event) => {
    setTexto(event.target.value);
  };

  return (
    <div>
      <input type='text' value={texto} onChange={manejarCambioTexto} />
      <p>Texto ingresado: {texto}</p>
    </div>
  );
};
export default InputTexto;

El componente InputTexto utiliza el hook useState de React para controlar dinámicamente el texto ingresado en un campo de entrada de texto. La función manejarCambioTexto actualiza el estado texto en respuesta al evento de cambio en el campo de entrada. La interfaz muestra el texto ingresado y permite al usuario modificarlo en tiempo real.

#4 Actualización Dinámica de Estado en React con useState()
jsx
import { useState } from "react";

const ComponenteUpdate = () => {
  const [state, setState] = useState({ name: "Urian", age: 35 });

  const updateName = () => {
    setState({ ...state, name: "Brenda" });
  };

  const updateAge = () => {
    setState((prevState) => ({ ...prevState, age: prevState.age + 1 }));
  };

  return (
    <div>
      <h2>Objeto:</h2>
      <p>Name: {state.name}</p>
      <p>Age: {state.age}</p>
      <button onClick={updateName}>Actualizar Nombre</button>
      <button onClick={updateAge}>Actualizar Edad</button>
    </div>
  );
};
export default ComponenteUpdate;

El componente ComponenteUpdate, utiliza el hook useState para gestionar el estado de un objeto con propiedades de nombre y edad. Dos funciones, updateName y updateAge, permiten actualizar dinámicamente el estado del objeto al cambiar el nombre a "Brenda" y aumentar la edad en uno respectivamente.

#5 Listar Mensajes de Entrada, desde un input
jsx
import { useState } from "react";

const ListaMensajesEntrada = () => {
  const [mensaje, setMensaje] = useState("");
  const [listaMensajes, setListaMensajes] = useState([]);

  const manejarCambioMensaje = (e) => {
    setMensaje(e.target.value);
  };

  const agregarMensaje = () => {
    if (mensaje.trim() !== "") {
      const nuevoMensaje = {
        id: listaMensajes.length + 1,
        mensaje: mensaje.trim(),
      };
      setListaMensajes([...listaMensajes, nuevoMensaje]);
      setMensaje("");
    }
  };

  return (
    <div>
      <input
        type="text"
        value={mensaje}
        placeholder="Ingrese un mensaje"
        onChange={manejarCambioMensaje}
      />
      <button onClick={agregarMensaje}>Agregar Mensaje</button>
      <ul>
        {listaMensajes.map((m) => (
          <li key={m.id}>{m.mensaje}</li>
        ))}
      </ul>
    </div>
  );
};
export default ListaMensajesEntrada;

El componente "ListaMensajesEntrada" permite a los usuarios ingresar mensajes en un campo de texto. Al hacer clic en el botón "Agregar", el mensaje se añade a una lista que se muestra debajo. Si el campo está vacío, no se agrega ningún mensaje. Es una funcionalidad básica de gestión de mensajes en tiempo real.

#6 Capturar datos de un formulario
jsx
import { useState } from "react";

const MostrarEjemploTexto = () => {
  const [datos, setDatos] = useState({
    nombre: "",
    profesion: "",
  });

  const manejarCambioInput = (e) => {
    setDatos({
      ...datos,
      [e.target.name]: e.target.value,
    });
  };

  const manejarEnvioFormulario = (e) => {
    e.preventDefault();
    console.log("Datos del formulario:", datos);
  };

  return (
    <form onSubmit={manejarEnvioFormulario} method="POST">
      <label htmlFor="nombre">Nombre:</label>
      <input type="text" name="nombre" onChange={manejarCambioInput} />
      <br />
      <label htmlFor="profesion">Profesión:</label>
      <input type="text" name="profesion" onChange={manejarCambioInput} />
      <h2>Se ingresó el nombre: {datos.nombre} </h2>
      <h2>Se ingresó la profesión: {datos.profesion} </h2>
      <button type="submit">Enviar</button>
    </form>
  );
};

export default MostrarEjemploTexto;

El componente "MostrarEjemploTexto" es un formulario en React que permite a los usuarios ingresar su nombre y profesión. Utiliza el estado para mantener los datos ingresados por el usuario y mostrarlos dinámicamente en la interfaz. Cuando el formulario se envía, captura los datos y los muestra en la consola del navegador, evitando la recarga de la página.

#7 Toggler de Estado: Activo/Inactivo
jsx
import { useState } from "react";

function ActivoInactivo() {
  const [estado, setEstado] = useState(true);

  const alternarEstado = () => {
    setEstado(!estado);
  };

  return (
    <div>
      <p>El estado actual es: {estado ? "activo" : "inactivo"}</p>{" "}
      <button onClick={alternarEstado}>Alternar Estado</button>
    </div>
  );
}

export default ActivoInactivo;

El componente "ActivoInactivo" representa un estado activo o inactivo. Utiliza el hook useState para gestionar el estado y permite alternar entre los dos estados mediante un botón. Muestra el estado actual ("activo" o "inactivo") y proporciona una interfaz para cambiarlo con el botón "Alternar Estado".

#8 Marcar la option de un Menu
jsx
import { useState } from "react";

const Menu = () => {
  const [activeItem, setActiveItem] = useState(null);

  const handleItemClick = (itemName) => {
    setActiveItem(itemName);
  };

  return (
    <div>
      <ul>
        <li className={activeItem === "opcion1" ? "active" : ""}>
          <a onClick={() => handleItemClick("opcion1")} href="#">
            Opción 1
          </a>
        </li>
        <li className={activeItem === "opcion2" ? "active" : ""}>
          <a onClick={() => handleItemClick("opcion2")} href="#">
            Opción 2
          </a>
        </li>
        <li className={activeItem === "opcion3" ? "active" : ""}>
          <a onClick={() => handleItemClick("opcion3")} href="#">
            Opción 3
          </a>
        </li>
      </ul>
    </div>
  );
};

export default Menu;

El componente "Menu" en React utiliza el hook useState para administrar el estado de los elementos activos. Al hacer clic en un elemento, se actualiza el estado y se resalta el elemento seleccionado. Cada opción del menú corresponde a un elemento de la lista que almacena su estado activo.

#9 Cómo Alternar Entre Modo Oscuro y Modo Claro
jsx
import { useState } from "react";
import "../App.css"; // Asegúrate de importar tu archivo CSS

function ModoOscuroToggle() {
  const [modoOscuro, setModoOscuro] = useState(false);

  const toggleModoOscuro = () => {
    setModoOscuro(!modoOscuro);
  };

  return (
    <div className={modoOscuro ? "dark-mode" : "light-mode"}>
      <button
        className={modoOscuro ? "dark-mode-button" : "light-mode-button"}
        onClick={toggleModoOscuro}>
        {modoOscuro ? "Desactivar" : "Activar"} Modo Oscuro
      </button>
    </div>
  );
}

export default ModoOscuroToggle;

"ModoOscuroToggle" permite a los usuarios cambiar entre el modo oscuro y el modo claro de una interfaz. Utiliza el estado para alternar entre los estilos de la interfaz y proporciona un botón para activar o desactivar el modo oscuro.

#10 Cómo obtener el valor de una lista Select HTML
jsx
import { useState } from "react";

const SelectorDePais = () => {
  const [paisSeleccionado, setPaisSeleccionado] = useState("");

  const countries = [
    "Selecciona un país",
    "Argentina",
    "Brasil",
    "Chile",
    "Colombia",
    "Ecuador",
    "México",
    "Perú",
    "Venezuela",
  ];

  const handleCountryChange = (event) => {
    setPaisSeleccionado(event.target.value);
  };

  return (
    <div>
      <h2>Selecciona un país de América:</h2>
      <select value={paisSeleccionado} onChange={handleCountryChange}>
        {countries.map((country, index) => (
          <option key={index} value={country}>
            {country}
          </option>
        ))}
      </select>

      {paisSeleccionado && (
        <div>
          <h3>País seleccionado:</h3>
          <p>{paisSeleccionado}</p>
        </div>
      )}
    </div>
  );
};

export default SelectorDePais;

La función "SelectorDePais" permite a los usuarios elegir un país de América a partir de una lista desplegable. Utiliza el estado para almacenar el país seleccionado y muestra el país seleccionado en la interfaz cuando se elige uno de la lista.

En conclusión

Espero que con estos 10 ejemplos te haya quedado más claro cómo y cuándo utilizar el useState. no olvides que el hook useState es una herramienta esencial en el arsenal de cualquier desarrollador de ReactJS. Su sencillez, eficacia y versatilidad lo convierten en un elemento fundamental para construir aplicaciones web modernas y dinámicas.

¡Gracias por leer este artículo, está hecho con mucho esfuerzo y amor!

Urian Viera

👋 Ingeniero de Sistemas y Desarrollador Full Stack apasionado por el mundo del desarrollo de aplicaciones Web y Móviles. Mi experiencia abarca el Front-end y Back-end, encontrando equilibrio entre creatividad y eficiencia técnica.

Disfruto crear y compartir mis conocimientos de manera clara y directa para facilitar el aprendizaje rápido y efectivo.

Experiencias
Urian Viera full stack developer - Edumedia Tech
Edumedia Tech

Coordinador de Desarrollo

Urian Viera full stack developer - Dugotex S.A
Dugotex S.A

Desarrollador full stack

Urian Viera full stack developer - AECSA
AECSA

Desarrollador Sénior

Urian Viera full stack developer - Bull Marketing S.A.S
Bull Marketing S.A.S

Programador Web

Urian Viera full stack developer - Permutasalcuadrado
Permutasalcuadrado

Desarrollador de aplicaciones Web

Urian Viera full stack developer - Apure Tv (Canal de televisión)
Apure Tv (Canal de televisión)

Coordinador de sistemas

😲 Mi Primer Paquete NPM

Loading Request es un paquete npm diseñado para ofrecer un indicador de carga visual durante cualquier solicitud o proceso asíncrono en JavaScript. Su objetivo es mejorar la experiencia del usuario al proporcionar una integración sencilla y una personalización completa.

Échale un vistazo a este paquete npm ¡sin duda te encantará!

🔥 Mi Segundo Paquete NPM

Nextjs Toast Notify es un paquete npm imprescindible para agregar notificaciones emergentes (toasts) a tus aplicaciones web con Next.js. Ideal para proporcionar retroalimentación visual clara y efectiva sin interrumpir la experiencia del usuario.

Échale un vistazo a este paquete npm ¡sin duda te encantará!