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.

¿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

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

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

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()

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

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

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

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

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

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

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

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